CASE STUDY
Product substitutions
Creating a scalable way for customers to manage substitutions during online grocery checkout.
Problem
Customers were frequently receiving substitute products they wouldn’t have chosen — leading to frustration, diminished trust, and a decline in repeat orders.
Despite an existing substitution system, there was no mechanism for customers to express product preferences (dietary, brand, or personal). As a result, many opted out of substitutions entirely or contacted support for refunds which increases operational costs and undermines profitability.
Goals
- Improve customer satisfaction (CSAT) and touchpoint NPS related to substitutions
- Increase order completion rates and retention
- Reduce operational overhead from substitution-related refunds
Challenges
The primary challenge was identifying where in the user journey we could introduce substitution controls without increasing friction or abandonment.
We also required a solution that:
- Worked across web, iOS, and Android
- Was modular enough to scale across multiple fulfillment models
- Balancing simplicity and control
We believe that creating opportunities to engage customers when they are reviewing products during the checkout process, will result in increased adoption. We’ll know this is true if customers personalise their preferences.
The solution
I led the design of a flexible, scalable pattern that could be embedded within existing checkout flows. It offered a tiered approach — from a simple binary opt-in, to more granular control for those with specific needs.
To validate this, I worked closely with product and engineering to prototype concepts, which we tested through a mix of qualitative and quantitative methods:
Research & Testing Phases:
- Discovery
Explored how customers perceive substitutions and how involved they wanted to be in the selection process. We found most preferred to make decisions only when relevant and as late in the journey as possible. - Concept Testing
Collaborated with cross-functional teams to define the ideal experience and ensure business alignment. Early prototypes explored touchpoints earlier in the cart and PDP, but these introduced too much friction. - Future State Experience
Designed and tested a streamlined integration within the checkout flow. This minimized disruption while allowing customers to set preferences when substitutions were most likely to be top of mind. - Refinement & Scenario Testing
Multiple rounds of usability testing helped refine language, UI behavior, and edge cases — such as handling multiple items or store-specific limitations. - Quantitative Validation
We ran a large-scale quantitative test, capturing over 1,000 customer responses to evaluate perceived value, clarity, and likelihood of adoption.
I have mobility issues so when I order for the fortnight I prefer substitutions on most items, so I’m not left without what I need. I like having the additional option to select specific substitutes, but I wouldn’t do this for every item
Implementation Strategy
To reduce risk and support agile delivery, I designed the feature for incremental rollout. This allowed the team to learn quickly from live usage, navigate API limitations, and test interactions with real substitution data.
The final design supports progressive disclosure — offering a lightweight, default path for most users, with deeper customisation for those who seek it.
Results
The feature was released on web to a limited set of stores as a proof of concept. Early adoption metrics are strong now across web, iOS and Android, with positive qualitative feedback and higher opt-in rates than previous substitution solutions.
We’re now exploring ways to refine the experience further as initial results were sitting around 5% which was lower than the targeted substitution preference selection. As we expand to iOS and Android app platforms and broader store availability, the trend is significantly increased.
Reflection
This project reinforced the importance of designing for progressive complexity. Not all users wants to configure their experience in detail, but for those who do, it’s critical the interface doesn’t overwhelm. It also highlighted the value of close collaboration between design, engineering, and data. Some of the design decisions were development-led as opposed to the ideal customer experience. Other teams have battle tested the designs throughout various rounds of customer testing as we enhance our journeys. It consistently is the preferred option against newer design patterns. Substitutions in the newer version of checkout, considers substitutions as a complimentary feature rather than added to a legacy design.
As a fast follow, a simple mechanism for rating substitutions was added via the order detail view. This allowed us to initially determine interaction volume with an end state of feeding this information into the algorithm.
I continue to reiterate the design, removing information that is not related to the task.
By presenting the information via a modal stack, I’m able to reduce cognitive load which uplifts the visual prominence of the feature through chunking. Leaning into various UX best practices and patterns.
Another pain point that was not originally solved for which we heard in during customer interviews, was the issue of accessing additional information related to dietary and product information. As a result, customers would abandon the process. This was challenging as consideration was not to take customers out of the checkout flow. I devised a long press solution which presents higher resolution images or video and a context menu. Although this does not provide great affordance, I believe there is an opportunity to onboard and educate customers about the feature.
