Email Design Systems: Introduction
Design Systems is a term that we see everywhere now, whether applied to web, apps and email. So what is an “Email Design System”? One thing it is is a big can of worms, but it’s probably best to start with the definition for modular design, which design systems have their roots in. To Wikipedia we go:
“[a design approach] that subdivides a system into smaller parts called modules…that can be independently created and then used in different systems.” — Wikipedia
Why is a Design System something your team would want to create and use for email?
I’ll borrow the benefits list for a design system from Courtney Clark at Forum One and adapt it for email:
- Scale — If your team is currently coding each email from scratch or cobbling things together Frankenstein style, those are not exactly scalable scenarios. Think about how many emails you send today vs a month ago, vs one year ago, vs several years ago. Has it grown? Will it continue to grow? The answer is most likely “yes,” so you’ll want to change your process to a scalable one to make your growth goals possible.
- Consistency — Your subscribers should always know an email is coming from you. The send name and logo does the heavy lifting, but the rest of the design should be contributing, too, as design consistency is directly tied to user trust (1, 2). Need more convincing? Design has a huge impact on your bottom line. Via Fast Company: “…design-led companies had 32% more revenue and 56% higher total returns to shareholders compared with other companies.”
- Efficiency — According to the Litmus 2018 State of Email Workflows, design and coding are two of the three most time-intensive tasks of email production. Wouldn’t it be nice to save time on those two tasks?
- Teamwork — When everyone uses the same workflow, it makes it easier to get things done.
- Bonus benefit! Less errors and easier last-minute changes — These both tie into consistency and efficiency, but worthy of their own callout.
Franksteining previous emails together can mean code errors, but Email Design Systems help avoid errors because of their pre-built nature. And last-minute changes? Those too can contribute to errors. 72% of email marketers say that they make last-minute changes at least sometimes.
We’re all human, we all get tired and, if we have to work fast, the chance for error rises. Even the slightest typo in your code may mean the rendering of your email breaks. An Email Design System makes it easy to pivot or swap content fast when you need to with less risk of errors because it’s pre-built!
That being said, maybe don’t advertise that last benefit too loudly … we also don’t want to encourage bad habits from stakeholders as constant changes still mean at least a little bit of lift, even in the design systems world. :)
If you’re now convinced that an Email Design System is something your team should create, great! So now what?
If you want to start an Email Design System from the ground up, you could do a lot worse than starting with Brad Frost’s Atomic Design series — especially Chapter 2, which covers Atomic Design Methodology. In an ideal world, Atomic Design Methodology is where I would have started when building out an Email Design System.
However, that is not how I started out building an Email Design System at my current role.
Zillow Group has many brands under its umbrella, and though it’s not exactly a small company, some brand teams are smaller than others. When I started my current role with one of the ZG brands, I was literally the first hire on that brand’s design team.
There were emails already in-flight being worked on by an outside agency, other emails in-flight being Frankensteined together by the marketing team and new emails already planned in the queue for me to create. And, with no other brand designers at the time, I was the brand design team. There wasn’t just email to work on: some sort of clearer brand design foundation needed to be established, social media assets were needed, printed materials were being requested and I was even working on PowerPoint templates. Thankfully a brand design manager was hired a few months later, but it was still just the two of us for a little over a year.
In other words, I had to try and build the “Email Design System plane” while still riding the very busy, fast and bursting-at-the-seams “All Things Brand Design plane.” It was an exciting and scrappy time for the brand, but not exactly ideal conditions to get into the nitty gritty of Frost’s Atomic Design.
If this scenario sounds familiar — or if your email team is extremely ingrained in current process that is starting from the ground up — then Atomic Design may not be feasible. But this Email Design System series might be just what you need.
