Design Systems for Email: Bring Order to the Chaos

Ted Goas Sr. Product Designer, Stack Overflow @tedgoas

Humble beginnings

2016 4 mil Email sends each week 70+ Categories (when we’re not promoting something)

Email landscape Inconsistent Expensive Broken

What is a design system?

Spotify brand guidelines

Mailchimp patterns

“ A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Marco Suarez Design consultant Previously at InVision, Etsy, and Mailchimp

Shopify design system

Stack Overflow design system

  1. Feel the pain

Photo credit: Matt Artz, unsplash

  1. Make it official

“ If a design system is treated as a side project, it’ll probably fail. Nathan Curtis Founder and Principal, EightShapes

Making our case Time Money Consistency Education

“ If you allow a small group of employees to build a design system, all these problems go away. It will cost you about X hours a week for Y months. Our sales pitch… basically…

  1. Start small, involve others early

Atlassian design system

  1. It doesn’t have to be complete to be useful

  1. Double down on documentation

“ Another flaw in human character is that everybody wants to build and nobody wants to do maintenance. Kurt Vonnegut

Photo credit: http://i.imgur.com/LPIrHp0.jpg

“ When building design systems, get into habit of documenting early. You’re building a system and that cannot work if the system is you. Karri Saarinen Principal Designer - Airbnb

Tips for writing documentation Document as you go Real time Get an editor Not just words

“ Me: Here’s how I make buttons. COWORKER: Great! Hey does this other, simpler way work too? ME: No of cours… ME: (researches) ME: Actually… yes…

“ One of the biggest impacts is people being able to get further without design help. […] It doesn’t mean you don’t need a designer—it’s just that other team members can get further than they could before. Diana Mounter Design systems manager - Github

Photo credit: rawpixel, unsplash

@tedgoas https://email.geeks.chat/ Thanks!