Dana Baddad

A design system for Marketing Emails

A customer’s inbox is one of the most valuable channels for marketing campaigns, and yet to the eyes of their composers, the experience is very far apart. Copywriters couldn’t visualize what the content layout actually looked like, nor how their writing complimented the design assets.

In collaboration with: Jade Bae & Eoin Melvin

Designers and other stakeholders struggled too.

To deliver a cohesive experience across channels during a campaign, an email is mocked up and presented to stakeholders.

These mockups were loosely stitched together from grouped layered and image masks, which required manual adjustment for every paragraph that was too long or too short. They also looked different, as designers made selective choices regarding color and typography for each project. And most painful of all, because they didn’t live in a central place and no one knew where to find them.

Each and every email was hardcoded.

This setup was costly and not ideal. Individually-stylized emails for each campaign dilute the visual identity, decreasing brand recognition over time.

Email campaigns were a complex task for everyone involved, which made it difficult to deliver a consistent experience on the customer end, who received emails that often looked different from what was intended.

28 different marketing emails are sent each month to millions of customers across 5+ markets. One email took 6 hours to code & QA.

How do emails even work? At which point can things go wrong?

To find out, I initiated a cross-functional collaboration and teamed up with Jade, a copywriter who worked closely with the lifecycle team to investigate why our emails were deviating so far from the guidelines. We jumped on a call with the lifecycle team and mapped out the entire process across stakeholders, teams and tools.

By doing this we learned that email clients are extremely limited, which meant that our visual style guides could not be rendered consistently from one inbox to another.

The constraints I discovered became the starting point for design.

I started by defining and refining typography and color styles to reduce complexity, ensure accessibility, and allow some room for brand expression and variety.

One email module at a time, the component library slowly started to grow, eventually including a select variety of color, layouts, and 2 viewport sizes.

In close collaboration with the creative operations team, we eventually defined a process for composing emails in Figma that was compatible with our organization’s set up.