Skip to content
Home » Blog » Accelerate Productivity and Collaboration With an Email Design System

Accelerate Productivity and Collaboration With an Email Design System

  • by

If you haven’t heard, there’s an entire mess of parents that self-identify as #emailgeeks. Ted Goas is one in every of them. And he’s probably the greatest types—Ted is aware of hundreds about email advertising, and he’ll generously share that data with anybody within the email group. Plus, he’s eternally studying and evolving himself. Model geek, for certain!

Ted is a Principal Product Designer at Stack Overflow—the world’s largest Q&A platform for software program builders. And I used to be thrilled to see Ted toss a hat within the ring to talk at Iterable Activate this yr about email design techniques. It’s a sizzling matter!

Email design techniques are a terrific option to velocity email manufacturing and reinforce model requirements, however they’re not but terribly widespread. So we had been fortunate to have Ted with us to elucidate how you can construct one from scratch throughout his session, “Design Systems for Email: Bring Order to the Chaos.”

Ted’s been working within the email biz since 2007 and by way of the years, he usually discovered email applications to be manageable by a small, nimble staff. But in 2016, he joined Stack Overflow and was confronted with some contemporary challenges.

Dozens of decentralized product groups had been tasked with sending their very own emails, and email quantity in a typical week reached 4 million—a quantity that might double or triple every so often!

The end result was a little bit of chaos. A excessive degree of effort was concerned with creating email advertising from scratch. Messages had been usually off-brand and inconsistent throughout groups. And with out email specialists devoted to marketing campaign help, damaged hyperlinks and janky rendering points had been a bit too widespread.

Stack Overflow wanted an answer to generate high quality email advertising at scale with out infringing on the autonomy of the varied product groups. And an email design system was the answer.

So What Is an Email Design System Exactly?

Ted says a superb email design system combines detailed documentation with parts of a model’s sample library and type information. The deliverable is a group of reusable elements tailor-made to the email channel.

He describes an email design system as a pile of LEGO bricks that may be simply combined and matched to create an email. Each particular person LEGO is already pre-approved, pre-tested, and able to go.

You can discover Stack Overflow’s email design system right here:

It’s an spectacular, strong information to email creation that may be leveraged by anybody at Stack Overflow. But in case you’re seeking to create an email design system of your individual, it might be a bit intimidating!

Don’t fear although—you’re taking a look at months and months of effort by groups of individuals. Ted says the Stack Overflow email design system began fairly small and developed over time, and yours ought to too.

These are the 5 steps he went by way of to conceive and create an email design system:

1. Feel the ache (of not having a system)

There was beforehand no course of for email design and improvement at Stack Overflow. And the few of us who did have some email experience had been unwittingly creating bottlenecks. Broken emails had been getting out the door commonly. This was harming buyer expertise and belief within the model.

Ted’s level right here? If you’re not experiencing true ache, then possibly you don’t want a design system. But Stack Overflow was positively feeling ache that required a treatment.

2. Make it official

Ted’s first stabs at standardizing email occurred throughout spare moments between tasks. But progress was sluggish and inconsistent. Whenever he and his collaborators gained a little bit of momentum, they had been pulled into different tasks. Because the email design system was a aspect venture, there was no roadmap and no check-ins.

Ultimately it turned essential to get buy-in from management to escalate it to a sanctioned venture. Ted made a four-pronged argument in favor of this:

  • Time. An email design system would enable extra folks to work on email, and unencumber everybody to work on different issues. It can be a productiveness win.
  • Money. At Stack Overflow, email drives platform adoption, and platform adoption drives income. Plus, an email design system would restrict the necessity for outsourced expertise or in-house specialists.
  • Consistency. By codifying widespread parts, wildly off-brand emails would not be distributed.
  • Education. Detailed documentation can be out there 24/7 to anybody who wanted it, and these with email experience would not be bottlenecks within the manufacturing course of.

Ted says to suppose just like the boss: They won’t care an excessive amount of a couple of funky CTA button right here and there, however an further 5 hours spent QA-ing an email or misplaced gross sales tied to a damaged hyperlink? Those are points that can get the eye of parents on the prime.

Explain the issues that exist and estimate the assets essential to unravel them to speak in phrases that senior management will respect.

3. Start small and contain others early

Stack Overflow’s email design system began small—actually small! It was only a clean Google doc with shared modifying rights. Marketing, engineering, product administration, and even authorized had been invited to brainstorm collaboratively earlier than anybody spent a second making a line of email code.

Ted says inviting numerous of us to get entangled on the outset invited numerous views, prevented silos, inspired future adoption, and finally produced a greater product. More folks will adhere to your email design system in the event that they really feel like they’re a part of the method.

4. It doesn’t need to be full to be helpful

Ted advises that you just produce the primary model of your email design system as rapidly as attainable. And it may be extremely easy. Stack Overflow’s was! The preliminary model included one picture, a few typography types, one button, and a responsive wrapper. 

And folks began utilizing it.

Over time, extra photographs had been added, together with tags and multi-column layouts. And later, extra button types, background photographs, and specialty templates had been constructed out.

By introducing easy, dwelling tips to start out, customers can supply suggestions to assist drive the following iteration and past. Two-way communication may also help prioritize future releases.

5. Double-down on documentation

Ted says that documentation is an important a part of your email design system. It particulars the what, how, when and why. And that context is de facto necessary. Ted likens email design elements with out documentation to throwing a bunch of IKEA components on a desk with out directions and telling somebody to construct a bookshelf.

Good documentation drives adoption. And these are Ted’s suggestions for documenting successfully:

  • Document as you go, each step of the journey. Explain what you explored alongside the best way, and any associated conversations and debates. This prevents the identical debates from occurring over and over once more.
  • Use real-time modifying instruments like Google Docs. You want a single supply of reality when you’re working with a number of contributors. Local copies of documentation will be problematic in these conditions.
  • Get an editor. You in all probability don’t write that nicely! This doesn’t imply you shouldn’t write, however a second set of eyes will likely be helpful.
  • Don’t simply doc phrases. Diagrams, system previews, responsive states, animations and anything that may get the purpose throughout is effective.

Ted’s Parting Words of Wisdom

Ted is de facto pleased with the outcomes Stack Overflow’s email design system has delivered. He’s already seeing numerous folks with out a lot expertise construct terrific emails.

If you’re nonetheless feeling iffy concerning the attainable tradeoffs of an email design system, don’t. Ted says a design system doesn’t change the necessity for a designer, nor does it imply all emails should look precisely the identical. But it certain does make it so much simpler to construct and take a look at emails.

Be certain to take a look at the on-demand model of Ted’s Activate 19 session. And once you’re prepared to maneuver ahead with an email design system of your individual, be aware that you just don’t overcomplicate it.

And don’t overlook, there’s an entire #emailgeeks group on the market that’s keen to share with you, and you’d be stunned what you may be capable of share in return. So get entangled. Find your tribe.

Iterable purchasers can discover their tribe by becoming a member of the Iterable Community—the place the place email geeks who use our platform can construct their community, get their questions answered and affect our personal product roadmap with characteristic requests. Come be part of us!

Leave a Reply

Your email address will not be published. Required fields are marked *