Category:
Figma, Email Development, HTML / CSS
Date:
Dec 2023
As part of the Langtons rebrand, I designed an interconnecting suite of components and modules which made up 28 seperate email templates in Figma. These were subsequently developed into responsive HTML and CSS templates for everyday use.
As part of the Langtons rebrand, I designed an interconnecting suite of components and modules which made up 28 seperate email templates in Figma. These were subsequently developed into responsive HTML and CSS templates for everyday use.
Email is a key driver of traffic to the Langtons website, making the redesign of the existing email templates a major focus of the digital part of the rebrand project.
I designed and developed 28 distinct templates tailored to various marketing channels, which the design team use daily to create every email Langtons sends.
Email is a key driver of traffic to the Langtons website, making the redesign of the existing email templates a major focus of the digital part of the rebrand project.
I designed and developed 28 distinct templates tailored to various marketing channels, which the design team use daily to create every email Langtons sends.
The new designs resulted in a significant uplift of 133%, with the average unique click-through rate increasing to 9.56%, more than doubling the previous rate of 4.10%.
The new designs resulted in a significant uplift of 133%, with the average unique click-through rate increasing to 9.56%, more than doubling the previous rate of 4.10%.
I designed the templates to be fully mobile responsive within Figma, which made the transition from design to code much smoother.
This approach allowed for a clearer visualization of how elements would adapt from desktop to mobile, streamlining the development process.
You can see an example of this in action below.
I designed the templates to be fully mobile responsive within Figma, which made the transition from design to code much smoother.
This approach allowed for a clearer visualization of how elements would adapt from desktop to mobile, streamlining the development process.
You can see an example of this in action below.
In the new system, I introduced multiple variants and Boolean logic, allowing these elements to be quickly generated and customised by the design team on the fly within Figma.
In the new system, I introduced multiple variants and Boolean logic, allowing these elements to be quickly generated and customised by the design team on the fly within Figma.
I designed the new system with the goal of streamlining the workflow for other designers. They now mock up their designs directly in Figma, while simultaneously creating the necessary image assets for export to use in emails.
Key problems I addressed included the time-consuming process of image asset generation such as groups of wine critic badges, which were previously designed externally in Illustrator and exported separately.
I implemented multiple variants and Boolean logic to enable fast, on-the-fly customization of these elements directly within Figma via dropdown menus. Elements could now be easily switched around, significantly speeding up the design and export process.
I designed the new system with the goal of streamlining the workflow for other designers. They now mock up their designs directly in Figma, while simultaneously creating the necessary image assets for export to use in emails.
Key problems I addressed included the time-consuming process of image asset generation such as groups of wine critic badges, which were previously designed externally in Illustrator and exported separately.
I implemented multiple variants and Boolean logic to enable fast, on-the-fly customization of these elements directly within Figma via dropdown menus. Elements could now be easily switched around, significantly speeding up the design and export process.
I created a component and module library enabling a cohesive drag and drop system of modules that interlock together using autolayouts to form the different templates.
I created a component and module library enabling a cohesive drag and drop system of modules that interlock together using autolayouts to form the different templates.
Let’s work together.
I'd love to talk about how I can help.
Please feel free to reach out to chat.
Follow
Let’s work together.
I'd love to talk about how I can help. Please feel free to reach out to chat.
Follow
Let’s work together.
I'd love to talk about how I can help. Please feel free to reach out to chat.
Follow
Let’s work together.
I'd love to talk about how I can help. Please feel free to reach out to chat.
Follow