The email design system led to a 50% reduction in time spent building new emails using standardized components and templates. This strengthened brand consistency across all email campaigns and created shared language between design and development teams.
The previous email creation process was treated as a series of standalone projects without a cohesive framework or clear guidelines. This resulted in inconsistent design structures, required developers to write custom code for each email, and led to significant inefficiencies across both teams.
The goal was to develop an email design system to standardize components, ensuring consistency and minimize guess work for both designers and development team.
Gather all emails from the production
Identify component patterns and intents
Standardize components and create guidelines
Publish library collect feedback and refine
The process started with auditing all email designs in the production, reviewing each email's purpose and to identify recurring elements based on message type and intent. This provided us an overview of all the components that can be standardized.
Once we've identified the patterns, we began defining the foundational elements of the system. I grouped recurring components as headers, hero sections, cards, content elements, and footers.
The goal was to keep components flexible enough to serve multiple use cases and to create visual consistency across campaigns.
Next, I've created a component library and style guide and documented typographic styles, spacing rules, colors and usage guidelines to ensure alignment across teams.
To make everything accessible, we centralized documentation in Invision DSM creating a single source of truth for both designers and developers.
I rolled out the email design system with a phased launch and use it in actual project. This allowed me to test how well the system handled different content types and encounter any issues to refine components.
Once I made those refinements. I shared and published the library to the brand design team through DSM and conducted walkthrough sessions to demonstrate how to efficiently access, navigate, and use the system. These sessions included hands-on examples, tips for working with the component library, and guidance on best practices for maintaining consistency across different email types.
There are some adhoc 1 on 1 meetings with the designers encountering issues but are essential for gathering insights and continuous feedback loops. We've identified gaps or edge cases not covered by the initial system, and update improvements and publish new version releases of design library.