Skip to main content
UI Coach Logo
Advanced

Grocery Shopper With Substitution Approval

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

Mobile4 hours plus

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.

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

Keep practicing

Advanced
E-commerce

Outfit Planning With Tailor Handoff

Design a styling tool that helps someone explore outfits for an occasion, request useful feedback, and prepare alterations for a local tailor.

Mobile4 hours plus
Trust and SafetyInteraction Design
Advanced
E-commerce

Scan and Go Grocery Checkout

Design an in-store checkout flow where shoppers scan items as they shop, resolve mistakes, and pay without a staffed register.

Mobile4 hours plus
Interaction DesignError Handling
Intermediate
E-commerce

Schedule a Recurring Gift Delivery

Design a gift subscription that helps someone choose occasions, recipients, budget rules, and approval before each delivery.

Mobile2 to 4 hours
Service DesignForms
Advanced
E-commerce

Neighborhood Group Purchase

Design a collective order flow that unlocks a better unit price when enough local buyers commit.

Responsive web2 to 4 hours
Product ThinkingForms
Advanced
E-commerce

Occasion Gift and Flower Delivery

Design a gift-ordering flow that handles recipient details, delivery timing, substitutions, and a private message.

Responsive web2 to 4 hours
FormsService Design
Advanced
E-commerce

Product Authenticity Evidence Check

Design a mobile flow that helps secondhand shoppers inspect authenticity signals without promising a definitive verdict.

Mobile2 to 4 hours
Trust and SafetyContent Design