All case studies

Langtons email
design system

Category:

UI Design, Design Systems, HTML / CSS

Background and problem statement

As part of the broader Langtons rebrand, redesigning the existing email templates became a major digital priority. Email is a critical traffic driver for the Langtons website, meaning improvements in email performance could have an immediate impact on business results.

At the time, the email production process was manual, inconsistent, and heavily reliant on Photoshop for asset creation.

There was no centralised design system for emails, which led to slow production times and visual inconsistencies.

Problem:

• Lack of a reusable system for building and adapting marketing emails.

• Slow and manual asset generation (especially for common elements like wine critic badges).

• Inconsistent branding and responsiveness across emails.

Opportunity:

• Build a flexible, reusable email design system in Figma to streamline workflow.

• Develop matching responsive HTML templates to ensure a seamless design to code transition.

• Improve mobile responsiveness.

• Increase engagement metrics like clickthrough rate by delivering a better user experience.

Problem:

• Designers had to manually update every banner size individually, leading to inefficiencies.
• Branding inconsistencies arose due to the lack of a centralised template system.
• Adapting banners for different platforms (web, email, social etc) required redundant manual effort.

Opportunity:

• Automate design updates as much as possible to reduce banner creation time.
• Standardise templates to ensure visual consistency across all assets.
• Implement flexible resizing to optimize banners for different sizes and platforms.

User research

The primary users were internal. The Endeavour design teams were responsible for daily email creation.
Their needs centered on efficiency, consistency and ease of updating campaign assets quickly.

Pain points identified:

• Designers spent too much time manually creating and resizing and exporting common email components.

• Mobile responsiveness wasn't consistent and emails would break on different devices needing fixes.

• Switching out assets (like critic badges or promotional messages) was slow and prone to errors.

Discussions with marketing:

• Marketing highlighted the need for a faster, more reliable way to build campaigns, especially during major wine sales and seasonal campaigns.

• They emphasised the importance of maintaining a consistent brand image across all channels.

The primary users were internal. The Endeavour design teams were responsible for daily email creation. Their needs centered on efficiency, consistency and ease of updating campaign assets quickly.

Pain points identified:

• Designers spent too much time manually creating and resizing and exporting common email components.

• Mobile responsiveness wasn't consistent and emails would break on different devices needing fixes.

• Switching out assets (like critic badges or promotional messages) was slow and prone to errors.

Discussions with marketing:

• Marketing highlighted the need for a faster, more reliable way to build campaigns, especially during major wine sales and seasonal campaigns.

• They emphasised the importance of maintaining a consistent brand image across all channels.

The solution

I designed and developed an interconnecting suite of components and modules in Figma, forming a modular email design system that included 28 separate templates.

• Mobile responsive in Figma:
Each template was fully responsive, allowing clear visualisation of how elements would adapt from desktop to mobile. This streamlined the transition from design to development.

I structured the redesign with the following key considerations:

• Reducing repetitive tasks:
I implemented master components linked to instances to eliminate manual updates across multiple banners. The design could now be updated in one place and it would appear on differently sized banners.

• Ensuring consistency:
Created a structured template system that maintained brand alignment across all assets.

• Improving workflow efficiency:
Leveraged Figma’s automation capabilities to accelerate the design-to-production pipeline.

Additionally, I leveraged Figma’s component/instance structure to automate the design processes and enhance consistency, ensuring that designers could work more efficiently with minimal manual intervention.

• Variants and Boolean Logic:
I introduced multiple variants and Boolean toggles, enabling rapid, on-the-fly customization of email elements. Designers could now use dropdown menus in Figma to swap content, badges or layouts without manually editing each asset.

• Component & Module Library:
I built a cohesive, drag-and-drop system of modules that interlock using auto-layouts. This allowed designers to mock up new emails faster while simultaneously generating export-ready assets.

• Component & Module Library:
I built a cohesive, drag-and-drop system of modules that interlock using auto-layouts.
This allowed designers to mock up new emails faster while simultaneously generating export-ready assets.

Testing and validation

Internal testing with the design and marketing teams validated the new system:

Key findings included:

• Designers reported faster build times and reduced repetitive tasks.

• Mobile previews revealed stronger design consistency across devices.

• Marketing appreciated the ability to launch campaigns more quickly without sacrificing quality.

Impact & results

✔️ Delivered 28 fully responsive email templates built in Figma.

✔️ Developed 28 matching HTML templates for accurate, responsive email deployment.

✔️ Delivered a complete email design system in Figma, including all components, variants, and modular building blocks for rapid email creation.

✔️ Significantly reduced production time for marketing emails.

✔️ Strengthened brand consistency across digital communications.

✔️ 133% uplift in clickthrough rate (from 4.10% to 9.56%).

Background and problem statement

Problem:

Opportunity:

User research

User research

Pain points identified:

Discussions with marketing:

Pain points identified:

Discussions with marketing:

The solution

The solution

Testing and validation

Testing and validation

Impact & results

Impact & results

Reflection & next steps

Reflection & next steps

Let’s work together.

I'd love to talk about how I can help.Please feel free to reach out to chat.

Saul Minshall

Let’s work together.

I'd love to talk about how I can help. Please feel free to reach out to chat.

Saul Minshall

Let’s work together.

I'd love to talk about how I can help. Please feel free to reach out to chat.

Saul Minshall

Let’s work together.

I'd love to talk about how I can help. Please feel free to reach out to chat.

Saul Minshall

I'd love to talk about how I can help.
Please feel free to reach out to chat.