← Back/Grocery / Multi-Channel

Grocery Experience

Grocery apps treat every session like a first visit, even though 73% of items in a given cart are repeats, so the weekly restock, which should take two minutes, was being run through full catalogue browsing. In 2023, as Product Design Engineer, I analysed 5,000 orders, identified three distinct shopping modes (replenishment, exploration and urgent) and designed a multi-channel experience that recognises which one is happening.

RoleProduct Design Engineer
Year2023
Tags
GroceryDeliveryPickupUX
View on Dribbble
Grocery Experience
At a glance

74%

Less repeat purchase time

71%from 34%

Substitutions accepted

01The problem

Grocery apps forced repeat buyers through a full catalogue browse every session.

73% of items in a given cart are repeats, so the weekly restock should take two minutes. Habitual shoppers were instead browsing like a first-time visitor.

02How we thought about it

Grocery is mostly repetition, so the useful intelligence is memory, not discovery.

The apps were modelled on retail discovery, which assumes novelty. My analysis of 5,000 orders showed three distinct modes: replenishment, exploration and urgent. I treated them as separate design problems rather than one averaged experience.

03What we changed

  1. 01

    Recognised the mode before showing the catalogue

    The session opens around the likely intent, whether restock, browse or one urgent item. Someone who came to replenish no longer starts with a search.

  2. 02

    Turned the weekly shop into a confirmation

    Replenishment leads with what this household actually buys, and every line says why it is there. The shopper confirms rather than searches.

  3. 03

    Designed substitutions as first-class flows

    Stock-outs are where grocery trust is won or lost. Alternatives appear at the moment of unavailability, as a decision the shopper makes with context.

The trade-off

Prediction only proposes a draft basket and never places an order, because nothing should be bought on a guess.

04What it did

Reorder flow reduced repeat purchase time by 74%. Substitution acceptance rate increased from 34% to 71% with inline alternative suggestions.

How we knewEvidence

5,000 real orders set the design target before a screen was drawn.

Analytics

Quantitative

5,000

Orders analysed. The fact the product is built around: 73% of items in a cart are repeats.

Design judgement

Qualitative

3

Shopping modes identified from the orders: replenishment, exploration and urgent.

Analytics

Quantitative

34% → 71%

Substitution acceptance, with 74% less repeat purchase time.

Not yet tested

None

No usability test of the replenishment flow is recorded on this page.

DecisionsAnd why

What we saw, what we knew, what we chose, and what we gave up.

01

Design for three modes, not one averaged shopper

What we saw
Every session started from scratch, putting habitual buyers through a first-time browse.
Evidence
Analytics· Quantitative73% of items in a given cart are repeats across 5,000 orders.
So we
Replenishment as a confirmation flow, with exploration and urgency treated as separate problems.
Not
One catalogue-browse experience tuned for the average.
What happened
Repeat purchase time fell 74%.

02

Substitutions and stock-outs as first-class flows

What we saw
Grocery trust is won or lost when an item is not there.
Evidence
Design judgement· QualitativeThe unhappy paths were designed alongside the happy one.
So we
Inline alternative suggestions and real-time inventory states.
Not
A generic out-of-stock message.
What happened
Substitution acceptance rose from 34% to 71%.

User testingWhat was and was not tested

Evidence is quantitative (orders and outcomes). A moderated usability test is not recorded.

My role

Product Design Engineer

What I personally owned on this project.

  • 01Analysed 5,000 orders to identify the three shopping modes the product is built around
  • 02Designed the multi-channel model, delivery, pickup and in-store on one cart
  • 03Designed bag customisation, substitution handling and real-time inventory states
  • 04Designed the replenishment experience that turns the weekly shop into a confirmation flow
Made with
FigmaOrder-data analysisMulti-channel commercePrototype implementation
Next Project

Snaptek

© 2026 Alhasan HosniDesigned & Built with precision