How Salesforce Built Its First Email Design System – And How You Can, Too

Keep emails on brand, spend less time making them and increase sales leads. Sounds good, right? You can do this with an email design system, a collection of reusable email modules and components that helps teams create consistent-looking email. Like any design system, it should be easy to use and provide clear guidelines. 

My job is to set and improve visual standards for our marketing emails. User experience and visual design can often be neglected in email. My team strives to overcome these challenges in order to provide our customers valuable communications. 

This blog covers why and how we built our first email design system at Salesforce – and how you can, too. First, a bit of background. Several years ago, our email marketing team built an automated email send engine using Salesforce’s digital marketing platform, Marketing Cloud.

This was huge for us since we no longer had to segment and code emails by hand. Instead, the send engine used data to assemble and deliver personalized emails. We saw a big jump in our email engagement numbers and an increase in sales leads. 

We used two email templates for the first two years of our engine’s life. Targeted messaging resonated with our audience — but we needed more creative options. 

Around this time, we were also building a content management system (CMS) on Sales Cloud to house our email assets, provide instant previews, and feed content to our send engine. Our CMS generated single marketing offers rather than entire emails. Our send engine then assembled multiple offers into a complete email. 

In effect, our send engine and CMS were using a modular approach. Also, our CMS needed guidelines on how to make assets for it, so an email design system was the natural next step.

Our email program was evolving into three major parts:

1. Send Engine: manages email subscriber data to automatically assemble and send personalized emails
2. Content Management System (CMS): stores email assets for our send engine to pull from
3. Email Design System: A library of reusable modules and components that also provides guidelines for designing the email images uploaded to our CMS

The benefits of an email design system

Our email design system was the glue connecting all the parts. Its specs ensured that images were perfectly sized for our automated send engine. It helped centralize our documentation so clients could see the latest guidelines in one place. It provided a dedicated environment for us to manage our complex module library. 

Consider the possible benefits for your organization in adopting an email design system. These are the advantages we gained:

1. Efficiency. Designers follow our guidelines and submit images to our team for review. Simple. No code required to make email.
2. Scalability. We can design as many modules as we need in a centralized location. When we make updates to our library we only do it in one place.
3. Consistency. Our emails are on brand because they’re made with predefined modules. There’s also less room for mistakes and better quality control.
4. Communication. Our customers receive better emails since best practices are built into our design system.

Now it’s time for you to get started. Follow these six steps and you’ll be on your way to success.

Step 1: Learn from the best

A great place to start any project is by talking to someone who has experience doing something similar. In our case, that someone was Zillow’s Engineering Manager, Design Systems, Crystal Ledesma. 

I had recently attended a talk where she spoke about her experience building Zillow’s first email design system. Afterward, she told me to look up Brad Frost’s seminal Atomic Design approach to building design systems. She also emphasized the role education plays in getting teams to adopt a design system (more on this later).

Step 2: Take inventory of your program

Before starting to build your design system, it’s important to have a full picture of your entire email framework library.

We started with an audit of our library where we identified repeating UI elements. Our goal was to reduce our library to the smallest elements possible — what Frost calls “atoms.” Afterwards, we grouped these elements into more complex “molecules” and “organisms.”

Step 3: Establish your design system’s grid

The keystone of a design system is visual consistency, so start by defining the grid on which your module library will be based.

We chose to build our design system on an eight-point grid. Here’s why:

1. Most device screen resolutions are divisible by eight (or four) pixels. So, images look sharp if their dimensions are divisible by eight. No partial pixels!
2. An eight-point grid takes the guesswork out of positioning elements. It establishes visual consistency across our entire module library. 
3. It improves communication between designers and developers.

Step 4: Define your module and component library

We settled on eight primary and two secondary offer modules, and included a small number of components. Our goal was to provide a large catalogue of frameworks for our designers to choose from.

We wanted our modules to be blank canvases. They could work for any type of email — a newsletter, event or marketing communication. 

Step 5: Build and test your system

We wanted to build our system from the ground up, but getting security approval for this was a long process. Plus, we didn’t have the budget to develop a new platform. What we did have was a corporate account with Google Sites that let us build using a website template. 

First, we outlined our sitemap to visualize the organization of the site and its taxonomy. “Modules” became the dominant “organism.” “Components” became the smaller elements or “molecules” which form part of a module. 

We then built a working prototype. Next, we set up usability testing with demand-generation and email marketing managers. We used their feedback to build the first version of our site on Google Sites. Then we asked in-house designers broad questions about our email program so that our design system would fill as many knowledge gaps as possible. 

Overall, designers liked our design system, calling it well-organized with clear directions. They were happy to see a dedicated resource for designing emails.  

Step 6: Gather learnings and optimize

Adoption has steadily risen across our global regions in the two years since we launched the system. Email production is easier now with a standardized module and component library. 

Education is our biggest challenge, to echo Crystal Ledesma’s early insight.  Although we tried hard to make our guidelines easy to follow, we still get a lot of images with bad dimensions. To help with this, we present to design teams and walk them through our design system. 

Salesforce’s brand is always evolving. As our brand changes, some of our modules now seem too complicated and could use an overhaul.

How a design system helped us – and can help you

A dedicated design system has helped make our email program a successful digital channel. Our emails are on-brand and mobile responsive. They are also optimized for low connection speeds and accessibility friendly. All this without users needing to touch code. 

There’s also less back and forth between stakeholders and email marketing managers. Stakeholders simply submit copy and images. The email marketing team reviews them, and our CMS and send engine do the rest. We’ve seen huge improvements in our workflow. 

We support teams across the globe within a huge company. So considerations such as scalability are important to us. We needed an efficient and consistent way of designing emails, and we did it on a shoestring budget with only the tools readily available to us. 

Whatever your organization’s email demands may be, an email design system is a valuable tool to have. Resources and needs will likely impact how you go about making your own email design system. Good luck on your journey, and here’s to making better email easier.