Chaos to Order: Enabling 40 Brands to Design Newsletter Templates at Scale

Project Overview

Context

Dotdash Meredith is the largest American media conglomerate with over 40 iconic brands including PEOPLE, Better Homes & Gardens, Food & Wine, Allrecipes, Byrdie, Investopedia, and Travel+Leisure. Dotdash Meredith’s brands deliver 160+ newsletters to 57.8 millions active subscribers.

I led design to create a newsletter design system that enabled (re)designing at scale and more efficient dev work. The work contributed to to 15% company-wide year-over-year email performance growth ✅

Problems

Inefficient process: the email team were mainly in charge of the performance of the newsletter templates, rather than design. All update requests were handled by a small team of 2 designers, resulting in a large backlog of updates and slow progress.
Inconsistent and unscalable design: most existing newsletter weren’t created by designers and had no design documentations. Most templates had inconsistency both inside of the template and across the brand.
Lack of brand expression: Since the brand designers weren’t involved in the design process, the newsletters looked outdated and off-brand.

Goals

In Q2 of 2023, a small squad was put together to create a multi-brand design system to support all newsletter templates across 40+ brands and 160+ unique templates. The system would

allow for redesigning newsletters at scale,
enable increased efficiency in HTML template production,
prioritize tested and performant layout,
unblock broader design teams’ ability to contribute, including increased brand expression.

My Role

As the lead UX designer on this project, I worked closely with:

Design director
Design System Director
2 front end devs
Audience retention team
Growth stakeholders
Senior Management stakeholders
Vertical designers

I was in charge of:

the end-to-end process
defining product strategy
creating design system structures and components
providing onboarding and support
project management and team ceremonies

The Solution

Newsletter Design System empowering iconic brands of Dotdash Meredith

‍

An abundant library of flexible and customizable components

I created a library of components in Figma that allow for flexibility and customization.

One-click library swapping as the multi-brand solution

The design system needs to support 40+ brands. Easy and smooth adoption is key. I created a base theme template including the smallest design system components like colors, typography, logos, icons, etc. Brand designers turn this template into their own newsletter design libraries that they later plug into the base component library and templates with just one click.

Readymade templates so designers don't need to start from scratch

Collaborating with the email and audience retention team, I identified some most frequently used templates in-use and recreated them in the design system. Designers are able to grab and modify without having to put together templates using components from scratch.

Education makes the design system usable and desirable

I created tutorials, demos, in-file instructions, as well as setting up office hours and slack channels to make the design system adoption process smooth and rewarding for brand teams.

Research Highlight

Process Highlight

Leveraging existing resources to optimize efficiency and success

Although we had never had a design system for newsletters, we had an internal multi-brand design system for our websites. We were able to adopt the library structures and best practices into the new design system. The familiar user experience also makes it easy for brand designers to get onboarded.

Turning a technical constraint to a Win-Win-Win solution

When creating the header component, we made it highly customizable by allowing users to toggle on and off elements like links, logos, and tagline, while providing the options to swap between a solid color and an image as background. However, we ran into a technical constraint in Figma during testing: when we dropped an image into the layer, it would be cut off if the height of the image wasn't perfectly the same as the default container. We tried different configurations and worked with Figma experts but couldn’t solve the problem. We also found others struggling with the same issue on Figma Forum. After realizing it wasn’t something we could solve for quickly, we started looking into alternatives.

We ended up removing the header component from the design system entirely because:

We did a poll and found out the header component wasn’t very helpful.
Most designers prefer to bulk create headers for their newsletters in tools like Adobe Illustrator.
Devs found it easiest to bulk download PNGs for headers from Figma and upload them to HTML.

This solution makes everyone happy:

Win for Designers (users): no constraint on aspect ratio, can design headers at scale however they want.
Win for Devs: bulk download and easy implementation.
Win for Design system team: we have one less component variant to troubleshoot and maintain!

Shipping fast and iterate with the feedback from pilot group

We worked very fast to deliver the MVP in just under # weeks to a pilot group of 4 brands. I put together onboarding material in both Figma templates and as a standalone step-by-step instruction file. We worked closely with the designers as they started using the design system. I documented all their questions and challenges, discussed with the team to prioritize updates, and improved the design system in an iterative process. We then made the design system available to all brands.

‍