FORM Checkout Flow - Mobile

Try out the prototype here.

Design Rationale

Why mobile? Mobile accounts for the majority of e-commerce browsing, and premium furniture purchases increasingly begin on mobile even if they complete on desktop. Designing mobile-first ensures the highest-friction device is handled well; the layout can be translated cleanly to desktop.

Why 3 steps (not 1 or 5)? Research consistently shows that single-page checkouts create cognitive overload for high-value purchases. Users spending £3,000 want to review each decision before committing to the next. Three steps — Details, Delivery, Payment — mirrors the natural mental sequence: who I am → how it arrives → how I pay. Each screen has one job.

Why no account creation? Account creation is the leading cause of checkout abandonment. The FORM checkout uses email as the only identifier, with "No account needed" stated explicitly at the label level. If the brand wants account creation, it can be offered after the order is placed — not as a gate before it.

Why a text link for promo code? Visible promo code boxes cause users without a code to feel they're overpaying and search for discounts — often abandoning the cart to do so. A subtle text link ("Have a promotional code?") surfaces the feature for those who need it without creating anxiety for those who don't.

Why a persistent total on every screen? A £3,080 purchase requires constant anchoring. Removing the total after screen 1 creates uncertainty — users second-guess whether they've configured something correctly. The expandable "Order Summary £3,080 ↓" on screens 2–4 maintains the anchor without taking up space.

Why is the Borrow Limit error loop back to the failure point? Both error states (form validation and payment failure) return the user to exactly where they failed — not to screen 1. Forcing users to re-enter data they've already provided is a leading cause of abandonment after errors. The dashed red loops in the flow diagram make this explicit.

Why "Explore The Collection" and not "Continue Shopping"? The confirmation screen is the emotional high point of the purchase. "Continue shopping" sounds like a chore. "Explore The Collection" extends the brand feeling and opens a discovery mode — which is more likely to lead to repeat engagement.