Design Systems for Email: Bring Order to the Chaos

A presentation at Iterable Activate in April 2019 in San Francisco, CA, USA by Ted Goas

Slide 1

Slide 1

Design Systems for Email: Bring Order to the Chaos

Slide 2

Slide 2

Ted Goas Sr. Product Designer, Stack Overflow @tedgoas

Slide 3

Slide 3

Humble beginnings

Slide 4

Slide 4

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

Slide 5

Slide 5

Email landscape Inconsistent Expensive Broken

Slide 6

Slide 6

What is a design system?

Slide 7

Slide 7

Spotify brand guidelines

Slide 8

Slide 8

Mailchimp patterns

Slide 9

Slide 9

“ 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

Slide 10

Slide 10

Shopify design system

Slide 11

Slide 11

Stack Overflow design system

Slide 12

Slide 12

Slide 13

Slide 13

  1. Feel the pain

Slide 14

Slide 14

Photo credit: Matt Artz, unsplash

Slide 15

Slide 15

Slide 16

Slide 16

  1. Make it official

Slide 17

Slide 17

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

Slide 18

Slide 18

Slide 19

Slide 19

Making our case Time Money Consistency Education

Slide 20

Slide 20

“ 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…

Slide 21

Slide 21

  1. Start small, involve others early

Slide 22

Slide 22

Atlassian design system

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

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

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

  1. Double down on documentation

Slide 32

Slide 32

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

Slide 33

Slide 33

Slide 34

Slide 34

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

Slide 35

Slide 35

“ 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

Slide 36

Slide 36

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

Slide 37

Slide 37

“ 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…

Slide 38

Slide 38

“ 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

Slide 39

Slide 39

Slide 40

Slide 40

Photo credit: rawpixel, unsplash

Slide 41

Slide 41

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