Ocado
Configurable Slots For Checkout Experience
My role: End-to-end Product Designer, User Research
Company: Ocado Technology
Platform: Web, Web Mobile, Android, iOS
Year: 2022
BACKGROUND
In February 2022, our team embarked on a UX research initiative to evaluate and optimize the slot booking experience for users. The research focused on two core aspects:
-
The use of a drawer component versus a separate page for slot exploration and booking.
-
Displaying all slots versus only available slots.
Our goal was to identify the most intuitive and efficient design choices to enhance task success, reduce time on task, and improve overall user satisfaction.
OBJECTIVES
-
Validate Design Choices:
Compare user performance and satisfaction between the drawer component and separate page through user testing. -
Understand Slot Preferences:
Test and analyze user attitudes and behaviors toward showing all slots versus only available slots. -
Implement Feedback Mechanisms:
Refine how feedback messages (e.g., booking confirmation) are presented to improve post-task clarity and confidence. -
Identify UI Pain Points:
Evaluate specific design elements (e.g., address cards, slot expiration messages) to address usability issues. -
Foster Regional Usability:
Collaborate with localization and content teams to ensure copy and terminology align with user expectations in different regions. -
Provide Actionable Recommendations:
Deliver clear and practical insights for adopting the most effective design solutions, supported by quantitative and qualitative data.
THE PROBLEM
The current slot booking interface is confusing and inefficient for users. Navigation issues, unclear delivery and address options, and inconsistent terminology lead to longer task times and lower satisfaction. We need to create a more intuitive, localized, and efficient booking experience that helps users complete tasks easily and quickly.
How might we create an intuitive, scalable, and localized slot booking experience that enables users to seamlessly explore options, complete tasks efficiently, and receive clear feedback?
NORTH STAR METRIC
Increase task success rates and reduce time on task for slot booking, ensuring a seamless and intuitive experience across all user interfaces.
SUPPORTING METRICS
Leading Metrics:
-
Task Completion Rate: Percentage of users who successfully complete key booking tasks (e.g., exploring options, booking a slot).
-
Time on Task: Average time users spend completing booking-related tasks.
-
Navigation Errors: Number of errors made while navigating the interface, such as selecting the wrong option or failing to locate key features.
-
User Feedback on Ease of Use: Percentage of users who rate the interface as “easy” or “very easy” to use during testing.
Lagging Metrics:
-
Overall Task Success Rate: Improvement in the percentage of users who successfully complete booking tasks after implementation.
-
Reduction in Support Tickets: Decrease in user support inquiries related to slot booking or navigation confusion.
-
User Satisfaction Scores: Post-update survey scores measuring satisfaction with the slot booking experience.
-
Retention and Engagement Rates: Increase in the number of returning users due to improved usability and reduced friction in the booking process.
-
Localization Accuracy: Reduction in negative feedback related to region-specific terminology or design mismatches.
USER TESTING
METHOD:
Unmoderated user testing. The testing was done using UserZoom and consisted of 20 participants (50% from UK and 50% from USA)
TASKS:
-
Explore slot options
-
Book a slot for a specific day
-
Change address
-
Change delivery type
-
Change delivery time
Test 1: Separate Screen vs. Drawer Component
METHOD:
Unmoderated user testing. The testing was done using UserZoom and consisted of 10 participants (50% from UK and 50% from USA)
Prototype A: Separate screen
TASK SUCCESS RATE - PROTOTYPE A:
Task 1 - 60%
Task 2 - 90%
Task 3 - 70%
Task 4 - 100%
Task 5 - 100%
Prototype B: Drawer component
TASK SUCCESS RATE - PROTOTYPE B:
Task 1 - 90%
Task 2 - 90%
Task 3 - 90%
Task 4 - 100%
Task 5 - 100%
Participants using the drawer performed “exploratory” tasks particularly better
Task 1: Explore other slot options
9 out of 10 users successfully explored other slot options on the drawer by changing delivery type.
… vs. 6 out of 10 that used the separate page.
Task 3: Change addresses
9 out of 10 successfully changed their address from office to home on drawer.
… vs. 7 out of 10 that used the separate page.
Test 2: All slots vs Available-only slots
METHOD:
Unmoderated user testing. The testing was done using UserZoom and consisted of 10 participants (50% from UK and 50% from USA)
Prototype A: All slots
Prototype B: Available slots
9 out of 10 users preferred seeing only slots available, but performed task successfully in both.
Prototype B: Avg. Time Reduced 40%
PRODUCT REQUIREMENTS:
-
Functional Requirements
-
Slot Exploration: Allow users to easily explore slot options by changing delivery type, address, and time settings.
-
Implement a drawer component to simplify navigation and reduce cognitive load.
-
Slot Display Options: Provide the ability to display only available slots by default, with an option to view all slots.
-
Localization: Ensure region-specific terminology is used (e.g., "Pick Up" for the US and "Collection" for the UK).
-
Include language and format adjustments (e.g., time zones, date formats).
-
Feedback Mechanism: Provide clear and immediate feedback (e.g., confirmation messages) near the action buttons to ensure users understand task success.
-
Address Management: Include easily identifiable and editable address cards with clear visual affordances.
-
Task Shortcuts: Offer quick-action cards like "First Available Slot" to allow users to skip unnecessary scrolling.
-
MY RESPONSIBILITIES:
Research Design and Execution:
Collaborated with UX researchers and designers to define key questions and objectives for the study.
Designed research methodologies, including unmoderated user testing with clear tasks and goals.
Prototype Development:
Created interactive prototypes for both the drawer component and the separate page to simulate real user interactions.
Designed variations for "All Slots" and "Only Available Slots" interfaces to test user preferences and performance.
Data Analysis and Synthesis:
Collected and analyzed both qualitative and quantitative data from user testing (e.g., task success rates, time on task, user feedback).
Identified patterns, usability pain points, and key insights to inform design decisions.
Design Improvements:
Recommended UI changes based on research findings, such as improving the visual affordance of address cards and localizing terminology.
Suggested enhancing feedback mechanisms to ensure task clarity and confidence.
Collaboration and Communication:
Worked closely with cross-functional teams, including UX researchers, designers, and developers, to ensure findings translated into actionable design solutions.
Presented insights and recommendations to stakeholders, advocating for user-centered design improvements.
Usability Advocacy:
Championed the implementation of the drawer component and "Only Available Slots" option based on user performance and preference data.
Ensured accessibility and scalability of all proposed solutions to meet diverse user needs.
Booking Slots Original Experience
Booking Slots *NEW* Experience
Choose a Slot
Delivery Options - Unattended Delivery
Delivery Options - Unattended Delivery
Choose / Change address
CONCLUSION
The redesign of Ocado’s slot booking experience transformed and significantly sped up the process of booking a delivery slot across both desktop and mobile platforms. On desktop, we introduced a new drawer component, which retained all essential functions, including delivery type exploration and selection, address changes, and more, while simplifying navigation.
On both desktop and mobile, we now display only available time slots by default, with an option for users to view all slots if needed. This change reduced cognitive load and made the booking process faster and more intuitive.
User testing confirmed our assumptions and provided valuable insights into improving the booking system. The results were overwhelmingly positive, with participants praising the streamlined interface and reduced complexity. Additionally, the time required to complete the task of booking a delivery was shortened by 40% on both platforms, making the process not only quicker but also more enjoyable for users.
LESSONS LEARNED
-
Collaboration Across Teams Drives Success:
The project’s success relied on seamless cross-functional collaboration. Designers, researchers, product managers, and developers worked together to ensure the solution was both user-friendly and technically feasible. Each team’s expertise contributed to a well-rounded and scalable outcome. -
User Insights Are Indispensable:
User testing provided invaluable insights and confirmed key assumptions about the redesign. It also gave us the opportunity to make meaningful changes aligned with user preferences, ensuring the final product met their needs and expectations.