When I joined OpenTable, the design system for email was somewhat established, but it wasn't as refined as I would have liked. I made it my mission to perfect email. By creating consistent header styles and flexible body modules, I shifted email from being the stepchild of design to something that all of our marketing partners wanted to work on. Using Figma's auto-layout feature paired with pixel perfect design, I made it possible for everyone to get involved in building an email.
All our email templates should be...
Beautiful + on brand
Our emails will be on brand and beautiful, no matter how big or small the send.
Easy to implement
Our emails will be simple to implement effectively without too much additional production or development.
Lifting up content
Our emails will honor the content, and the content itself should be the driver the design.
Let's keep in mind
No modular design
Because the email sending system (SendGrid) doesn’t allow us to use a WYSIWYG, every template (down to each detail) must be built individually in HTML, which means we can't be modular in design because we don't have a developer resource in house.
Minimize HTML changes
Rather than providing bespoke designs which require a tremendous number of assets and colors, we are trying to minimize these so that our partners who are building these emails in SendGrid don’t have to make so many changes every time they send an email.
The bright side is that emails which are triggered (and not changed week to week) can be designed exactly as we’d want and made to look as bespoke and beautiful as we want all emails to look.
Viewing templates on a spectrum
While building wireframes, I also plotted all the templates on a spectrum from Evergreen to Bespoke and Functional to Emotional. Doing so allowed us to determine how much color and playfulness to use – the closer to the top right, the more enjoyable the email should be.
I build with a mobile-first approach. Each template needs to render beautifully at both sizes.
Now that we have the email templates, we can use them for bespoke campaigns. Using the same formats (or some slight HTML adjustments), we can create a unique look and feel for tier 1 campaigns. These two examples were part of our 2020 Valentine's Day campaign and our 2019 Year in Review campaign.
Email isn't the sexiest design project, but it is one of the most successful channels by which we reach our audience. By redesigning this experience, we increased clickthrough rates and championed our brand voice and style.