Rothy's email design system

ROTHY’S EMAIL DESIGN SYSTEM

Type

Digital

Summary

Collaborated closely with both the design and growth teams, leading initiatives focused on developing a robust email design system. Rooted in the brand guidelines and informed by data insights, this process was pivotal in establishing a cohesive framework of elements and components.

Process

Building an efficient process

The growth team prioritized showing a variety of products and making every element in the send visually stimulating over design details and polish. But I didn’t want our data-driven focus to result in having our emails feel lifeless and discounted from our overall brand. By establishing a set of guidelines, documentations and design systems can help designers, growth team and other stakeholders spend less time debating and needlessly repeating work, and more time focusing on iteration, impact, and user experience.

01.

Discovery

To start, we looked at brands that we think are doing a great job in designing emails and created a library of layouts that we could try. We then analyzed the heat map of our emails from the past 6 months to better understand user behavior and user click patterns.

02.

Design

Leveraging the research and data from the research phase, we begin brainstorming for template ideas that we could test into. We created templates and components based on our existing best-performing templates and also inspirations that we found, and ran a series of AB tests.

03.

Testing

We first tested into a broader and more general template layout. Then started narrowing them down to more specific component layouts based on content type.

Treatments

Typography, buttons & special headline treatments
‍
I built out a system of type scale, type treatments, and CTA treatments to create a consistent look and feel across all email sends. I then built this out in Figma a style library that can be easily shared and used by all designers on the team.

Components

After several rounds of testing, we created a library of evergreen components. Since we are constantly learning and iterating, new components are continue being added.