Architected, designed and built the Salesforce Email Design System

a tablet, desktop and mobile device displaying the same email

Project

Salesforce, the world’s leading CRM, was in need of an email design system. I lead the design and build of it.

Roles

  • Art Direction
  • Copy Writing
  • Design
  • Information Architecture
  • UI Design
  • UX Research and Testing
a photo from our initial white boarding session

the challenge

Email design and development is tricky. Especially for designers who have no experience with these. What’s more, there are a lot of design teams at Salesforce spread across different regions. We also contract with many external design agencies.

We needed to provide a globally available set of email frameworks. These had to be easy to use by in-house and agency designers.

Email Design System
Content Management System
Email Send Engine

PROJECT GOALS

We were rolling out a content management system and needed guidelines for it. Users had to know what kind of content they could upload to it.

Plus, email assets had to be spec perfect for our automated, and always-on, send engine. Our send engine uses subscriber data to assemble and deliver personalized emails. It uses copy and images from the CMS to cater a unique message to each recipient.

An email design system was the natural next step. The email design system would serve as the companion design toolkit for our CMS. It would help guarantee submitted assets were the right dimensions and on brand.

Project Team

Our email marketing team is small, and our creative wing is tiny. It consists of an amazing email developer and myself as designer.

Special thanks to Crystal Ledesma, Zillow’s Email Design System, Manager. She made Zillow’s first email design system, and she was gracious enough to meet with me and walk me through her experience.

a photo of a sketch in a notebook of an email audit

Audit

We started by auditing all of our email frameworks and identifying repeating UI elements.

Eight-Point Grid

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

  1. Most device screen resolutions are divisible by eight 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 established visual consistency across our entire module library.
  3. It improved communication between designers and developers.
Primary Module
primary module overlayed with eight point grid
Mobile Primary Module
mobile primary module overlayed with eight point grid
Secondary Module
secondary module overlayed with eight point grid

Module and Component Library

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

We named our primary offer modules after trees — yes, trees. This was a nod to Salesforce's national parks brand theme. It also avoided associating the modules with a specific use case.

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

Primary Offer Modules
Alder
Alder module wireframe
Aspen
Aspen module wireframe
Cypress
Cypress module wireframe
Douglas Fir
Douglas Fir module wireframe
Elm
Elm module wireframe
Eucalyptus
Eucalyptus module wireframe
Gumwood
Gumwood module wireframe
Hickory
Hickory module wireframe
Webinar
webinar module wireframe
Secondary Offer Modules
Horizontal Layout
horizontal layout secondary module wireframe
Vertical Layout
vertical layout secondary module wireframe
sPeaker Components
Single Speaker
single speaker component wireframe
Two Speakers
two speakers component wireframe
Three speakers
three speakers component wireframe
four speakers
four and more speakers component wireframe
Event Details Component
Event Details
event details component
Stats Component
Stats
statistical cards component
diagram of an early version of the site map

Site Map

With our module and component library complete, we set about outlining the first draft of our sitemap. This helped us 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.

UX Testing

After finalizing our sitemap, I built a working prototype. Next, I set up usability testing with demand-generation and email marketing managers. I used their feedback to build the first version of our site on Google Sites. Then I asked in-house designers broad questions about our email program. I wanted our design system to 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.

excerpted page from user research report
excerpted page from best practices survey reportbest practices web page from the Salesforce Email Design System

Best Practices Survey

I used a survey to get feedback from our internal stakeholders. I wanted to know what types of email best practices they would find most useful.

I posted the survey on the company’s internal social networking site. I targeted two user groups that specialize in email marketing. The results informed the best practices section in the design system.

Finalize Design System Hub

I wanted to build a website from the ground up, but getting security approval for this was a long process. Plus, my team didn't have the budget to develop a new site. What we did have was a corporate account with Google Sites that let me build using a website template.

home web page of the Salesforce Email Design System
modules web page from the Salesforce Email Design System

Ia & ui Design

Every module page includes a collection of resources. These are to help designers make email assets. From top to bottom, here’s what’s included:

Cypress module web page from the Salesforce Email Design System

UI Kits

Every module and component has a corresponding UI kit. I intentionally repeated specs here. Redundancy helps minimize the amount of submitted images with bad dimensions.

My goal was for designers to use the UI kits as staging environments for their artwork and messaging. I included stripped down wireframes next to completed examples.

The goal was to highlight the creative possibilities. My vision was that designers would treat each image as a blank canvas. I wanted to inspire them to design images beyond rectangular compositions.

Cypress module UI Kit

Image Library

We partnered with an agency to produce a library of images for every module. This way, teams with limited creative support could still send on-brand emails.

I art directed their design. The artwork was broad so that the images could cover different types of messages.

Eucalyptus module image library

Learnings & OUtcomes

A dedicated design system has made a big impact. It's helped make the email program a more effective digital channel. 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 less back and forth between stakeholders and email marketing managers. Stakeholders simply submit copy and images. The email marketing team reviews them, and the CMS and send engine do the rest. They’ve seen huge improvements in their workflow.

Adoption of the email design system has also increased since its release. All global regions in the company use it for deploying demand-generation marketing communications.