Skip to main content
UI Coach Logo
Intermediate

Time-Sensitive Grocery Substitution Approval

Design a shopper-to-customer approval flow for unavailable groceries with price, quantity, dietary, and response-window context.

Mobile1 to 2 hours

The brief

Understand the problem

Background

A grocery shopper may discover an unavailable item only minutes before checkout. Customers need enough information to approve a replacement, while shoppers cannot wait indefinitely or make unsafe dietary assumptions.

User context

Renee ordered lactose-free milk and a 500 gram cereal box. Her shopper finds a different milk brand and only a larger cereal size, with twelve minutes left before checkout.

Product problem

Renee needs to evaluate replacements quickly, and the shopper needs a clear fallback when she does not respond.

Objective

Create substitution preferences, item comparison, timed approval, and final review for an active grocery shop.

What to design

Define the experience

Required experience

  • Set per-item replace, refund, or contact preferences
  • Receive a time-bound substitution request
  • Compare original and proposed product details
  • Approve, decline, or rely on a clearly stated fallback

Screens and states

  • Order substitution preferences
  • Live substitution request
  • Product comparison
  • Final substituted order review

Core user flow

Follow the critical path

  1. 01

    Renee receives a request for the milk and cereal

  2. 02

    She confirms the milk after comparing ingredients and unit price

  3. 03

    She declines the larger cereal because it exceeds her item limit

  4. 04

    The shopper refunds the cereal and checks out with a documented change summary

Product rules

Requirements and constraints

Requirements

  • Show original and proposed size, quantity, price, unit price, and product evidence
  • Carry dietary settings forward without asserting safety
  • Display the response deadline and exact no-response fallback
  • Allow customers to preapprove bounded price or brand changes
  • Keep shopper and customer decisions in the order history

Constraints

  • The proposed replacement can sell out during review
  • Product catalog data may be incomplete
  • A shopper cannot override a customer allergy restriction

Reality check

States worth considering

The customer is offline
The replacement weight changes the final price
The approved replacement becomes unavailable
An ingredient list has changed
Several requests arrive at once

Finish line

What to deliver

  • Four mobile screens covering approval and refund outcomes
  • A comparison card for size, unit price, dietary evidence, and response timing

If you want more

Optional extensions

Add household-level substitution rules
Design a shopper view for batched customer requests

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
LatoMerriweather

Lato & Merriweather

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Food and dining

Review a Recurring Grocery Order

Design a weekly grocery routine that lets a household confirm quantities, substitution rules, budget, and delivery timing.

Mobile4 hours plus
Mobile DesignService Design
Intermediate
Food and dining

Interruption-Friendly Cooking Mode

Design a hands-busy recipe mode that preserves progress across interruptions, parallel timers, substitutions, and device changes.

Mobile1 to 2 hours
Interaction DesignMobile Design
Intermediate
Food and dining

Restaurant Group Order and Bill Split

Design a shared restaurant order that coordinates individual choices, dietary notes, deadlines, totals, and payment failures.

Mobile2 to 4 hours
Mobile DesignInteraction Design
Intermediate
Food and dining

Choose a Restaurant Table

Design a reservation flow that lets diners understand a restaurant floor plan and request a suitable available table.

Mobile2 to 4 hours
Interaction DesignAccessibility
Intermediate
Food and dining

Order Ahead for Table Service

Design a mobile ordering flow that lets diners schedule food to be ready when they arrive at a restaurant.

Mobile2 to 4 hours
Interaction DesignForms
Advanced
Food and dining

Choose Your Restaurant Table

Design a reservation flow that lets diners request a specific available table or seating zone.

Mobile2 to 4 hours
AccessibilityInteraction Design