What is an Email Design System?

What is an Email Design System?

An Email Design System in Taxi is a HTML document that includes all of the modular elements that will be used by your brand to create email campaigns, and defines how they can and can't be changed when marketers add content.

You may have seen "master templates" and "modular templates" — these can mean different things to different people. Often a brand would use multiple templates for different types of email, without any flexibility in their layout. An Email Design System is an improvement here because you can reduce the amount of code you need to look after, and give marketers more, but measured, flexibility. When starting out the process of setting up your Design System, you'll need to consider:

• Planning out what type of emails you want to create from it and what they will look like. 
• Determining what types of layouts and elements you'll need to include in your design.
• Creating brand guidelines that set out rules to be followed during the design process. These can cover everything from brand colours, to the fonts used throughout. 
• Ensuring to have a general design and brand guidelines finalised before building your Design System, this will dramatically speed up the build process and ensure nothing is missed. 

Your HTML will contain all the modules you've defined in the design phase as well as any styling options you could need for any of your emails. All emails are created using this one template and further updates to the HTML can be made once, with any emails created prior to this inheriting these updates. 

How does an Email Design System help my team?

An Email Design System acts as a single source of truth for all email campaigns created, and contains all of the possible branded design and content options that you need to create any of your emails in Taxi. Think of it as a library of all the different content blocks (we call them modules),  fonts, colours or anything else you use to build your campaigns. This will save you time when building your emails because:

• You'll have a one HTML that contains all possible modules, meaning creating different email campaigns will all come from the same code. 
• It will eradicate the need to build and maintain multiple HTML templates.
• It reduces room for error when managing the HTML for your emails. 
• If you use multiple HTML files for different emails, it can be difficult to make sure that the correct most up to date code is used across them all. Having it all in one place means that once you've tested this code you know any emails created will have the same quality HTML.

Made by email designers and developers  — used by many people in the organisation

It's a challenge to keep up to speed with making sure your code is rendering across different email clients and devices, and this can be made more difficult when you have to replicate any fixes across to pre existing emails and the templates you use to build them.

A Design System in Taxi dramatically speeds this process up for you. You simply make these amends once to the HTML, then any emails created from the Design System will inherit these changes. Whether you're adding a new module or addressing a rendering issue, this will reduce the time spent maintaining code throughout multiple HTML templates. 

Working from just one HTML means:

• The Design System can be a living tool, HTML that can constantly be updated and maintained by email designers and developers. 
• Instead of coding a new email template every time one is needed or duplicating the last email sent and amending that code, time can be spent maintaining and improving the Design System HTML. 
• The time that would have been spent making constant smaller updates to individual campaigns, can now be better used to create assets like animated gifs and testing out the latest code techniques. 

What does an Email Design System mean in Taxi?

Once the Design System is built, Taxi's editor then enables other members of the marketing team to use it to create email campaigns. A goal of Taxi is to empower every member of the marketing team and enable them to all work within one tool which can remove multiple steps from your process. For example, writing directly into the email, instead of providing copy via a word doc, it gives editors more context on what they are writing for. All whilst giving the developers peace of mind that their HTML will remain untouched. The benefits of this are:

• The options available in the Taxi editor are 100% determined by the code that you put in, which gives you complete control over how your emails will be created. 
• What you want your end users to be able to drag and drop when creating your emails; is determined by the HTML you upload for your Design System. Everything from what modules you need to create emails, down to the details such as padding, font sizes and brand colours is completely determined by you.
• Not only will this tailor the Taxi editor to your exact needs, it also makes it impossible for your team to break the HTML or use anything that is off brand.  
• Anything that is supported in email is supported in Taxi, giving you freedom to be creative with your designs and what type of modules you want to include in your design system.

Next: Getting started with building your Email Design System.