Email Design System
The Email Design System is a resource for jump-starting email projects at Indeed.com. I collaborated closely with the development team to refactor the email components. As a result, this initiative successfully simplified the library and provided more flexibility to email designers and developers.
Role
UX Researcher, UX Strategy & UI Designer
Project type
Email Design System
Team
2 Designers / 6 Devs
Contribution
Audit, research, design, and documentation
Tools
Figma, FigJam, Jira, Storybook
Duration
8 months
Indeed sends more than 2 billion emails a year
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.
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
In our efforts to elevate the email design system, we focused on several key areas to ensure comprehensive improvements:
Outcome
Upon refactoring our components, aligning them with the specifications, and incorporating semantic tokens, we observed a significant enhancement in the quality of our components. Our components were from 60= "Unacceptable" to 90="Target"
Projects
