Sub Par: Grocery Swaps You Actually Approve
E-Commerce
Intermediate
2 hours
You order the weekly groceries. Somewhere in a store you will never see, an item is out of stock, and an algorithm (or a shopper in a hurry) makes a call for you. Oat milk becomes whole milk. The gluten-free bread becomes regular bread. You learn about it when the bags land on your doorstep, and now you own a fridge full of things you did not choose. The swap was never a decision. It was a surprise dressed up as a favor.
The brief: Design a grocery-delivery substitution flow that lets a customer approve, reject, or pre-decide every swap before it is final, without making them babysit their phone.
Who you're designing for: Marcus, 38, places the grocery order on his lunch break and is back in meetings by the time the shopper starts picking. His youngest has a dairy allergy, so a "close enough" swap is not close enough. He cannot watch a live chat for forty minutes, but he absolutely needs the wrong milk to never reach his door.
Constraints:
Every item carries a substitution rule the customer sets before checkout: exact match only, a specific fallback, "any brand is fine," or "refund, do not replace." No item ever jumps category on its own (dairy-free never becomes dairy).
When a live swap is proposed, the customer can approve or reject it in one tap. A visible countdown keeps the shopper moving, and if it runs out, the pre-set rule decides. The system never guesses silently.
Each proposed swap shows the price difference and the attributes that actually matter (allergens, size, brand) side by side with the original, not buried in a detail view.
Approve and reject are reachable one-handed, body text holds a contrast ratio of at least 4.5:1, and the swap alert reads through text or icon, never color alone (WCAG 1.4.1).
Bonus round: Add saved household rules, so allergens and non-negotiables are set once and applied to every future order automatically, no re-tapping each week.
What good looks like:
A stranger, glancing at their phone mid-meeting, can see a proposed swap, understand what changed, and approve or reject it in under ten seconds.
No allergen or dietary violation can slip through as a "reasonable" substitution.
The shopper is never left waiting on a silent customer, because a clear default rule always resolves the swap.
Suggested tools: Figma for the screens, ProtoPie for the live countdown and the approve/reject interaction, Stark for contrast and color-independent alerts, Maze to test how fast people can make the swap decision, and pen and paper first to settle the rules hierarchy before you style anything.
Brand vibes:
Instacart, for its live shopper chat and in-flight substitution approvals, the closest existing take on this exact problem.
Amazon Fresh, for how it lets you set substitution preferences at checkout instead of at the doorstep.
Walmart Grocery, for a high-volume, mainstream approach to swaps and refunds worth pressure-testing.
Felipe's tip:
A substitution the customer did not choose is a return they have not made yet. Design the swap as a decision, not a surprise.
Share it:
Built your substitution flow? Post it and tag flinbu, I read every one. Show me the pre-checkout rules, a live swap with its one-tap approve, and the allergy case that must never slip. This one shares DNA with Freeze It: Stolen-Card Panic, another fast, high-stakes decision built for a real moment. Keep the swap legible under time pressure the way cognitive accessibility demands, and for accessibility shipped in production see the EqualWeb accessibility widget case study. #FlinbuChallenge #ECommerce #UXDesign