Retail

Maison Ardent

A headless replatform that made speed the brand feature

Industry: Luxury retail
Engagement: Design system + build
Team: 5 specialists
Duration: 16 weeks

The problem

Maison Ardent's themed storefront took over six seconds to render product pages on mobile. Every campaign needed developer time, and the brand team had run out of patience.

6.2s largest contentful paint on mid-range mobile devices
Campaign landing pages took two weeks of developer effort each
Twelve conflicting button styles across the storefront
Checkout abandonment 19 points above the category benchmark

Our approach

Next.js · Shopify · Vercel

Design system first

We built a tokenised component library with the brand team before touching templates, retiring the twelve button variants down to three.

Headless with Shopify retained

Commerce, inventory and payments stayed on Shopify while the storefront moved to Next.js, keeping operational tooling the merchandising team already knew.

Composable campaign pages

Marketing assembles pages from approved blocks in the CMS, so a new drop goes live in an afternoon without a deploy.

A performance budget with teeth

Image policy, route-level budgets and a CI check that fails the build when LCP regresses beyond the agreed threshold.

Timeline

Audit & design system
Weeks 1-5
Performance audit, component inventory, tokens and a documented library in Storybook.
Storefront build
Weeks 6-11
Catalogue, product detail, search and cart on Next.js with Shopify as the commerce backend.
Campaign tooling
Weeks 12-14
CMS block library, preview workflow and editor training for the brand team.
Launch & tuning
Weeks 15-16
Phased traffic cutover, A/B validation on checkout and post-launch performance tuning.

Results

1.4s: Median largest contentful paint on mobile
+34%: Increase in conversion rate
1 day: Campaign page turnaround, down from 2 weeks
-22%: Checkout abandonment

Marketing ships campaigns without engineering involvement
One documented design system across storefront and email
Performance regressions caught in CI instead of by customers

“Our team launches a drop in an afternoon now. The site finally feels as considered as the product.”

Élise MarchandBrand Director, Maison Ardent

More case studies

Start a project like this

WordPress editorial dashboard and magazine website on a laptop

Publishing

Apex Magazine

A headless WordPress rebuild for a 40-author editorial desk

Fintech

Northwind Treasury

From 60 spreadsheets to a realtime cash-position platform

Health

Pulseform

An offline-first care companion for two app stores, one codebase

The problem

Maison Ardent's themed storefront took over six seconds to render product pages on mobile. Every campaign needed developer time, and the brand team had run out of patience.

6.2s largest contentful paint on mid-range mobile devices
Campaign landing pages took two weeks of developer effort each
Twelve conflicting button styles across the storefront
Checkout abandonment 19 points above the category benchmark

Timeline

Audit & design system

Weeks 1-5

Performance audit, component inventory, tokens and a documented library in Storybook.

Storefront build

Weeks 6-11

Catalogue, product detail, search and cart on Next.js with Shopify as the commerce backend.

Campaign tooling

Weeks 12-14

CMS block library, preview workflow and editor training for the brand team.

Launch & tuning

Weeks 15-16

Phased traffic cutover, A/B validation on checkout and post-launch performance tuning.

Results

1.4s

Median largest contentful paint on mobile

+34%

Increase in conversion rate

1 day

Campaign page turnaround, down from 2 weeks

-22%

Checkout abandonment

Marketing ships campaigns without engineering involvement
One documented design system across storefront and email
Performance regressions caught in CI instead of by customers

“Our team launches a drop in an afternoon now. The site finally feels as considered as the product.”

Élise MarchandBrand Director, Maison Ardent