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
Salesforce, the world’s leading CRM, was in need of an email design system. I lead the design and build of it.
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.
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.
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.
We started by auditing all of our email frameworks and identifying repeating UI elements.
We chose to build our design system on an eight-point grid. Here’s why:
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.
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.
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.
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.
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.
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:
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.
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.
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.
