— Design walkthrough
01 — Express Checkout
Everything pre-filled — one decision left
The express checkout path lands logged-in users directly at a pre-filled review: contact, shipping, and payment all confirmed. The only input required is a delivery option selection. This gave returning customers a concrete reason to sign in rather than checking out as guest, which directly addressed the guest order backlog problem. The accordion structure makes all four steps visible at a glance, removing the "how many steps left?" anxiety that the old four-page flow created.
02 — Shipping Address
Grouped fields unlock reliable autofill
The old design used separate bordered inputs with labels only as placeholder text — a pattern that breaks browser autofill and forces mobile users to type every field. The redesign uses a single grouped card with persistent above-field labels. Browser autofill works reliably with this pattern, and the semantic label structure passes accessibility audits that the old design failed. Optional fields (apartment, company) are tucked behind expandable links to keep the initial form short without hiding functionality.
03 — Payment
Radio rows, network detection, no ambiguity
Payment options are selectable rows — a pattern users recognize from Stripe and Airbnb. Card fields expand in place; PayPal and Amazon Pay remain collapsed until chosen. As the card number is typed, the detected network logo updates inside the field in real time, reducing the "did I pick the right one?" confusion that causes hesitation at the highest-value moment in the flow. The same grouped card pattern used for address fields keeps the visual language consistent across all form steps.
04 — Inline Validation
The error points at exactly what's wrong — nothing else clears
The old checkout validated on page submission and frequently cleared entered data when errors were found. The redesign validates on blur: only the errored field gets a red border and label, while expiry and CVV stay intact. The error message is specific — "Please enter a valid card number" rather than a generic page-level alert. This pattern applies across the entire flow: each field validates independently so users never lose progress to correct a single mistake.
05 — Review & Place Order
Everything editable, no decision locked until the last tap
The review step collapses all prior decisions into compact rows with Edit links inline. No choice is final until the order button is pressed. Delivery options show specific arrival dates — never vague tiers like "2–3 business days" — which reduces the "when will it actually arrive?" call that was a common support ticket. The Place Order button shows the confirmed total inline so the final action carries no surprises about charges.
06 — Mobile
Summary tucked, CTA always within reach
On mobile, the order summary collapses behind a persistent toggle bar — the total is always visible without the product list consuming half the viewport. Completed steps collapse to single lines so the active step fills the screen with well-sized touch targets. The Continue button is sticky at the bottom regardless of keyboard state or scroll position, which addresses the single most common mobile checkout failure: the CTA scrolling out of reach when the keyboard opens.