A scalable and modular design system for marketing emails that enables consistency and nimble workflows.
Overview
When I started at The Washington Post, there was no design system in place for the email surface. The lack of a universal source of truth meant the workflow was sluggish and led to inconsistencies in both design and execution.
As a Designer + Developer on the Brand team, I advocated for and ultimately spearheaded the creation of a design system for marketing email in order to resolve the design and development issues, as well as increase flexibility and decrease turnaround time to better serve our partners on the Subscriptions team while meeting the demands of the fast-paced news cycle. The project also aimed to ensure brand consistency across the email channel and the wider product ecosystem so that our users would enjoy a consistent brand experience.
Needs
- Universal source of truth for marketing email (both design and code)
- Improved workflows for internal Brand team to work more efficiently and respond more rapidly to requests from Subscriptions team and other internal stakeholders
Opportunities
- Bring marketing emails inline with the rest of The Post’s product ecosystem to fix the fragmented user experience and increase trust, which is especially important in the email channel
- Make sure we are following best practices for email design and code, including accessibility concerns and dark mode constraints
- Clean up our code base to reduce technical issues and remove code bloat as email is notoriously finicky to code and there are known limits on file size for some email clients
Constraints
- The Brand team did not work in a typical product design team structure, so there was no ability or budget to do user testing. Because this was the initial creation of the design system, my goal was to establish it as an “A” version to use for A/B testing iterations in the future
- The scope of this design system was initially limited to the marketing channel because newsletters and transactional emails were managed by separate teams in a different department – the hope was to work with those teams in the future to scale the system for all email channels or to even bring all email at The Post under a single product umbrella to give it the same level of attention and priority as all of our products
Discovery
- Completed a comprehensive audit of all existing marketing email designs and code
- Identified inconsistencies in designs
- Found areas for improvement in workflows
- Broke down module and component needs
- Evaluated any existing newsletters and other email channel architecture to identify commonalities and differences in modules/layouts and determine where to unify the designs while also ensuring each channel retained its own identity in the product ecosystem
- Studied the core Washington Post Design System (WPDS – used for website and apps) for patterns and tokens to use or adapt for the new email design system
- Refreshed my knowledge of best practices for email design
Design Process
I began with the header and footer, the most basic modules that exist in every email. There was no existing consistency and no reasoning behind the various designs that were being used.
For the header, the goal is to plainly identify the brand and ensure the logo is legible in both light and dark modes. Since this use case was for the marketing channel, we decided to use only the version of the logo without the “Democracy Dies in Darkness” tagline, and reserve that version for newsroom usage only. I drew inspiration from the navbar on the website for the overall appearance of the header and I developed what I dubbed the “sticker approach” to logos and other graphics: placing a stylized outline around the graphic that mimics the appearance of a die-cut sticker. This is so that the logo 1) looks ordinary on the default white background, but 2) in dark mode, the outline appears and maintains visibility of the logo while 3) lending an intentionality to it instead of just slapping on a simple solid background color or standard text outline.
For the footer, the goal is to convey any important legally required information and provide links. The existing footers were all over the place in terms of layout and content, which I hypothesized could be confusing for readers. I decided to simplify the footer by reprioritizing what content to include and adjusting the layout. I went with a single column left-aligned layout for ease of reading and made sure the links were separated from everything else so they would be easy to find. I then went with our smaller “WP” logo to reinforce the brand without repeating the full logo used in the header, and I also applied the “sticker approach” to the image.
For content modules, I drew inspiration from the WPDS, existing patterns, newsletters, and email best practices. I designed always with the end user in mind, with the goal of making their experience with our marketing emails flow seamlessly with the rest of the product ecosystem.
Final Design
The WP Marketing Email Design System provides a centralized and standardized framework for creating marketing emails. This includes a comprehensive Figma library, a modular HTML/CSS codebase, and detailed documentation. By aligning email designs with the broader Washington Post Design System and our other products, we strengthened brand recognition and reinforced customer trust. The new templates are adaptable and scalable, allowing for rapid iterations and responses to the fast-paced news environment.
