Design
Designing Checkout When the Platform Stops Deciding for You
Headless commerce is usually pitched as an engineering story: decouple the frontend, ship faster, escape the template. All true. But there is a product design story hiding inside it that nobody warned us about. When the platform stops rendering your checkout, the platform also stops making a hundred small decisions that, it turns out, were doing a lot of quiet work.
We have spent much of this year rebuilding Northwind's purchase flow on a headless stack, and the education has been humbling. Here is what we learned about designing the most consequential screens in commerce once the training wheels come off.
The template was smarter than we thought
Platform-rendered checkouts are generic, and generic is why teams go headless. But generic encodes a decade of aggregate learning: field order, error handling, address autocomplete behavior, the exact moment shipping costs appear. Throw out the template and you throw out the learning, unless you deliberately carry it across.
Our first headless checkout prototype was beautiful and converted worse than the template it replaced. The autopsy found nothing dramatic, just a dozen small regressions. Wallet buttons below the fold. Discount code field too prominent, sending shoppers off-site to hunt for coupons. Phone number required with no explanation of why. Each decision defensible in a design review, collectively a leaky bucket.
The lesson we now apply everywhere: in checkout, innovate on brand expression and clarity, and be ruthlessly conventional about mechanics. Nobody has ever abandoned a cart because the flow felt too familiar.
What headless actually buys the design
Once we respected the conventions, the freedom started paying for itself in places templates could never go:
- A cart that sells. The slide-over cart became a real surface: intelligent bundling, delivery estimates pulled live from the OMS, and gift options presented at the moment of relevance rather than buried at the end.
- Contextual continuity. Because the frontend owns state, checkout can remember and reflect where you came from. A shopper arriving from the gift guide sees gifting defaults. This sounds small. Watch session recordings and it is not.
- Performance as design material. Sub-second transitions between checkout steps change how the flow feels in a way no visual polish can. Speed is the most underrated trust signal in commerce.
- Real experimentation. We can now test structural hypotheses, single page versus stepped, order of shipping and payment, instead of only button colors.
The accountability shift
Here is the cultural change teams should brace for. On a templated platform, when checkout underperforms, the platform is the alibi. Headless removes the alibi. Every conversion basis point now traces to a decision someone in your building made, which is terrifying and clarifying in equal measure.
Practically, this means the design team needs instrumentation literacy it could previously outsource. Funnel analytics, field-level drop-off, error rate monitoring: these are now design tools, as core to the craft as the type scale. A checkout designer who cannot read the funnel is driving with the windshield painted over.
Holiday-proofing, since it is that season
We are writing this in late September, which means every commerce team is staring down Q4. If you are on a headless stack heading into your first holiday peak: freeze structural checkout changes by late October, load-test the third-party services your beautiful custom flow now depends on, and rehearse the failure states. A payment provider timeout at 11pm on Black Friday is not the moment to discover your error message says "something went wrong" in light gray text.
The template would have handled that for you. That is the deal you made. It is a good deal, but only if you hold up your end.
Building something this could apply to?
We take on a small number of flagship projects each quarter.
Start a project