Hem — Awwwards Minimalism
96 KB Hero · 1.4s LCP
The Challenge
Hem is a Scandinavian premium furniture brand from Stockholm. Their previous storefront was a generic Shopify theme — beautiful products buried under heavy banner stacks, slider carousels, popup overlays, and a 1.8 MB hero page.
Brand felt premium offline but average online. Mobile LCP hit 3.2s. Bounce rate sat at 67% on mobile — the digital experience was working against the brand promise.
No design awards or press mentions for the digital experience. The brief: digital must feel as considered as the products.
- Heavy hero — 1.8 MB, 3.2s mobile LCP
- Stock Shopify theme — zero brand differentiation
- 4 banner stacks on homepage = analysis paralysis
- No type-driven design — product photos doing all the work
- Bounce rate 67% mobile, 41% desktop
- Zero design awards or press mentions
Complete Engineering & Design Scope
From discovery to post-launch care — every workstream we ran, with concrete deliverables. This wasn’t a redesign — it was a full-stack rebuild with custom design, headless commerce, payments, search, and analytics.
Discovery & Research
12 Awwwards-winning furniture sites audited. Brand photography library reviewed (4,200 images). Existing GA + Hotjar data analyzed (6 months).
UX / Information Architecture
Sitemap restructured around designer collections (not product categories). Faceted navigation simplified from 14 filters to 6. URL taxonomy refactored — preserves backlinks via 301 map.
Custom Design Implementation
Figma library built from scratch — 84 components, 6-size type scale, motion grammar. Built design system in Storybook. Variable font subsetted to 12 KB.
Custom Product Card Engineering
Bespoke product card built from client mockups — 18 custom fields: designer attribution, material swatches preview, environmental certifications (FSC / OEKO-TEX), modular configuration matrix, in-room visualization, lead-time badge, sample-request flow, B2B trade pricing toggle.
Semantic Core & SEO
1,200 keywords clustered into intent groups. Schema markup: Product + ImageObject + Designer (custom). Hreflang for 6 markets. llms.txt published.
Headless Shopify Storefront
Hydrogen 2024 + Remix. Edge SSR via Cloudflare Workers. ISR catalog pages (60s revalidate).
Performance Engineering
Strict 100 KB hero budget. Critical CSS inline. WebP + AVIF auto-serve. PostHog event taxonomy.
Payment Gateway Integration
Shop Pay, Apple Pay, Google Pay, Klarna (BNPL EU/US), Stripe Radar fraud signals.
Content Migration
240+ products + 38 designer profiles migrated. URL preservation via 301 redirect map. Existing schema markup preserved.
Accessibility & Testing
WCAG 2.2 AA conformance. Screen reader QA (NVDA + VoiceOver). Keyboard navigation full coverage.
Post-Launch Care
30-day hypercare. Weekly performance reports. Awwwards submission prepared. Training session with brand team.
Design System Built from Client Mockups
Client provided directional Figma mockups. We translated those into a production design system — tokens, components, motion grammar, documented in Storybook. Brand consistency end-to-end.
How We Solved It
Performance Budget
Strict 100 KB hero target. Variable font subset (12 KB). Cloudflare Workers edge SSR. Single critical-path CSS file.
Type-Driven Design System
Custom Söhne Variable subset. 6-size type scale on 1.250 ratio. Typography as primary navigation — no decorative chrome.
Motion Grammar
GSAP ScrollTrigger micro-animations. Lottie product hover states. Reduced-motion respect by default.
Headless Migration
Shopify Storefront API + Algolia search. 240+ products migrated with URL preservation and 301 redirect map.
Awwwards Submission
Soft launch · A/B test · full cutover · Awwwards SOTD submission at week 16. Press kit prepared for It’s Nice That and Sidebar.io.
Our Implementation
tailwind.config.ts
// WebCoreLab — Hem type-scale design tokens
// Strict 1.250 ratio · 6 sizes · 1 axis variable font
export default {
theme: {
fontFamily: { sans: ['Söhne Variable', 'system-ui'] },
fontSize: {
'micro': ['11px', { lineHeight: '1.4', letterSpacing: '.08em' }],
'small': ['13.75px', { lineHeight: '1.5' }],
'body': ['16.5px', { lineHeight: '1.65' }],
'lead': ['20.6px', { lineHeight: '1.5' }],
'display': ['41.3px', { lineHeight: '1.1', letterSpacing: '-.02em' }],
'hero': ['82.5px', { lineHeight: '1.02', letterSpacing: '-.03em' }],
},
extend: {
animation: {
'fade-up': 'fadeUp 800ms cubic-bezier(.16,1,.3,1)',
}
}
}
};
// Result: 96 KB hero page · Awwwards SOTD nomination week 16
Third-Party Services & APIs
Payment gateways, analytics, email automation, reviews, search, fraud, helpdesk — all integrated, monitored, documented. No leaky data, no orphan tools.
Payments
- Shop Pay
- Apple Pay
- Google Pay
- Klarna BNPL
- Stripe Radar
Analytics
- GA4 + GTM
- PostHog (event taxonomy)
- Hotjar (heatmaps)
Email & CRM
- Klaviyo (post-purchase + abandoned cart)
- HubSpot (B2B inquiries)
Search & Discovery
- Algolia (federated search + AI rerank)
Reviews
- Yotpo (product reviews + UGC)
Shipping
- Shippo (multi-carrier rates)
- EasyPost (label generation)
Asset Management
- Cloudflare Images (WebP/AVIF auto-serve)
Measurable Impact
Measured 90 days after full deployment
“WebCoreLab matched the digital experience to our product design philosophy. The Awwwards nomination came faster than we expected — but the real win is that visitors stay 180% longer and our team is finally proud to share the URL.”
— Brand Director, Premium Furniture House (NDA)
What the Client Received
Concrete artifacts the client now owns and runs. Each project ships with full documentation, training, and a 30-day hypercare window.