Checkout

Video source missing

Commerce · Checkout

Checkout that guests can finish

I redesigned Maropost checkout so a cart can become an order without a forced account. Guest and returning paths, shipping, and payment sit within a single flow, with the order summary in view the whole way. Phase 1 launched.

Role
Lead UX Design
Platform
Maropost Commerce
Scope
Guest, address, delivery, pay
Outcome
Phase 1 launched

Shoppers stalled before they paid

Checkout is where a cart becomes an order. Guest and returning shoppers were stalling across login, address, delivery, and pay. Forced account creation and a wall of fields were doing more work than the payment step.

I owned the redesign as Lead UX Designer. I set the experience, mapped guest and returning paths, explored three low-fidelity directions and developed the selected approach into a high-fidelity design, and stayed with product and engineering until Phase 1 could ship.

The experience had to protect guest checkout, visible progress, clear back navigation, and express payment while remaining feasible for engineering.

What shipped

Three steps. Express pay. Order summary stays put.

Phase 1 launched with a three-step checkout, multiple payment methods, and digital-wallet options. Phase 2 and 3 are planned. They are not claimed as shipped.

Three directions on the same grid

I started with three low-fi concepts in the Maropost shell, each with a persistent order summary (items, discount code, $261 total) so critique compared structure, not chrome.

Idea 1

Stepper, then collapse

Customer details first – email, name, mobile, full delivery address – then Delivery Method with Standard, Priority, Express, and Pickup. Completed steps collapse with Edit.

Idea 2

Email first

Email and Continue. Shipping address, shipping method, and payment stay as collapsed headers until needed. Address search instead of a form wall.

Idea 3

Guest vs sign-up

Email first, then Sign up and Guest checkout as equal choices. Account creation is optional, not the door.

Three low-fi checkout concepts labelled Idea 1, Idea 2, and Idea 3, each with a persistent order summary
Low-fidelity · three directions Accordion-style steps, email-first progressive disclosure, and a guest vs sign-up fork. Critique picked three steps plus express, with the summary staying put.

What I adopted—and what I rejected.

I compared Shopify, BigCommerce, Amazon, and Kate Spade. The patterns that earned a place were visible progress, a sticky order summary, guest checkout, and express payment. What did not: copying another product’s chrome, or a one-page wall of fields.

Competitive checkout screenshots from Shopify, BigCommerce, Amazon, and Kate Spade
Competitive analysis Long-form (Shopify), modular edit blocks (BigCommerce), numbered dense review (Amazon), branded stepper (Kate Spade). The brief was the jobs, not a clone.

The flow had to handle failure—not only the happy path

I mapped the journey from the existing checkout to confirmed payment: logged in or guest, shipping required or not, saved vs new address, payment, and the error paths when a field, method, or card fails. Product and engineering walked that map before visual design.

Checkout user flow from Checkout now through confirmation, including guest vs returning and payment errors
Guest vs returning, with errors Missing fields, no shipping to the address, no payment methods, card failure, and a path back to a confirmation page. Pink is a stop. Green is paid.

Phase 1 is live. The rest is labelled.

Hi-fi followed internal critique with product, customer success, and other stakeholders against real checkout jobs. What changed: a cleaner guest and returning path, better address completion, visible progress, and clearer errors.

Phase 1 launched: three-step checkout, express pay, and more than one payment method. Phase 2 focuses on streamlining the flow and expanding payment options. Phase 3 includes a more comprehensive mobile optimisation pass. Nothing in Phase 2 or 3 is claimed as shipped.

High-fidelity Maropost checkout screens
High-fidelity · Phase 1 The visual system that shipped with the three-step flow. Order summary stays in view.