kiosk checkout flow

A payment-ready checkout moment inside a tablet ordering journey built to feel calm, obvious, and recoverable in B2B environments.

I designed a tablet based payment experience for a shared B2B ordering kiosk, where checkout is a high-pressure moment (queues, shared device, hardware/network friction).

My focus was making payment feel calm, obvious, and recoverable including failure states (declines, retries, cancellations) as first-class flows.

I delivered a payment-ready checkout moment within the ordering journey: review → choose method → card-present instruction → success/failure recovery → operational handoff.

I aligned quickly with product and engineering on device constraints and key edge cases, audited the current flow for confusion and dead ends, and scanned comparable kiosk patterns for card-present, declines, and recovery.

Key insights:

Uncertainty—especially “Was I charged?”—drives drop-off, so users need instant reassurance and one obvious next step. Card-present screens must be quiet and signage-like, shared devices increase mistakes, and success still needs clear pickup guidance (receipt/QR).

Design principles derived from insights:

I focused on unmissable status (what’s happening / what to do / what’s next), one dominant action per step, and humane recovery with clear exits (retry, back, cancel).

role

UI Designer

timeframe

10 days

tools

Figma

problem

In a shared, queued kiosk context, payment is a high-stress moment where hardware and network friction can make failures feel unpredictable. Users worry about being double-charged after a decline, and too many choices or competing CTAs add hesitation when they just want the next step. Without clear card-present guidance, people stall at the reader, and even after success they often still don’t know what to do next in the real pickup flow.

solution

I designed the flow to feel calm and inevitable through a clear step-by-step rhythm and one dominant action per screen. A dedicated card-present instruction state keeps the UI quiet during the physical payment moment, while the failure state explicitly reassures “You weren’t charged” and offers safe exits. Payment methods are grouped under a single “Pay by card” choice to reduce decision load, and the success screen includes an operational checklist (receipt → QR → pickup) to bridge digital confirmation to real-world handoff.