Embedded Files
One of the most widely used methods of communication, email is often left behind in design system thinking. By leading the charge on the email design system, I helped to enable faster, better, and more accessible email campaigns for hundreds of millions of Indeed users.
Changing the way Indeed thinks about email
Traditionally, email design had been seen as a means to an end. Indeed sends hundreds of millions of emails every day, each one designed by a different team from product, to marketing to legal notices all with different audiences on different devices with wide ranging needs. It's no wonder that these teams weren't talking to each other, had varying levels of skill and understanding when it came to email best practices and therefore were sending emails with wildly different looks and therefore, messages to our users.
Design systems can help solve these problems of alignment and communication, but applying traditionally web-focused design system thinking to email was an extra challenge.
Helping all users design industry-leading emails
Through internal user interviews and survey, we knew early on that most ux designers didn't have a background or little experience in email design. Designing for email requires additional consideration for functionality and accessibility that was often overlooked and was causing repeated frustrations for developers who were often acting as email design teachers and support, taking up valuable time.
Past efforts had seen the creation of multiple end-user email journeys and story maps focused on particular audiences, but they varied in look and feel, messaging, and quality. Designers didn't know how to best iterate or modify these rigid email designs while maintaining best practices. I set out to inventory and distill the elements of these disparate design kits into a unified email focused design system in tandem with the overall design system team.
Balancing user needs and technical limitations
I worked daily between email developers and design system ux designers to ensure the technical feasibility of design system components while also advocating for email design needs. When designers requested new design system components, designers would often overlook email use-cases when doing initial research. Things like button hover states, interactive elements, and even simple things like a list require additional consideration in email development. These findings resulted in increased quality between the two design systems.
Systems thinking for a global market
Being the number one job site, Indeed has a presence in multiple global markets. The design system had to work for product and legal emails being sent to almost 100 different locales. I worked with localization teams to understand the needs of users viewing emails in different markets to improve the email design system, adding support for RTL languages. I also worked with brand designers and developed an Illustrator logo generator script to create thousands of localized logo combinations for email.
In addition, I led an effort researching dark mode in email, kicking off dark mode theming work for the overall design system and improving innaccessible experiences in email.
Documentation is key
By watching how designers utilized the design system in recorded working sessions, we quickly understood the need for polished documentation at every step. We started by including documentation on how components and patterns were built directly in Figma for designers to utilize. By talking with design system users, the need for email examples and use-cases in context was identified and added to the email design library as well. Eventually, I worked with product managers to identify critical email documentation to include in a centralized web experience for the organization.
Results
By providing support and mentoring ux designers, the Email Design Library has grown to over 400 total components including icons, logos, and common email patterns and is now used by over 60 teams at Indeed.
Since it's launch, the Email Design System has grown to include not only a figma library, but a react based code library as well. Working with email developers, I helped to design some of the most-used email patterns to then build in a modularized code library. These code modules enabled developers to cut average resolution time by over 50% in the year since release (avg. 46 days to just 19 for email module based tickets), keep live email campaigns up to date when designs change, and is influencing the creation of a self-service internal email creation tool.
Â
Google Sites
Report abuse