If you haven’t heard, there’s a whole mess of folks that self-identify as #emailgeeks. Ted Goas is one of them. And he’s one of the best sorts—Ted knows loads about email marketing, and he’ll generously share that knowledge with anyone in the email community. Plus, he’s forever learning and evolving himself. Model geek, for sure!
Ted is a Principal Product Designer at Stack Overflow—the world’s largest Q&A platform for software developers. And I was thrilled to see Ted toss a hat in the ring to speak at Iterable Activate this year about email design systems. It’s a hot topic!
Email design systems are a terrific way to speed email production and reinforce brand standards, but they’re not yet terribly widespread. So we were lucky to have Ted with us to explain how to build one from scratch during his session, “Design Systems for Email: Bring Order to the Chaos.”
Ted’s been working in the email biz since 2007 and through the years, he generally found email programs to be manageable by a small, nimble team. But in 2016, he joined Stack Overflow and was faced with some fresh challenges.
Dozens of decentralized product teams were tasked with sending their own emails, and email volume in a typical week reached 4 million—a number that could double or triple on occasion!
The result was a bit of chaos. A high level of effort was involved with creating email marketing from scratch. Messages were often off-brand and inconsistent across teams. And without email specialists dedicated to campaign support, broken links and janky rendering issues were a bit too common.
Stack Overflow needed a solution to generate quality email marketing at scale without infringing on the autonomy of the various product teams. And an email design system was the solution.
So What Is an Email Design System Exactly?
Ted says a good email design system combines detailed documentation with elements of a brand’s pattern library and style guide. The deliverable is a collection of reusable components tailored to the email channel.
He describes an email design system as a pile of LEGO bricks that can be easily mixed and matched to create an email. Each individual LEGO is already pre-approved, pre-tested, and ready to go.
You can find Stack Overflow’s email design system here: https://stackoverflow.design/email
It’s an impressive, robust guide to email creation that can be leveraged by anyone at Stack Overflow. But if you’re looking to create an email design system of your own, it may be a bit intimidating!
Don’t worry though—you’re looking at months and months of effort by teams of people. Ted says the Stack Overflow email design system started quite small and evolved over time, and yours should too.
These are the five steps he went through to conceive and create an email design system:
1. Feel the pain (of not having a system)
There was previously no process for email design and development at Stack Overflow. And the few folks who did have some email expertise were unwittingly creating bottlenecks. Broken emails were getting out the door regularly. This was harming customer experience and trust in the brand.
Ted’s point here? If you’re not experiencing true pain, then maybe you don’t need a design system. But Stack Overflow was definitely feeling pain that required a remedy.
2. Make it official
Ted’s first stabs at standardizing email happened during spare moments between projects. But progress was slow and inconsistent. Whenever he and his collaborators gained a bit of momentum, they were pulled into other projects. Because the email design system was a side project, there was no roadmap and no check-ins.
Ultimately it became necessary to get buy-in from leadership to escalate it to a sanctioned project. Ted made a four-pronged argument in favor of this:
- Time. An email design system would allow more people to work on email, and free up everyone to work on other things. It would be a productivity win.
- Money. At Stack Overflow, email drives platform adoption, and platform adoption drives revenue. Plus, an email design system would limit the need for outsourced talent or in-house specialists.
- Consistency. By codifying common elements, wildly off-brand emails would no longer be distributed.
- Education. Detailed documentation would be available 24/7 to anyone who needed it, and those with email expertise would no longer be bottlenecks in the production process.
Ted says to think like the boss: They might not care too much about a funky CTA button here and there, but an extra five hours spent QA-ing an email or lost sales tied to a broken link? Those are issues that will get the attention of folks at the top.
Explain the problems that exist and estimate the resources necessary to solve them to communicate in terms that senior leadership will appreciate.
3. Start small and involve others early
Stack Overflow’s email design system started small—really small! It was just a blank Google document with shared editing rights. Marketing, engineering, product management, and even legal were invited to brainstorm collaboratively before anyone spent a moment creating a line of email code.
Ted says inviting lots of folks to get involved at the outset invited diverse perspectives, prevented silos, encouraged future adoption, and ultimately produced a better product. More people will adhere to your email design system if they feel like they’re part of the process.
4. It doesn’t have to be complete to be useful
Ted advises that you produce the first version of your email design system as quickly as possible. And it can be incredibly simple. Stack Overflow’s was! The initial version included one image, a couple of typography styles, one button, and a responsive wrapper.
And people started using it.
Over time, more images were added, along with tags and multi-column layouts. And later, more button styles, background images, and specialty templates were built out.
By introducing simple, living guidelines to start, users can offer feedback to help drive the next iteration and beyond. Two-way communication can help prioritize future releases.
5. Double-down on documentation
Ted says that documentation is the most important part of your email design system. It details the what, how, when and why. And that context is really important. Ted likens email design components without documentation to throwing a bunch of IKEA parts on a table without instructions and telling someone to build a bookshelf.
Good documentation drives adoption. And these are Ted’s tips for documenting effectively:
- Document as you go, every step of the journey. Explain what you explored along the way, and any related conversations and debates. This prevents the same debates from happening over and over again.
- Use real-time editing tools like Google Docs. You need a single source of truth when you are working with multiple contributors. Local copies of documentation can be problematic in those situations.
- Get an editor. You probably don’t write that well! This doesn’t mean you shouldn’t write, but a second set of eyes will be useful.
- Don’t just document words. Diagrams, device previews, responsive states, animations and anything else that might get the point across is valuable.
Ted’s Parting Words of Wisdom
Ted is really proud of the results Stack Overflow’s email design system has delivered. He’s already seeing lots of people without much experience build terrific emails.
If you’re still feeling iffy about the possible tradeoffs of an email design system, don’t. Ted says a design system doesn’t replace the need for a designer, nor does it mean all emails must look exactly the same. But it sure does make it a lot easier to build and test emails.
Be sure to check out the on-demand version of Ted’s Activate 19 session. And when you’re ready to move forward with an email design system of your own, be mindful that you don’t overcomplicate it.
And don’t forget, there’s a whole #emailgeeks community out there that’s willing to share with you, and you’d be surprised what you might be able to share in return. So get involved. Find your tribe.
Iterable clients can find their tribe by joining the Iterable Community—the place where email geeks who use our platform can build their network, get their questions answered and influence our own product roadmap with feature requests. Come join us!
