How To Brand Transactional Emails

If you’re anything like me, a dinosaur in internet years, you’ll remember the painful days of building email templates with tables, images, and css-inliners. If your template had a logo in it, you could consider your email branded.

However for the modern customer journey, this just doesn’t cut it. And as more products rely on digital touchpoints, the importance of branded content has extended to emails. In this guide, we’re covering the fundamentals of transactional email branding, showcasing real-world examples, so that user experiences remain seamless from website to inbox and back again.

Why does branding transactional emails matter?

Whether if it’s a purchase, a registration, or just a thank you, transactional emails are often the first point of contact with customers interacting with your website, app, or platform.

First impressions matter and this scenario can be make or break for a user’s experience. Just like Shakira’s hips, the numbers don’t lie. There are more than a few statistics that support the need for great branding and design.

• 93% of customers would consider choosing a rival brand following a negative transactional email experience
• 12% of consumers say transactional emails that match a brand’s website is the most important aspect of the journey.
• 28% of consumers crave emails in which they can easily find the message they are looking for.
• 80% of consumers will delete an email if it doesn’t look good on their device.

How to brand transactional emails

With the “why” taken care of, here’s the “how” of branding transactional emails. There are two major elements that you should be considering: design and copy. Let’s start with the basics.

Start with color

While there are few shortcuts when it comes to design, the use of color is one of the easiest ways to establish a relationship to your brand. Because of its innate connection to emotion, the psychology of color has a profound impact on brand awareness.

Luckily most if not all design decisions should already be established in brand guidelines, style guides, or design systems. All that’s left is a matter of translation, transferring these color palettes to email templates.

Match your typography

Just like CSS and responsive design, typography has come a long way when it comes to email rendering. In 2020, we’re no longer limited to web safe fonts or creating image sprites to match our designs. Instead with progressive enhancements, we’ve never been closer to matching the beautiful typography on our websites, with fallbacks just in case.

You’ll have three different options to import custom web fonts in your email. You can use an import statement, the link tag, or the @font-face directive in your stylesheet. Litmus has an amazingly comprehensive guide to web fonts, with the pros and cons for each of these solutions.

Top it off with brand collateral

While color and typography are the seeds of great branding, brand collateral will bring that extra “oomph” to your transactional emails. Whether if it’s through illustration, photography or custom-made GIFs, leveraging media will capture more of your audience’s attention and help solidify your brand recognition.

Just be sure not to over do it. Remember that transactional emails are about conveying important information about a recent interaction. Adding too many superfluous visuals could distract from that original intent.

Don’t forget about the copy

Is your brand friendly, serious, or professional? Whatever your tone of voice is, ensure that you’re crafting copy across all digital channels. Your voice is an extension of your brand, and transactional emails are the perfect channel to showcase this personality. If you’re looking for inspiration, Voice and Tone Guides has a curated collection of writing guides from some of the web’s most respected content teams.

The tools of the trade

Chances are, this won’t be the first or last transactional email that you’ll need to create. It’s one thing to craft one beautifully branded email, but once your platform begins to scale, a system needs to be in place to generate these templates on demand.

With the tools listed below, you’ll be able to build fast while still ensuring brand guidelines are followed.

Passport

The easiest way to get started building your own transactional emails is with Passport. The WYSIWYG email editor features drag-and-drop blocks, real-time collaboration, and responsive email output compatible for all screens.

But the feature that works so well for branded templates is the ability to save your favorite email sections for re-use. Being able to create one shared resource among all your templates ensures consistency across all your emails, especially when working within a team of multiple designers.

MJML

If you’re on a digital team that requires “pixel perfect” templates, sometimes a WYSIWYG editor can be limiting. Many designers and developers take a more granular approach to their craft and require tools that give them the freedom to customize to their heart’s content. This is where a framework like MJML really comes to the rescue.

MJML is a markup language that abstracts some of the most popular components found in emails and makes them straightforward to use. In addition to the high-quality HTML output it produces, it has an incredible library for responsive email components. From the basics such as buttons to complex solutions like carousels and accordions (which you didn’t even think were possible in email), MJML helps digital teams build transactional emails at a much faster pace.

SaaS template creator

Lastly, if this all sounds a little too overwhelming, there’s a secret industry shortcut. The SaaS Templates Creator will apply all the principles listed above and create “Auto-Magically Branded Email Templates for SaaS”. It doesn’t get much better than having all the work done for you.

Wrapping Up

Well there you have it. Through the use of design fundamentals, copy, and various tools of the trade, your transactional emails will have everything they need to leave a lasting impression with your customers.

***

This post was written by Michael Ngo. Michael is your friendly neighborhood front-end developer. ou can read more of his writing at hellomichael.com.