The following blog post was written by Laura Sullivan, VP, Creative Director at BrightWave.
Ask 100 email geeks what a template is and you’ll get 100 different answers. Full disclosure, that drives us a tad bit crazy. As thought leaders at BrightWave, we seek to define for ourselves and our community what exactly a template is so that we can all have a lingua franca: It’s not a single email send, but a multi-use layout or system that can help create efficiency and consistency in an email program.
The BrightWave team uses these design systems to create incredibly relevant, data-driven programs, and we think this is the future of email. Movable Ink has been a great partner for helping us populate modules within our template with up-to-the-minute personalized content.
We’re also seeking to push the boundaries of what a template can be. Enter The Universal Template, a way of thinking about design and development that allows you to accomplish any email in your program with a single, component-based framework. Think of it as one massive, long email “template” in which the desired components can be “turned on” when needed, so you can quickly send out literally any email message with less effort.
And we think this type of do-everything template will become increasingly necessary in our data-driven, highly personalized digital landscape. (No, we didn’t say digital transformation, but it was tempting.) In order to accomplish this email black magic, you’ll need to have a harmonious collaboration between data and design, tech and brand. Read on for the creative perspective on creating smart design systems.
Creative Framework for the Universal Template
Creating a smart email design system can be a bit of an up-front investment, from both a content production and design standpoint. But the efficiency that you gain on the other side is well worth the effort in our experience. Here are the basic work steps to create a good looking system that does some serious heavy lifting:
1. Think about the various use cases in your email program and create a library of the components that you’ll need.
Perhaps you need a few different hero options, with one layout that features a lifestyle image and one that’s more product-focused. Perhaps you need some secondary components that are based on recent app usage or feature particular offers. Map out all of the different message types you send and design these components—leaving one straightforward component as a catch-all for any quick turn requests.
Here’s an example from one of our clients:
2. Tightly lock down the look and feel, so that all components work together.
Next, you’ll need to decide on the visual elements of your email program, using any existing brand guidelines as a north star. What will your font stack look like, taking hosted web fonts and email-safe fallback fonts into account? What will your main button style be? What about any text links? Creating rules around the look and feel will help all of the components look great together, which is very necessary.
Here are some examples of our thinking from that same client:
3. Govern the system with a Playbook, so that it is easy to collaborate.
Organize all of these decided upon rules and component types in a Playbook or simple visual toolkit that can be picked up by any designer, marketer or content creator. There’s a good chance you’ll need to frequently update the Playbook as your business and program grows and changes, and that’s a good thing.
That Playbook may look something like this:
4. Use smart design tool, like Sketch, to help you not go crazy.
After creating this intelligent system and documented it, architect a single design file that has every component type in it, so it can be easily pulled in as the content dictates. We highly recommend Sketch as an alternative to Photoshop, since all of the components can be easily created and updated across many designs using Sketch’s symbol library.
Here’s an example of those content blocks:
