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.

This was a gamechanger.

Drafting an email took a fraction of the time as copywriters could simply drag and drop modules to build an e-mail. Designers, campaign managers and legal stakeholders now had a single point of reference.

The new emails looked better in code, too, and saved over €20K anually.

A few months later, Figma released Variables.

Variables were another game changer for the email design system itself, considering that we use 4 color themes, 2 device modes and 5 languages.

Using variables not only simplified the file structure, but also separated design choices from content input fields in the property panel for copywriters.

The email design system continues to evolve, transforming how emails are composed at N26.

Building an email in Figma using the design system became so simple, it was easy to get buy-in from other stakeholders including legal, which optimized the workflows across project stages and teams.

The design system was set up so that the component layers plug into other essential tools, including Localize and Salesforce. Composing emails in Figma also means that we now have a visual archive of all marketing emails, which has enabled lifecycle specialists to build campaigns with a wider vision across user journeys and flows.