Ocado

Improving Time To Shop On Ocado's Mobile App

My role: Senior Product Designer, User Research

Company: Ocado Technology

Platform: Android, iOS, Web mobile

Year: 2021

Once Upon A Time...

Shopping for groceries online was supposed to be easy—tap a few buttons, find your products, and fill your cart. But for mobile users of Ocado, the experience was far from smooth. It felt like navigating a maze: landing on the app, tapping "Browse," choosing "Fresh & Chilled Food", then "Vegetables," then "All Vegetables," just to see what was available. The process took an average of 30 seconds—an eternity when you're hungry or in a hurry.

For first-time users, this wasn’t just inconvenient—it was frustrating. Metrics showed a 25% higher drop-off rate compared to the web desktop experience, where a side menu enabled quick and easy navigation. Mobile users were stuck with a clunky, multi-step journey that left many abandoning their carts before they even started shopping.

iOS App

Web mobile

Average time to product discovery: 30 seconds on mobile, compared to 10 seconds on web desktop.
User drop-off rate: 25% higher on mobile due to prolonged navigation steps.
Task completion rates: 60% lower for first-time mobile users trying to find specific product categories.

These issues highlighted the need for a redesign that would prioritize speed, reduce friction, and improve user engagement specifically for mobile users.

PROBLEM STATEMENT & KEY CHALLENGES

The Ocado mobile app had a higher drop-off rate and lower engagement compared to its desktop counterpart. Data revealed that mobile users took an average of 30 seconds and 5 clicks to reach product categories, compared to just 10 seconds on desktop thanks to a side menu. Usability testing showed frustration among first-time mobile users due to the multi-step navigation process before they could even view products.

The problem was clear: How might we reduce time to product discovery and improve the mobile shopping experience, ensuring it matches the efficiency of the desktop journey?

Key Challenges:

Friction in the flow: Too many steps to view products, causing user drop-offs.
Limited screen space: Mobile lacked the space for a side menu like desktop, requiring innovative solutions for navigation.
Emotional impact: Frustration was a common theme, particularly among first-time users, leading to lower satisfaction and engagement.

GOALS & OBJECTIVES

Goals:

Simplify the Shopping Journey: Reduce the number of clicks and selections required to start shopping.
Increase User Engagement: Encourage users to explore and purchase products by providing immediate visibility of items upon landing.
Enhance Usability: Create a more intuitive interface that aligns with user expectations and behaviors.

Objectives:

Reduce the number of steps to reach product categories.
Provide immediate access to products on the home screen.
Introduce a horizontal scroll menu for quick product type switching.

METRICS - DRIVEN DESIGN

North Star Metric:

Reduce time to product discovery and increase shopping engagement by making products immediately accessible on the home screen.

SUPPORTING METRICS

Leading Metrics:

Clicks to Product Discovery: Reduction in the average number of clicks to reach a product from 5 to 0 (products visible on landing).
Time to Task Completion: Target a 70% reduction in time to view products.
User Satisfaction Score: Achieve a 90% rating for ease of use in usability tests.
Task Completion Rate: Increase successful navigation to products by 25%.

Lagging Metrics:

Conversion Rate: Measure a 15% increase in purchases after the redesign.
Retention Rate: Improve returning mobile users by 10%.
Cart Additions: Increase the average number of items added to the cart by 12%.
Drop-off Rates: Decrease mobile drop-offs by 20%.

PRODUCT REQUIREMENTS

Functional Requirements:

Home Screen with Products: Display product recommendations immediately upon landing on the app.
Horizontal Scroll Navigation: Provide a category-based menu for seamless product type switching.
Add-to-Cart Functionality: Ensure users can quickly add items to their cart directly from the home screen.

Non-Functional Requirements:

Performance: Ensure product images and navigation load in less than 2 seconds.
Scalability: Allow additional categories to be added dynamically to the horizontal scroll.
Accessibility: Design with WCAG 2.1 AA compliance for inclusivity.

Multi-Step Navigation: Users had to go through up to 5 screens before reaching any products, leading to higher drop-off rates.
Overwhelming Category Structure: Each step introduced new options, creating cognitive overload and making it harder to find specific items.
Lack of Immediate Access: Products were not visible on the landing page, creating friction and delaying shopping.

THE REDESIGN SOLUTION

To address these issues, the redesign focused on streamlining the navigation process by introducing a horizontal scroll menu directly on the home screen. This eliminated the need for multi-step navigation and provided immediate access to products.

Horizontal Scroll Menu

Due to the large number of categories in the previous design, we decided to shorten the options displayed in the horizontal scroll menu at the top of the home screen. While users can now easily switch between simplified categories like "Fruit & Vegetables," "Bakery & Cupboard," and "Meat & Poultry" with a single swipe or tap, the detailed process of reducing and consolidating categories will be addressed in a separate case study.