Skip to main content
UI Coach Logo
Back to challenges
Hard

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, Kiosk

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.

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
Font pairing
CorbenNobile

Corben & Nobile

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

Icons
Illustrations