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

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.

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"