OVERVIEW
PROBLEM
Our email consistency was so poor that it often resembled phishing or spam. The significant loss of leads due to a lack of trust was a key factor in prioritizing a redesign of the Email Design System.
CHALLENGES
To improve consistency, the foundational components used in the Email Design Library needed to be aligned. These components were integrated from the core design system, which also includes other design systems such as branding and marketing. Additionally, insufficient communication between teams resulted in several problems:
Inconsistent user experience across emails and products
Inconsistent component naming conventions
Outdated components
Non-compliance with accessibility standards
Overall poor-quality output
SCORECARD AUDIT
We executed an initiative to define and enhance the quality of the email design system components. This project encompassed design, accessibility, flexibility, token application, and overall quality output. Our goal was to optimize these components to ensure they are reliable, high-performing, and meet our UX quality standards.
Score | Definition | |
|---|---|---|
100 | Possible | This number represents perfection and is rarely obtainable. |
90+ | Target | Aiming for somewhere between 90 and 100 for an exceptional email experience. |
80-89 | Acceptable | OK with room for improvements. Considered lower priority. |
79 and below | Unacceptable | Needs significant improvements potentially leading to broken experiences. Prioritize critical work. |
We discovered that the quality of the email components was "Unacceptable," with an average score of 60/100. This clearly indicated not just room for improvement, but an urgent need for enhancement.
SURVEY
The team ran a survey with the email team as participants. The objective was to identify and resolve naming discrepancies within the Email team to enhance clarity, consistency, and efficiency in communication between the Email Design Library (EDL) and the Email Module Library (EML) and across all product teams utilizing the email design system.
We discovered that some components had different names in design (EDL) and development (EML), and some components existed in development but were missing in design.
PLANNING
To address naming discrepancies and plan the refactoring of all library components, I organized a FigJam workshop with the design and development email team. The workshop aimed to align our naming conventions and plan the necessary redesign and development efforts.
To address naming discrepancies and plan the refactoring of all library components, I organized a FigJam workshop with the design and development email team. The workshop aimed to align our naming conventions and plan the necessary redesign and development efforts.
PROCESS
To ensure a consistent outcome, I established a comprehensive process for the team of designers to follow. This process encompassed all the steps required for the refactoring of each component. By adhering to this process, we ensured that the components were consistent, updated, accessible, universal, and scalable.
DESIGN ENHANCEMENTS
Semantic Design Tokens
Implemented semantic tokens from the core design system to maintain a cohesive and adaptable design language across all components.
Design Quality
Prioritized the refinement of design elements to achieve a superior visual and functional standard.
A11y Compliance
Ensured all components met or exceeded the Web Content Accessibility Guidelines to provide an inclusive user experience and meet legal requirements.
Consistent Documentation
Created detailed documentation to guide designers and developers to use our system, promoting uniformity and ease of use.
Scalable Components
Designed components to be flexible and scalable, accommodating various use cases and future growth.
