Email Design Systems: Laying the Groundwork for Collaboration

Last year, Ansira was approached by Charter’s email team with a very intriguing challenge: to increase speed-to-market, enhance efficiencies, and improve email engagement and conversion—all at the same time. Bright-eyed, the team gathered in a room with a whiteboard, dry-erase marker, and countless ideas waiting to be brought to life. In the end, it was clear that what the Charter team really needed was something to help guide various teams and agencies with one source of truth: a modular email design system.

Ummm…a what?

A modular design system is a set of building blocks, like Legos, that can be mixed and matched together to build digital experiences. This building block functionality improves the consistency of designs and helps teams scale their production. Combining reusable components and clear guidelines, it allows developers, designers, and other team members to successfully create digital assets—whether they’re experts or not. This reduces the need for custom design, which can be slow, inconsistent, hard to test, and difficult to maintain as teams grow and work volume increases.

In this case, Ansira saw the need and tackled the email channel. In future posts, we’ll show how cross-channel design systems can benefit brands and marketers in big ways.

Why is an email design system important? Here are just four of the many reasons:

1. Maintaining consistency is difficult—especially when working across different teams, clients, and agencies with multiple designers. Using a design system ensures that everyone is working together using similar design elements such as colors, fonts, and layouts.
2. Replicating old pieces, adding snippets into new designs, and tweaking as you go isn’t a very scalable approach. If you plan for your email program to grow (and you should), then you’ll want to shift to a systems-based design that will scale with current and future use-cases, as well as growing teams.
3. Instead of manually designing a single email for a single audience, you can design several content modules at once—making way for the data to compose the emails. This does a few things: unify the creative approach, increase speed-to-market, decrease errors, and improve email engagement by personalizing to multiple audiences at once.
4. Creating an email from scratch for every campaign is tiresome, time-consuming, and can get quite expensive. A design system allows for faster, more efficient design, development, QA, and overall speed to market. This in turn frees designers up to innovate and think outside the inbox.

Stepping into Charter territory

Ansira was called upon to support three of Charter’s business units: tech, strategy, and development, in conjunction with the brand’s contracted agencies on creative work. In other words, it was the team’s job to facilitate cohesion among internal design, QA, and production.

While gathering stakeholder feedback, documenting opportunities for design improvements, and defining common use cases, the main goal was unifying the creative approach. To do this, Ansira tapped all parties to submit buy-in at every stage.

Given the collaboration of business units and external creative partners involved, each group had its own set of conversations: rounded buttons versus squared, headline capitalization options, defined headers in a container versus floating headers, and so on. With all of these decisions, coupled with a high send volume, the team had to find a way to ground the project noise, beginning with the basics.

Starting with the basics

The first step of the modular design system was to create a framework of reusable components and modules focused on email legibility, accessibility, and scannability. Next came the base elements, composed of three key components: a responsive grid, type hierarchy, and color palette. Then, the Ansira team designed the call-to-action buttons and created a modular structure for all emails.

While the header and footer were created with ease, the primary, secondary, and tertiary modules were an entirely different feat – needing to account for two business units and various client teams, external agencies, and seven email messaging types—with various segments and customizations.

The result was a pattern library with over 200 responsive components that can be used interchangeably—and are able to scale for collaboration and production.

Up next: teaching and testing

For many, this shiny, new thing was also a new workflow, which came with its own learning curve. Gaining buy-in across teams, clients, and stakeholders is what makes or breaks a design system; it’s what determines if it’s going to be used or not.

Since February, Ansira has been meeting with all teams twice a month to unify the creative approach and help streamline the workflow for faster production.

With stakeholders on board for this new modular workflow, it was time for design testing. The first set of results are driving further changes to the design system. Incremental changes make them fairly easy to implement across such a large team. It’s also at this point that Ansira’s strategy team got involved, providing new ideas for a more powerful experience-based testing plan to really gain insights from the audience.

As for enhancements on the technical side, there are many ways in which the system has benefited, including a more modern approach to standards that translate to higher accessibility ratings and usability. Because the overall concept is modular, the team is able to reduce the amount of time in development, making the end result much more predictable. This, in turn, streamlines testing and quality assurance leading to an overall reduction in effort and increase in productivity while minimizing error. Making gains in these areas enabled focus on a restructuring of the data process and transforming interactions with the massive audience receiving emails.

During this time, the tech team was able to begin gaining deeper learnings about Charter’s audiences and customer data. While the road to this outcome was no walk in the park, the simplified version is that a modular design system, when coupled with the right customer data and campaign strategy, can engineer a very powerful data-driven creative workflow. Instead of manually designing a single email for a single audience, Charter can now design several content modules at once, letting the data compose the emails. Once this new workflow has been in use for a while, the next step is to dive into the analytics and see how the improved customer experience has directly increased conversions.

Putting it all together: From inception to inbox

To create an effective modular design system, there are a few key steps you need to take.

1. Get buy-in across your team, clients, and stakeholders. Some teams use collaboration tools like Google Docs and Dropbox Paper to brainstorm, collect use cases, and outline email needs.
2. Document use cases and assumptions. The best design systems not only cover the what but also the how, when, and why of email design.
3. Define content needs. Planning the content of the emails that you send will allow you to anticipate the common use cases that you’ll need to design for along the way.
4. Develop a pattern library. Once you determine common use cases, you can start to design individual components according to your needs. Turn your use cases into modular patterns using your components. Then create variations of each use case to allow for flexibility and to keep things from becoming stagnant over time. At Ansira we consider ourselves tool-agnostic, meaning we use Sketch, Figma, and Adobe XD to create design systems.
5. Partner designers with developers. This will ensure that designs will render in the majority of email clients. There’s nothing worse than a great design that no one can see.
6. Build and share your design system. Your Sketch, XD or Figma design files, pattern documentation, and guidelines help tell the story of how you design emails. But, the goal of any design system is to create a reusable set of components that developers can use to build and deploy actual emails. Make sure that the living, breathing patterns, and code are displayed alongside any design documentation and screenshots. Use tools like Zeroheight, InVision Design System Manager, Frontify, or Bynder to document your design system, share patterns, and host code snippets. Figma and Adobe XD also have built-in design system capabilities as well.
7. Assemble the pieces. With the structure, components, and modules in place, you can now start to put all of the pieces together. Thinking in a modular way will allow you to build emails like Lego blocks. Showing examples of how an email can assemble will help teams understand the flexibility of the design system.
8. Test, iterate, repeat. The periodical nature of email lends itself well to design iteration. Use available data to improve your core design, remembering that a better experience is usually more important than any single data point. Don’t reinvent the wheel every time you send an email; rather, make continual incremental changes as warranted by performance. The benefits of a modular design workflow should make these incremental changes fairly painless as you swap components in and out. The important thing is not to let your designs stagnate.
9. Maintain your pattern library. As new use cases arise, create and add new modular patterns to the design system. Update existing modules based on testing and performance. Keep the design system up to date and organized. Leaving modules and components scattered or out of sync will make the system difficult to use.

Introducing a modular approach along with a custom design system into your email workflow can lead to increased efficiency, decrease production costs, and make it easier for you to iterate and innovate on your designs. Sure, it requires an initial investment of time to get everything up and running. But if you send a decent volume of emails and are willing to make the initial investment, the result will improve your designs and the customer experience, and your engagement rates will lead to a boost in revenue.

Up next: Cross-Channel Design Systems