CRM design system
Description
Description
At the end of 2020, I lead on the creation of a CRM design library. As the channel’s needs evolved, this developed into a sister one to our product design system. I built the Figma library in an atomic structure, designing both reusable patterns and full email templates. While doing this, I rebranded several templates for email journeys, including product marketing, alerts, BP, and FCR, allowing me to test patterns in use and refine them continuously. The system remains live, growing and adapting as our email designs evolve.
At the end of 2020, I lead on the creation of a CRM design library. As the channel’s needs evolved, this developed into a sister one to our product design system. I built the Figma library in an atomic structure, designing both reusable patterns and full email templates. While doing this, I rebranded several templates for email journeys, including product marketing, alerts, BP, and FCR, allowing me to test patterns in use and refine them continuously. The system remains live, growing and adapting as our email designs evolve.
Problem
Problem
As our email journeys expanded, there was no easy way to create new templates while keeping designs consistent. The team needed a scalable solution to maintain brand consistency and streamline template creation.
As our email journeys expanded, there was no easy way to create new templates while keeping designs consistent. The team needed a scalable solution to maintain brand consistency and streamline template creation.
Solution
I built a Figma design library and a ZeroHeight CRM design system to standardize components and templates. By designing reusable patterns and applying them across multiple templates, I created a system that could adapt to ongoing business needs and design updates.
I built a Figma design library and a ZeroHeight CRM design system to standardize components and templates. By designing reusable patterns and applying them across multiple templates, I created a system that could adapt to ongoing business needs and design updates.
My role
My role
Lead designer
Lead designer
Timeline
2021
2021
Team
Lead designer, developer and head of design
Lead designer, developer and head of design
Deliverables
Figma design library
Zero Height documentation
Figma design library
Zero Height documentation
Creating a dedicated library
Creating a dedicated library
From ad-hoc templates to a modular system
The CRM team had outgrown the company’s existing email templates, which were created in an ad-hoc way. They needed a modular system that could be easily combined and reused, while maintaining a mobile-first approach, ensuring templates transformed seamlessly from mobile to tablet to desktop.
Exploring patterns and flexibility
The goal was to give both the copy and CRM teams more freedom in creating content while maintaining consistency across templates. I developed a comprehensive set of patterns in the design system, ensuring they could work together in multiple combinations. To get the balance right, I used our weekly email templates and banners as a starting point and explored multiple ways to apply the assets.
Building the system
The outcomes of this work included:
Figma CRM design library: a fully modular library for creating and managing all company email templates.
ZeroHeight documentation: dedicated CRM pages that explain pattern usage and provide example templates, making the system accessible for the entire company.
From ad-hoc templates to a modular system
The CRM team had outgrown the company’s existing email templates, which were created in an ad-hoc way. They needed a modular system that could be easily combined and reused, while maintaining a mobile-first approach, ensuring templates transformed seamlessly from mobile to tablet to desktop.
Exploring patterns and flexibility
The goal was to give both the copy and CRM teams more freedom in creating content while maintaining consistency across templates. I developed a comprehensive set of patterns in the design system, ensuring they could work together in multiple combinations. To get the balance right, I used our weekly email templates and banners as a starting point and explored multiple ways to apply the assets.
Building the system
The outcomes of this work included:
Figma CRM design library: a fully modular library for creating and managing all company email templates.
ZeroHeight documentation: dedicated CRM pages that explain pattern usage and provide example templates, making the system accessible for the entire company.
Optimising a high-traffic touchpoint
Optimising a high-traffic touchpoint
Whatch app • 2 weeks Nov 2024
Whatch app • 2 weeks Nov 2024
© Stina Slingo 2025