Skip to main content
UI Coach Logo
Advanced

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.

Mobile, Kiosk4 hours plus

The brief

Understand the problem

Background

Scan and go can shorten checkout lines, but produce, age-restricted goods, duplicate scans, poor connectivity, and spot checks create high-friction exceptions.

User context

Darren shops after work with one hand on a basket. He wants to track his total, apply loyalty savings, and leave quickly, but one item has a damaged barcode.

Product problem

The experience must maintain an accurate basket and visible trust signals while providing humane recovery when an item cannot be scanned or requires staff review.

Objective

Design the core scan, basket correction, payment, and exit verification flow for a supermarket.

What to design

Define the experience

Required experience

  • Fast item scanning and feedback
  • Editable live basket
  • Payment and exit proof
  • Staff assistance state

Screens and states

  • Scanner
  • Basket
  • Exception resolution
  • Payment and digital receipt

Core user flow

Follow the critical path

  1. 01

    Darren starts an in-store session

  2. 02

    He scans packaged items and weighs produce

  3. 03

    He requests help for a damaged barcode

  4. 04

    He pays and presents a rotating exit code

Product rules

Requirements and constraints

Requirements

  • Confirm every successful scan using more than sound
  • Allow quantity changes and removals with clear audit history
  • Show discounts and running total
  • Handle staff approval without discarding the basket
  • Produce a verifiable receipt

Constraints

  • Store connectivity is inconsistent
  • Payment must not occur twice
  • The design must discourage accidental walkouts without treating shoppers as suspects

Reality check

States worth considering

Duplicate scan
Unknown barcode
Age-restricted product
Price differs from the shelf
Payment succeeds but confirmation is delayed

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.

Basket

  • Oat milk, 2 at $3.40
  • Loose bananas, 0.84 kg at $2.60 per kg
  • Sparkling water, loyalty price $4.90

Finish line

What to deliver

  • Five mobile screens or states
  • One kiosk or staff-assisted exception view

If you want more

Optional extensions

Add shared family baskets
Design a random verification check

Optional direction

Visual resources

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

Font pairing
CorbenNobile

Corben & Nobile

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

Icons
Illustrations

Keep practicing

Advanced
E-commerce

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
Interaction DesignError Handling
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
Intermediate
E-commerce

Hair Color Try On and Salon Brief

Design a camera preview that compares hair color options and turns a chosen look into a realistic salon consultation brief.

Mobile2 to 4 hours
Mobile DesignTrust and Safety
Intermediate
E-commerce

Nearby Deal Alerts

Create a local shopping alert that surfaces relevant offers without exposing precise location history.

Mobile1 to 2 hours
Mobile DesignTrust and Safety
Advanced
Transportation

EV Charging Session Failure Recovery

Design a charging recovery flow that diagnoses start, power, connector, account, and payment failures without stranding the driver.

Mobile2 to 4 hours
Error HandlingInteraction Design
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