Auditing Your Email Design System
Design systems are a helpful tool in the email development workflow. They save time by having a starting point for components that are used when building an email. If you do not already have a design system, knowing where to start and how to make one, can be overwhelming. This post will walk through the process of auditing your existing emails to start the design system build process. In the audit phase, we’ll analyze trends and inconsistencies across your emails. Then, we’ll use that as a plan for building out our design system.
Table of content
An introduction to design systems
First, let's talk about what a design system is and why they are beneficial. InVision describes a design system as "...a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” The real benefit of having a design system is that it saves time by outlining how elements or components such as buttons, links, or promotional sections should be styled. They often include written directions such as what brand colors can be used, fonts, and sizing. I mentioned earlier that they serve a reference. With a design system, developers or designers do not need to start from scratch, or piece together parts from previous emails. This helps to avoid duplicating older, outdated code—and possibly broken code—into new email campaigns.Auditing your existing emails
The next step in creating your email design system is to take a step back to audit your existing emails.Why do I need to do an audit?
Let's think about it this way. Measuring results is a big part of email marketing. Think about if you launched the best summer sale campaign ever and it got a 40% click to open rate. Is that good? It sounds like it! But, we don't know if it's better if we don't have the results of the previous year's campaign. Maybe the previous year had gotten a 60% click to open rate (we can dream, right?) In that case, our campaign didn't perform as well as we thought. However, if the previous year had a 35% click to open rate, that is an improvement we can celebrate. It's difficult to know where you are going if you don’t know where you are starting from. An audit of existing email elements, tells the story of how a design system can improve the existing state of email within your company.Audit time — show me your emails!
To get an idea of what your current email landscape looks like, you will need a sample of your emails. The number of emails in your sample will vary depending on your company, organization or team structure. Some things to keep in mind when thinking about which or how many emails to collect are:- Categories: Product, newsletter, alert, transactional, event, etc.
- Business unit: B2C, B2B, internal, corporate
Who should be involved in the audit process?
When starting a project like this, I highly recommend involving people from other teams or groups that are involved with or related to the email process. Beyond your email designers and developers, consider including representatives from marketing, leadership, product owners, or project managers. A benefit to involving other teams is that they may be aware of email examples, that you would not have thought of. Or, they may be able to help gather sample emails that they have worked on recently or been included on the test email for. Involving other groups allows you to see how having a design system may help them in the future. Other teams may be more willing to adopt a new design system if they are aware it is coming, and can contribute to it.Tools
Now that we have an idea of our scope and a team, let's chat about what tools we'll need to start auditing our emails. At the end of this, all we need are email samples. Depending on how emails are sent, saved, or stored in your company, samples can be collected in a few different ways. For example:- HTML files
- View in browser links
- .eml files
- Screenshots
Gathering
The first step is getting all your email samples—HTML files, pdfs, screenshots—into one place. If you expect a lot of email samples, grouping or naming them by type—B2B, transactional, etc—may be beneficial. I recommend taking a low-fidelity, pen and paper approach to auditing your emails. There’s something about looking at the printed paper in the real world that makes it easier to take it all in at once. Print out your samples and spread them out where you can see them all. If you prefer to work digitally, that's ok too! Email screenshots saved into a contact sheet and viewed as one large image will work.Analyzing for trends and inconsistencies
Now that you have your email samples in an easy to view format, you'll want to start grouping components. Try not to focus on categories like link styles or headline treatments. Group what looks similar and figure out the rest later. Grouping all buttons or links is a good place to start. Using buttons as an example, take a closer look at the examples you gathered. Some things to think about are:- How many different button styles do you have?
- Is there a need to have that many variations? Or can they be paired down to 1-2 options, both from a style and color choice perspective?
- Are there any brand, accessibility, or technical limitations to keep in mind?
Starting the Design System
Now that you’ve done the behind the scenes work of auditing your emails, you can start on the fun part—planning what the future of your design system will look like. You have a list of all components that are used to build your emails. From here, you can look at them as a whole, adjusting the components so that they are unified with each other and your brand guidelines. Each component should have:- Technical specifications: Width, height, spacing, font-size, color, etc.
- Use cases: This component can use one of three colors, except in this specific case, etc.
- Examples: Include visuals of how the components should be used.
Conclusion
Design systems are a helpful tool for maintaining consistency across email campaigns. The documentation of how your emails are built and what they are supposed to look like is beneficial to email designers, developers, and agencies. Auditing your existing emails gives insight to any outdated, off-brand, or legacy elements. It also gives you the opportunity to revisit technical concerns, like accessibility, mobile rendering, and rendering in dark mode.
