Case Study

Thumbnail

UK ‧ Global ‧ 2025-2026

Ocado Technology

Customer selected substitutions

The problem

Prior to this project, customers had no ability to choose or manage substitutions. When an item was unavailable, it was automatically replaced during picking, and customers only discovered the substitution once the order arrived at their door, at which point they could accept or reject it.

This created frustration and eroded trust, particularly when substitutions did not match customer preferences or needs.


This meant that a significant proportion of customers were regularly experiencing unexpected changes to their orders, with no ability to prevent or prepare for them.

Business impact

From a commercial perspective, item-level unfulfilment is the critical unit of analysis because each substitution or short corresponds directly to lost revenue (for shorts and rejected subs) or increased operational cost (through handling, waste or doorstep friction). 

Annualised financial implications:

  • £46.1M revenue lost from shorts

  • £12.5M revenue lost from rejected subs

  • £8.7M in Opex (product waste – purge) from rejected subs

In total, this represents ~£58.6M in missed revenue and ~£8.7M in operational costs annually across OSP Ecom Partners.


UX Strategy

The goal of this project was to shift substitutions from a reactive, post-fulfilment experience to a proactive decision giving customers meaningful control while respecting operational and logistics constraints.

  • Driving discovery and problem definition in collaboration with product

  • Contributing to user research and interviews, and translating insights into design principles

  • Leading design exploration and solution definition across web, app and webapp

  • Owning design decisions and alignment across stakeholders

  • Delivering handoff to engineering and supporting implementation through launch

I worked closely with logistics and fulfilment teams to ensure the experience was operationally feasible and scalable.

Key constrains and complexity


  • Defined cut-off times, after which changes could no longer be actioned by the CFC (Customer Fulfilment Centre)

  • Notification timing that allowed customers to respond while still giving fulfilment teams time to react

  • Predictive accuracy around which products were likely to become unavailable

  • Stock availability of potential substitute items

The challenge was to give customers meaningful control without introducing operational risk or negatively impacting fulfilment efficiency.


Research summary: moderated test

Objectives


  • Evaluate whether users clearly understand which products will not be delivered and which will be replaced.

  • Test if users know how to change a suggested substitution.

  • Observe how users remove an item they no longer want.

  • See what users do if they want to manually add a replacement for an item with no substitution.

Details

N. of sessions: 8 

  • Duration: 30 minutes

  • Method: User testing with prototype

  • Participants’ criteria

    • Mix of sex, ages, locations

    • Regular online grocery shoppers

    • Based in the UK

    • Native or Fluent in English

    • Mobile phone preferred device for shopping

Key takeaways


  • Participants who had previous experience with substitutions said they those were overall negative, and tend to opt out of substitutions if they can.

  • Although the design was clear to most participants, 2/8 had an overall negative and 2/8 had a mixed experience with it.

  • We started having a ‘Missing section’ that was confusing to most participants, mostly due to the term ‘missing’ and the lack of call to action on that section, so we removed it.

  • Most participants understood that they would have to search for alternatives for missing items themselves. But most didn’t understand correctly how to do that.

  • Most participants understood that they would get the substitution suggested if they don’t take any action to change it in their basket. 

  • Most participants correctly chose another substitution amongst the ones offered.




Final design



For the final design, we decided to enable the substitutions flow after payment, within the Order Details page.

There is an anchor button that takes users directly to the substitutions section, where they can see the missing product and the substitute we have selected for them. If the user does not make any changes, this will be the product they receive at home. They can still reject it at the door, and the amount paid will be refunded. The refund will be reflected in their order.

Users can tap the “Change substitutions” button to view the list of options that the retailer has configured as possible substitutes for that product. From there, they can select a different product or reject the substitution entirely.

Users can also access a simplified product detail page that we created specifically for this flow. It does not include CTAs in order to reduce drop-off, but it was important to display ingredients and key product information.

Once users accept a substitute, they do not need to go through the payment gateway again. We will automatically match any promotions they previously selected.

This approach works well because data shows that there are typically only two, or at most three, substituted products per order, making the process short and manageable.

Specs


Accessibility

In Ocado, we already have an established design system that complies with accessibility standards, including WCAG guidelines for color contrast and typography. This system ensures that all retailer customizations maintain accessible contrast ratios and readable typographic scales across different themes and brand adaptations. In this document, I have also specified the accessibility labels that screen readers will announce, ensuring that interactive elements and key content are properly described for users who rely on assistive technologies.



Tracking