The introduction of the email design system led to a shared language between design and development teams, using standardized components and templates. This led to a 50% reduction in time spent building new emails and strengthened brand consistency across all email campaigns.
The existing email creation process was treated as a series of standalone projects, built 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 began with a comprehensive audit of current email designs. An inventory was taken, reviewing each email's purpose and to identify recurring elements based on message type and intent. This step provided a foundation of commonalities across emails that could guide standardization.
With patterns and inconsistencies identified, we began defining the foundational elements of the system. I grouped recurring components into logical categories: headers, hero sections, CTAs, content modules, and footers.
The goal was to keep components flexible enough to serve multiple use cases but standardized enough to create visual and structural harmony across campaigns. This step helped lay the groundwork for a consistent and scalable component architecture.
Next, we've created a component library and style guide where each component was clearly defined, annotated, and grouped into reusable blocks. We've documented typographic styles, spacing rules, colors and usage guidelines to ensure alignment across teams. To make everything accessible, we centralized documentation in Invision DSM—including visual specs and usage rules 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.