- Client
- Atelier Nord
- Industry
- Retail
- Year
- 2023
- Duration
- 20 weeks
- Team
- 5 engineers, 2 designers
- Services
- Web platforms · Product design · Performance engineering
A furniture retailer with 900 European stores was losing two thirds of its mobile carts. We rebuilt the storefront edge-first, pulled stock onto its own stream, and moved conversion 23%.
The product
Rebuilt interface, live figures. Everything below is the shipped surface, not a concept.
Conversion
3.41%
p75 LCP
0.9s
Reserve fails
0.4%
Mobile checkout funnel · last 7 days
p75 LCP on mid-range Android, s
Live stock
The storefront was a 2016 monolith turning in a 4.7-second LCP on the mid-range Android that most of the traffic actually ran on. Stock was cached for six hours, so customers regularly reserved a sofa that had left the warehouse that morning and found out two days later by email. Mobile carried 71% of sessions and converted at under half the desktop rate. Every previous attempt at fixing it had been another A/B test on button copy.
We rebuilt the storefront edge-rendered with catalogue data cached at the CDN on a five-minute stale-while-revalidate, and pulled stock out into a separate streaming request behind a Suspense boundary so a slow inventory lookup can no longer hold the page hostage. Checkout went from five steps to two, with address, delivery slot and payment resolved on one screen — the delivery slot is where people were abandoning, and it needed to be visible before payment rather than after it. The whole thing shipped behind a 50/50 split in four markets for six weeks. Two of the changes we were most confident about did nothing measurable, so we cut them before the rollout.
Mobile LCP came in at 0.9s at p75 and checkout conversion rose 23% against the held-out control. Reserve-and-fail incidents dropped 88% once stock resolved live instead of from a six-hour cache. The design system that fell out of the work now covers the storefront, the in-store kiosk and the delivery tracking app — which was not in scope, and is the part the client brings up first.
Solid lines carry request traffic. Dashed lines are asynchronous — replication, shadow reads and audit trails that must never sit on the critical path.
export default async function ProductPage({ params }: Props) { const { sku } = await params const product = await catalogue.get(sku) return ( <ProductLayout product={product}> <Suspense fallback={<StockPlaceholder />}> <LiveStock sku={sku} /> </Suspense> </ProductLayout> )}The catalogue renders from the edge cache immediately; stock streams in behind a boundary, so a slow warehouse lookup costs a skeleton rather than the page.
Higher mobile checkout conversion against the held-out control
p75 Largest Contentful Paint on mid-range Android, down from 4.7s
Stores on one inventory-aware storefront, stock resolved live
Figures reported by Atelier Nord after launch.
- 01Edge-rendered catalogue with per-market cache segmentation
- 02Streaming inventory resolution decoupled from the page render
- 03Two-step checkout combining address, delivery slot and payment
- 04Six-week 50/50 split across four markets before full rollout
- 05Design system shared with the in-store kiosk and tracking app
- Next.js
- TypeScript
- Vercel Edge
- GraphQL
- Redis
- Playwright
“Twenty-three percent on checkout is a number our board understands. What I care about is that the site stopped promising stock we did not have.”