The Problem
At the time, customers had no clear visibility of how long their groceries would last once picked - while they could see estimated shelf life when shopping, they had no easy way to understand the actual use-by dates of the items they received after their order had been picked.
In the previous system (Ocean), use-by dates were available, but only within a downloadable receipt after picking. While accurate, this meant the information was buried and not surfaced within the main product experience.
In the new platform (OSP), shelf life was visible while browsing, helping customers make purchasing decisions and build trust in product quality. However, this reflects a pre-pick estimate and doesn’t account for what customers actually receive.
This created a gap in the experience; customers could make informed decisions at the point of purchase, but lost that clarity once their order was confirmed and picked.
In practice, this meant:
Use-by information existed, but was buried in a receipt
Shelf life was visible earlier in the journey, but didn’t reflect post-pick reality
Customers couldn’t easily judge how soon items needed to be used, making planning harder and increasing the risk of waste
Use by information displayed within receipts within Ocean
Understanding the Opportunity
Rather than introducing new data, the opportunity was to bring existing, accurate use-by information into the core experience, surfacing it where customers interact with their orders.
This required answering two key questions:
What information should we show, and when?
Shelf life supports decision-making before purchase, while use-by date reflects the reality of what customers receive after picking.
Where and how should it be surfaced?
So that it’s visible, understandable, and scalable across the product.
This reframed the problem from a UI task to a product decision about data, timing, and context.
Exploration
Early explorations focused on adding use-by information as a separate layer within Order Details, using highlighted rows and grouped sections to make dates easy to scan.
While this worked in isolation, it quickly introduced hierarchy and layout issues. Order Details already needed to support product categories such as fridge, freezer and cupboard, as well as different retailer structures. Adding another repeated section for use-by dates made the page harder to scan and introduced competing patterns.
From there, I explored whether the information could sit within the product card itself. One direction was to reuse existing product patterns from browsing, where shelf life was already displayed, and adapt that placement for use-by dates in Order Details. This kept the information closer to the item it related to and aligned with familiar patterns across the platform.
Working closely with engineering helped clarify the technical constraints and opportunities within the existing Order Details components. Together, we identified ways to integrate use-by dates without significantly changing the layout, leading me to explore approaches such as displaying the date within the card content, aligning it to the bottom of the product card, and overlaying it on the product image.
These explorations also needed to account for real-world scenarios, including missing data, substituted products, and how dates behave over time (for example, expiring today or already expired).
This shifted the work from simply making the date visible to finding a pattern that could sit naturally within the existing experience, support storage categories, and scale across different retailers, devices, and languages.
Designing the Solution
We aligned on surfacing use-by dates at item level, reflecting the actual lifespan of products after they had been picked.
The final direction introduced a simple badge, overlaid on the product image and positioned consistently so it could be easily scanned without disrupting existing content.
The design focused on clarity, placement and scalability. The badge needed to communicate when an item should be used while fitting naturally alongside existing product information.
Early iterations explored different ways of presenting the use-by date, including relative formats such as “Use by Thursday” to support quick scanning.
However, these explorations exposed a key challenge:
Variations in language length and date formats caused layout inconsistencies and overflow, particularly across different retailers and markets.
Exploration of date formats, placement patterns, and localisation considerations following design review feedback
In response, we explored more standardised approaches. Using an abbreviated label alongside a full date (e.g. EXP 22/05/26) ensured consistency across markets while fitting reliably within the constraints of the product card.
The final implementation balanced clarity, consistency and scalability while still clearly communicating key information to customers.
Bringing these decisions together resulted in a lightweight, scalable solution that surfaced previously hidden use-by information directly within the order details experience.
Final designs exploring the use-by date badge across desktop, mobile app and mobile web
Outcome and Impact
The feature was implemented in production, surfacing use-by dates directly within the customer experience and giving customers the same visibility after picking that they had while shopping.
This resulted in several improvements for both customers and the wider product experience:
Brought previously hidden post-pick use-by information into the core customer experience.
Improved visibility of product freshness after an order had been picked, helping customers make more informed decisions about substitutions and meal planning.
Established a scalable pattern for displaying freshness information across markets and future customer experiences.
Demonstrated how existing order details components could be extended to surface additional contextual information without significantly changing the underlying experience.
Reflections
The right information at the right time matters most
Improving visibility is not just about emphasis, but about ensuring the information itself is accurate, relevant, and shown at the right moment.
Where information lives is as important as whether it exists
Use-by dates were available in previous systems, but buried in receipts and not surfaced in OSP at all. Surfacing them in the core experience enabled customers to quickly understand product freshness, plan usage more effectively, and reduce the risk of waste.
Designing for real-world constraints shapes better solutions
Accounting for localisation, layout constraints, and existing patterns early helped ensure the solution could scale across different retailers and markets.