Revamping Laithwaites Homepages: A Modular Design System for Efficiency and Impact
Wine
E-Commerce
Design Systems
Product Design
Headless CMS
Web
Company
Laithwaites is a leading direct‑to‑consumer wine retailer operating in the UK, US and APAC, with 17 transactional sites and 700 k+ customers.
Team
Head of Digital Product
Digital Product Design Lead
Senior Product Designer (Me)
UX Designer
Digital Design Team
Delivery Lead
Skills / My role
I collaborated on UX research and managed visual direction, design-system components for responsive UI.
Challenge / Opportunity
Four high-traffic brand homepages. One under-resourced team. We needed a modular system that could scale fast, cut design time, boost engagement, and hand control to non-designers using a headless CMS (Contentful).
Results
-11.5%
Bounce Rate
+2.5%
Revenue Up
7.4%
AOV Increase
*Faster brand updates with reduced design bottlenecks
Results measured over a 19 day period post launch.
“How might we transform four fragmented homepages into a scalable system—cutting duplication, boosting engagement, and empowering a small team to deliver at speed without sacrificing brand or quality?”
Define the Problem
Examples of fragmented homepage user experience captured over time from The Internet Archive.
I wasn't involved in the initial UX research, but worked closely with our UX designer throughout. They led discovery using the Baymard platform, heatmap analysis, competitor audits, and lightweight user testing on image preferences. Their findings were synthesised into a wireframe that became the foundation of the experience.
Once the design moved into the UI phase, I surfaced and solved several UX issues that hadn't been caught earlier—related to hierarchy, content scanning, and layout rhythm. I then translated the final ideas into developer-ready UI, built the modular system in Figma, enabled the team to use it, and worked with the delivery manager to ensure components were implemented properly in the headless CMS (Contentful).
Lay the Foundations
Analysing competitopr north star homepages
Insights became structure. While the UX designer audited competitors to inform our structural decisions, I explored reference sites like The White Company, Rose & Gray, and John Lewis—brands with stronger design principles, modern aesthetics, and a clear focus on product. These references inspired a cleaner hierarchy, sharper visual pacing, and a layout style we could improve upon. Together, these inputs shaped the wireframes into a foundation for scalable, component-driven design.
Build the System
I created a responsive Figma library—banners, content blocks, layouts—all designed for reuse. The system made it easy to build fast, remain consistent, and support both product-first and editorial campaigns. I based component rules on visual hierarchy and flexibility, so content editors could adapt layouts without developer help.
A selection of foundational homepage components used in the system.
Scale Across Brands
Next, I adapted the system for four brands—then expanded it to support 17. At the time, we hadn’t implemented design tokens for brand modes, so I used component variants to handle visual differences. This worked well in the short term and laid the groundwork for a scalable token-driven approach, which I later documented in the Vine design system project.
Homepage components laid out as pages in UK brand skews, these pages where the reference for developers to create Headless CMS templates for non designers to fill with content.
Align the Stakeholders
The digital design team had mainly used Figma as a graphic tool, with limited exposure to component-based workflows. I helped bridge that gap—training them on how to use the modular system I built, and guiding them in assembling pages confidently using reusable components. Over time, stakeholders began signing off homepage designs directly in Figma, and the team gained confidence in building, iterating, and scaling within the system. Designers became faster, more independent, and far less reliant on constant support.
A selection of design resources I used to train the digital product team on how to effectively use Figma components and properties to enable the power of the system to design pages.
Enable the Team
Because the homepage was such a visible, high-stakes part of the business, it became a true design-by-committee project. I worked through multiple rounds of feedback, versions, and approvals to find the right balance. I created static frame boards for approval—clear, visual checkpoints that helped align feedback from across the business without slowing momentum.
Working through multiple variations of the same page to generate ideas for stakeholder approval.
Ship with Confidence
I worked with the delivery lead to make sure everything was buildable. His dev team picked up clean, CMS-ready components. We launched without delay
On the left a screenshot of the original Figma design vs a recently screenhot from the Laithwaites site.
Results
Bounce Rate
-11.5%
Revenue Up
+2.5%
AOV Increase
7.4%
*Faster brand updates with reduced design bottlenecks
The CRO team measured performance over a 19-day period post-launch. Early results validated our design direction—modular layouts, visual hierarchy, and strong trust signals drove noticeable improvements in engagement and revenue.
Since launch, performance has remained stable across weekly campaigns. Content teams now build directly in the CMS with minimal design or development support, proving the system’s scalability and lasting value.
Browse the work
Kind words from clients & co-workers
“Jim is an absolute powerhouse and a quiet leader. He brings sharp, structured thinking to every challenge, asks the right questions—often before anyone else—and tackles problems calmly and proactively. More than just a designer, he’s a strategic partner, a mentor, and the driving force behind our design system. He goes above and beyond his role, solving complex issues across design, tech, and business. Since joining, he’s completely transformed the way we work.”
Alexandra Constantin
Digital Product Design Lead, Laithwaites
Revamping Laithwaites Homepages: A Modular Design System for Efficiency and Impact
Wine
E-Commerce
Design Systems
Product Design
Headless CMS
Web
Results
-11.5%
Bounce Rate
+2.5%
Revenue Up
7.4%
AOV Increase
*Faster brand updates with reduced design bottlenecks
Results measured over a 19 day period post launch.
“How might we transform four fragmented homepages into a scalable system—cutting duplication, boosting engagement, and empowering a small team to deliver at speed without sacrificing brand or quality?”
Process
- Discovery & Audit
- Lay the Foundations
- Build the System
- Scale Across Brands
- Stakeholder Presentation & Approval
- Enable the team
- Ship with Confidence
Define the Problem
I wasn't involved in the initial UX research, but worked closely with our UX designer throughout. They led discovery using the Baymard platform, heatmap analysis, competitor audits, and lightweight user testing on image preferences. Their findings were synthesised into a wireframe that became the foundation of the experience.
Once the design moved into the UI phase, I surfaced and solved several UX issues that hadn't been caught earlier—related to hierarchy, content scanning, and layout rhythm. I then translated the final ideas into developer-ready UI, built the modular system in Figma, enabled the team to use it, and worked with the delivery manager to ensure components were implemented properly in the headless CMS (Contentful).
Examples of fragmented homepage user experience captured over time from The Internet Archive.
Lay the Foundations
Insights became structure. While the UX designer audited competitors to inform our structural decisions, I explored reference sites like The White Company, Rose & Gray, and John Lewis—brands with stronger design principles, modern aesthetics, and a clear focus on product. These references inspired a cleaner hierarchy, sharper visual pacing, and a layout style we could improve upon. Together, these inputs shaped the wireframes into a foundation for scalable, component-driven design.
Analysing competitopr north star homepages
Build the System
I created a responsive Figma library—banners, content blocks, layouts—all designed for reuse. The system made it easy to build fast, remain consistent, and support both product-first and editorial campaigns. I based component rules on visual hierarchy and flexibility, so content editors could adapt layouts without developer help.
A selection of foundational homepage components used in the system.
Scale Across Brands
Next, I adapted the system for four brands—then expanded it to support 17. At the time, we hadn’t implemented design tokens for brand modes, so I used component variants to handle visual differences. This worked well in the short term and laid the groundwork for a scalable token-driven approach, which I later documented in the Vine design system project.
Homepage components laid out as pages in UK brand skews, these pages where the reference for developers to create Headless CMS templates for non designers to fill with content.
Align the Stakeholders
The digital design team had mainly used Figma as a graphic tool, with limited exposure to component-based workflows. I helped bridge that gap—training them on how to use the modular system I built, and guiding them in assembling pages confidently using reusable components. Over time, stakeholders began signing off homepage designs directly in Figma, and the team gained confidence in building, iterating, and scaling within the system. Designers became faster, more independent, and far less reliant on constant support.
A selection of design resources I used to train the digital product team on how to effectively use Figma components and properties to enable the power of the system to design pages.
Enable the Team
Because the homepage was such a visible, high-stakes part of the business, it became a true design-by-committee project. I worked through multiple rounds of feedback, versions, and approvals to find the right balance. I created static frame boards for approval—clear, visual checkpoints that helped align feedback from across the business without slowing momentum.
Working through multiple variations of the same page to generate ideas for stakeholder approval.
Ship with Confidence
I worked with the delivery lead to make sure everything was buildable. His dev team picked up clean, CMS-ready components. We launched without delay
On the left a screenshot of the original Figma design vs a recently screenhot from the Laithwaites site.
Results
Bounce Rate
-11.5%
Revenue Up
+2.5%
AOV Increase
7.4%
*Faster brand updates with reduced design bottlenecks
The CRO team measured performance over a 19-day period post-launch. Early results validated our design direction—modular layouts, visual hierarchy, and strong trust signals drove noticeable improvements in engagement and revenue.
Since launch, performance has remained stable across weekly campaigns. Content teams now build directly in the CMS with minimal design or development support, proving the system’s scalability and lasting value.
Browse the work
Kind words from clients & co-workers
“Jim is an absolute powerhouse and a quiet leader. He brings sharp, structured thinking to every challenge, asks the right questions—often before anyone else—and tackles problems calmly and proactively. More than just a designer, he’s a strategic partner, a mentor, and the driving force behind our design system. He goes above and beyond his role, solving complex issues across design, tech, and business. Since joining, he’s completely transformed the way we work.”
Alexandra Constantin
Digital Product Design Lead, Laithwaites
Revamping Laithwaites Homepages: A Modular Design System for Efficiency and Impact
Wine
E-Commerce
Design Systems
Product Design
Headless CMS
Web
Company
Laithwaites is a leading direct‑to‑consumer wine retailer operating in the UK, US and APAC, with 17 transactional sites and 700 k+ customers.
Team
Head of Digital Product
Digital Product Design Lead
Senior Product Designer (Me)
UX Designer
Digital Design Team
Delivery Lead
Skills / My role
I collaborated on UX research and managed visual direction, design-system components for responsive UI.
Challenge / Opportunity
Four high-traffic brand homepages. One under-resourced team. We needed a modular system that could scale fast, cut design time, boost engagement, and hand control to non-designers using a headless CMS (Contentful).
Results
-11.5%
Bounce Rate
+2.5%
Revenue Up
7.4%
AOV Increase
*Faster brand updates with reduced design bottlenecks
Results measured over a 19 day period post launch.
Challenge
Our digital design team—great at campaign pages—was suddenly responsible for homepage rebuilds. Each project was bespoke, slow to deliver, and hard to maintain.
To fix that, they brought in the product design team, which I was part of. Our brief went beyond just efficiency—we needed to clarify the product offering, drive engagement, and establish brand consistency across four brands and three regions. The solution had to scale to 17+ brands and work seamlessly in a headless CMS (Contentful), which the company had purchased but had not yet properly implemented. Another key aim of this project was to prove its value.
“How might we transform four fragmented homepages into a scalable system—cutting duplication, boosting engagement, and empowering a small team to deliver at speed without sacrificing brand or quality?”
Define the Problem
I wasn't involved in the initial UX research, but worked closely with our UX designer throughout. They led discovery using the Baymard platform, heatmap analysis, competitor audits, and lightweight user testing on image preferences. Their findings were synthesised into a wireframe that became the foundation of the experience.
Once the design moved into the UI phase, I surfaced and solved several UX issues that hadn't been caught earlier—related to hierarchy, content scanning, and layout rhythm. I then translated the final ideas into developer-ready UI, built the modular system in Figma, enabled the team to use it, and worked with the delivery manager to ensure components were implemented properly in the headless CMS (Contentful).
Examples of fragmented homepage user experience captured over time from The Internet Archive.
Lay the Foundations
Insights became structure. While the UX designer audited competitors to inform our structural decisions, I explored reference sites like The White Company, Rose & Gray, and John Lewis—brands with stronger design principles, modern aesthetics, and a clear focus on product. These references inspired a cleaner hierarchy, sharper visual pacing, and a layout style we could improve upon. Together, these inputs shaped the wireframes into a foundation for scalable, component-driven design.
Analysing north star competitor homepages looking for UI trends.
Build the System
I created a responsive Figma library—banners, content blocks, layouts—all designed for reuse. The system made it easy to build fast, remain consistent, and support both product-first and editorial campaigns. I based component rules on visual hierarchy and flexibility, so content editors could adapt layouts without developer help.
A selection of foundational homepage components used in the system.
Scale Across Brands
Next, I adapted the system for four brands—then expanded it to support 17. At the time, we hadn’t implemented design tokens for brand modes, so I used component variants to handle visual differences. This worked well in the short term and laid the groundwork for a scalable token-driven approach, which I later documented in the Vine design system project.
Homepage components laid out as pages in UK brand skews, these pages where the reference for developers to create Headless CMS templates for non designers to fill with content.
Align the Stakeholders
Because the homepage was such a visible, high-stakes part of the business, it became a true design-by-committee project. I worked through multiple rounds of feedback, versions, and approvals to find the right balance. I created static frame boards for approval—clear, visual checkpoints that helped align feedback from across the business without slowing momentum.
Working through multiple variations of the same page to generate ideas for stakeholder approval.
Enable the Team
The digital design team had mainly used Figma as a graphic tool, with limited exposure to component-based workflows. I helped bridge that gap—training them on how to use the modular system I built, and guiding them in assembling pages confidently using reusable components. Over time, stakeholders began signing off homepage designs directly in Figma, and the team gained confidence in building, iterating, and scaling within the system. Designers became faster, more independent, and far less reliant on constant support.
A selection of design resources I used to train the digital product team on how to effectively use Figma components and properties to enable the power of the system to design pages.
Ship with Confidence
I worked with the delivery lead to make sure everything was buildable. His dev team picked up clean, CMS-ready components. We launched without delay
On the left a screenshot of the original Figma design vs a recently screenshot from the Laithwaites site.
Results
Bounce Rate
-11.5%
Revenue Up
+2.5%
AOV Increase
7.4%
*Faster brand updates with reduced design bottlenecks
The CRO team measured performance over a 19-day period post-launch. Early results validated our design direction—modular layouts, visual hierarchy, and strong trust signals drove noticeable improvements in engagement and revenue.
Since launch, performance has remained stable across weekly campaigns. Content teams now build directly in the CMS with minimal design or development support, proving the system’s scalability and lasting value.
Browse the work
Kind words from clients & co-workers
Alexandra Constantin
Digital Product Design Lead, Laithwaites
“Jim is an absolute powerhouse and a quiet leader. He brings sharp, structured thinking to every challenge, asks the right questions—often before anyone else—and tackles problems calmly and proactively. More than just a designer, he’s a strategic partner, a mentor, and the driving force behind our design system. He goes above and beyond his role, solving complex issues across design, tech, and business. Since joining, he’s completely transformed the way we work.”