How an Email Design System Can Save Your Holiday Season

In every marketer’s calendar, you’ll find one date, the Friday after Thanksgiving, marked red. It tends to cause stress and headaches to a lot of people, even before the actual date comes.

If it were just 1 day, like some national holiday sales, we guess it'd be fine. But it usually signifies the beginning of the holiday marketing period, from November 25 until New Year's Eve. Some brands even start as early as November 1.

And it makes sense to start early, right? Customers also start their research well in advance — or to be more specific — even up to 12 weeks before.*

When it comes to Q4, a.k.a. the busiest, craziest period of the year, most marketers and brands find themselves short on time and without enough resources to send out all those campaigns they planned.

That's where a detailed email design system comes in. Now you may already have a master email template or a number of smaller ones, but that helps you in the actual development, not the design part.

In other words, while a template will help you reduce the hours you spend developing a specific email, an email design system will allow you to design literally any email you can think of.

It's usually created in either Adobe XD or Figma. It's quite large and contains all the modules, icons, assets, typography, etc. Basically, it's every designer's dream as they're often left to scour the web in search of assets or go through multiple links and folders to find an icon or a logo.
An example of an email design system
An example of an Email Design System done in Adobe XD
Using only master templates in the past usually meant an email design would be done in about 8-10 hours on average. For most brands sending out 15 emails a month, it's a lot. And that's not even considering that the number of campaigns usually doubles during the holidays nor does it consider other steps that come before and after the design.

Our research found that some brands and agencies even take a couple of days to design and develop a single email.** On the other hand, our designs tend to take around 1-2 hours an email. That’s almost 5 times faster!

Now while that's not only due to detailed email design systems and there are other aspects to account for, such as skill and expertise in email design, it's still much faster than your average email production.

Figma's research affirms our findings too. They found that those with access to design systems complete their tasks 34% faster than those without it.***

And you know all those times you had to give feedback that some parts of the email are just off-brand? Well, with an email design system, that shouldn't be the case, as every designer will have instant access to already set fonts, font sizes, colors, icons, logos, the DOs and the DON'Ts, etc.

So how do you get your email design system ready for the craziest period of the year? Well, let's see.

Brand Elements

First of all, the must-haves of any email design system are the brand elements:

  • Logo(s)
  • Brand colors
  • Different fonts and font sizes (plus use cases)
  • Icons and trust symbols
  • Assets (imagery and key photos from the brand book)

Once you import everything into Adobe XD (or Figma) make sure to add it as separate components so that you can start building your library of editable and reusable elements.

Adapting the Brand Elements

Now that you imported everything, look at how you can reuse the elements or adapt them to fit the holiday sales you'll be running soon. For Black Friday, most brands opt to change their colors to a darker shade or opt for black entirely. Other brands keep their colors but change their fonts to custom ones that stand out more.

Regardless of what you do, you want to keep what you need for the holiday period and remove the rest. Keeping extra files that designers shouldn't use will most likely lead to internal delays and reworks.

Remember, we're building this email design system specifically for the holiday period. If you want to build a master one for other seasons and emails, better do it in another file.

Organizing Images and Photos

The same advice as above applies here. If you have a ton of folders and photos that you use on a regular basis, it's worth spending some time and reorganizing that so it's more accessible to designers.

Even something as simple as creating a separate images folder for the holiday emails instead of having to browse through thousands of pictures or assets will help your designers do things much faster.

The DOs and the DON'Ts

This may go without saying, but we want to say it anyways. Don't make your designers have to spend half an hour figuring out which module to use. If there's something you want to use but it has a specific use case, let's say only in a holiday new arrivals email that you'll be sending 1 time in December, then mention that above the module with big letters, and bold it.

Better yet, don’t write it, SHOW it!

See what we did there? But really, what we mean is the design system should be a place where you have all the elements needed. That doesn’t mean that you need to stock up on things and have designers guessing and debating for half an hour about what should be used.

And if they can't figure it out on their own, they'll eventually go back to you with a question, which then leads to going back and forth with them over something that could've been avoided with a simple "Use this banner only for New Arrivals".

Make it Accessible to Everyone

Remember what we mentioned above about making sure to add it as separate components in Adobe's library? Well, this is why.

Any icons, CTAs, trust symbols, KSPs, and brand elements will be that much easier to use if you add them separately and make them editable. You can reuse them in Photoshop or Illustrator without the need to go back and forth between folders or applications.

Modules and Sections

With an email design system, you can go a step further and create modules to show how a certain section should look in the actual email. Testimonial blocks, product blocks, shipping banners, etc. You can just change the copy and voilà! Ready for development in a matter of seconds.
An example of a product block from an email design system
An example of a product block from an email design system
An example of a testimonial block from an email design system
An example of a testimonial block from an email design system

Master Templates

Ultimately, the very last step you can take is to create a master template in the email design system, including all the modules that you are planning to use for your holiday campaigns, and see how they all fit together. That way you’ll also have everything in one place and when needed, you can just reorder the modules or switch out the copy and photos.

Another option is also creating smaller templates to be used for different types of emails that you are planning to send. Some examples would be a New Arrivals template, Product Feature template, Sitewide Sale template, Last Chance template, etc.
Some final thoughts
One very important thing to remember — collaboration is key! Creating an extensive design system only to have 1 person use it is not really the best use of resources. So, invite everyone to the party.

By having everything in one place, your designers should be able to collaborate and contribute more easily. Oh, and as things change, continue updating your design system so that it only has the most relevant components and modules.
Image of Milos Rakic, Head of Operations at the Better Creative
Milos Rakic
Head of Operations @ The Better Creative
October 11, 2022

Need help creating an email design system?

Schedule a FREE consultation and get your system ready in time for the holidays.