Skip to main content
UI Coach Logo
Back to challenges
Hard

Grocery Shopper With Substitution Approval

Design a grocery delivery flow where a shopper follows a detailed list and receives timely decisions about unavailable items.

Mobile

The brief

Understand the problem

Background

A grocery list becomes a live collaboration when prices change, products sell out, produce quality varies, and the customer cannot respond immediately. Substitutions affect dietary safety and the final total.

User context

Amin orders weekly groceries for his household. His child has a peanut allergy, his budget is $95, and he will be in a meeting during part of the shopping window.

Product problem

The design must let Amin express item-level substitution rules before shopping and help the shopper act safely when a response is unavailable.

Objective

Create list setup, shopper assignment, live substitution approval, budget tracking, and delivery handoff.

What to design

Define the experience

Required experience

  • Detailed grocery list
  • Shopper assignment and progress
  • Substitution request
  • Delivery review

Screens and states

  • List builder
  • Shopping progress
  • Substitution decision
  • Budget summary
  • Delivery issue report

Core user flow

Follow the critical path

  1. 01

    Amin adds products and default rules

  2. 02

    A verified shopper begins the order

  3. 03

    An allergen-safe cereal is unavailable

  4. 04

    The shopper follows the no-substitution rule and completes delivery within budget

Product rules

Requirements and constraints

Requirements

  • Support exact item, flexible item, and no-substitution rules
  • Keep allergy notes prominent
  • Show price changes and running authorization total
  • Set a response deadline for live questions
  • Record shopper and customer decisions

Constraints

  • Inventory is known only in the store
  • The shopper has limited time
  • Fresh item quality is subjective
  • Payment authorization has a fixed buffer

Reality check

States worth considering

Customer does not respond
Every acceptable substitute is unavailable
Final total exceeds authorization
A delivered item is damaged
The shopper loses connectivity

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Shopping list

  • Oat cereal, exact brand, no peanut facility
  • Bananas, 6, slightly green
  • Tomatoes, up to $5, shopper may substitute
  • Current total: $82.40 of $95 budget

Finish line

What to deliver

  • Five mobile screens or states
  • An item-level substitution rule and decision component

If you want more

Optional extensions

Add recurring household lists
Design multi-store fulfillment

Optional direction

Visual resources

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

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
Font pairing
Open SansLibre Baskerville

Open Sans & Libre Baskerville

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

Icons
Illustrations