E-Commerce Redesign for Independent Fashion Retailer

The Challenge

Wren & Ivy is an independent UK fashion retailer with a loyal customer base built through social media and pop-up events. Their existing WooCommerce store was generating revenue, but at a fraction of its potential.

The problems were measurable:

6.8 second mobile page load — well above the 3-second threshold where 40% of users bounce
82% cart abandonment rate — industry average is 70%; their checkout was losing them nearly a third more sales than their competitors
No structured data — product pages weren't eligible for Google Shopping rich results
Inconsistent branding — the website looked nothing like their Instagram, creating trust friction at the point of purchase

Our Approach

Audit Phase (Week 1)

We ran a full diagnostic before writing a single line of code:

Lighthouse audit — Performance 28 / Accessibility 61 — well below acceptable thresholds
Heatmap analysis — revealed 73% of mobile users dropped off at the shipping cost disclosure step
SEO crawl — 140+ product pages with missing meta descriptions and no product schema
Checkout funnel analysis — the 5-step checkout was the primary abandonment driver

The audit gave us a clear hierarchy of impact. We prioritised checkout simplification and mobile performance above everything else.

Platform Decision

The client wanted to stay on a familiar CMS. We recommended migrating to a Next.js + Shopify headless architecture:

Shopify handles the commerce layer (inventory, payments, fulfilment) — where it excels
Next.js handles the frontend — delivering sub-2s load times and full design control

The migration took three days. All existing product data, customer accounts, and order history transferred without loss.

Design & Build (Weeks 2–6)

Checkout optimisation was the highest priority:

Collapsed the 5-step checkout to a single-page flow with inline validation
Added a persistent order summary visible throughout checkout
Introduced guest checkout — previously all users had to create an account
Surfaced shipping costs immediately on the product page (the #1 abandonment trigger)

Mobile performance:

Replaced all images with WebP, served via Next.js <Image> with responsive srcsets
Implemented font subsetting — reduced font payload from 340KB to 48KB
Eliminated render-blocking third-party scripts (moved analytics to server-side events)

SEO & structured data:

Product schema markup on every product page
BreadcrumbList and Organisation schema on hub pages
Auto-generated XML sitemap with changefreq and priority attributes
Canonical URLs standardised across all category and filter pages

QA & Migration (Weeks 7–8)

Full 301 redirect map from old Shopify URLs to new headless URLs
Playwright test suite covering add-to-cart, checkout, and account flows
Cross-browser QA: Chrome, Safari, Firefox, Edge — mobile and desktop
Staged launch: 10% traffic split for 48 hours before full cutover

Results (90-Day Post-Launch)

| Metric | Before | After | Change | |--------|--------|-------|--------| | Mobile page load | 6.8s | 1.9s | -72% | | Mobile conversion rate | 1.4% | 2.1% | +47% | | Cart abandonment | 82% | 61% | -26% | | Organic search traffic | Baseline | +38% | — | | Revenue per visitor | Baseline | +29% | — | | Lighthouse Performance | 28 | 91 | +225% |

The impact on organic traffic was faster than anticipated — Google re-indexed the updated pages within 12 days and the performance improvements were reflected in rankings within the first month.

What We Learned

Checkout friction is almost always the highest-ROI fix in e-commerce. Before investing in new traffic, it's worth calculating what you're leaving behind with your current visitors. In Wren & Ivy's case, the conversion rate improvement alone generated more additional monthly revenue than their entire social media ad spend.

Ready to improve your e-commerce performance? →