Keeping Subscribers Engaged in Your Design System

Slide 1

Slide 1 text

Keeping Subscribers Keeping Subscribers Engaged in Your Engaged in Your Design System Design System bit.ly/meade-design-systems bit.ly/meade-design-systems speakerdeck.com/catheraaine speakerdeck.com/catheraaine 1

Slide 2

Slide 2 text

Self Portrait with Straw Hat, 1887 by Vincent Van Gogh via VincentVanGogh.org 2

Slide 3

Slide 3 text

Self Portrait with Straw Hat, 1887 by Vincent Van Gogh via VincentVanGogh.org 3

Slide 4

Slide 4 text

Catherine Meade Catherine Meade DEVELOPER, SPARKBOX DEVELOPER, SPARKBOX she / her she / her @catheraaine @catheraaine 4

Slide 5

Slide 5 text

What is a Design What is a Design System? System? 5

Slide 6

Slide 6 text

DEFINE: DEFINE: Design System Design System 6

Slide 7

Slide 7 text

“A brand style guide is a document that codiﬁes how an organization presents itself to the world. Put another way, it’s a reference tool that helps maintain consistency by demonstrating what a brand looks, feels and sounds like.” 99designs.com/blog 7

Slide 8

Slide 8 text

designsystemssurvey.seesparkbox.com 8

Slide 9

Slide 9 text

DEFINE: DEFINE: Design System Design System 9

Slide 10

Slide 10 text

Design System Design System Pattern Library Pattern Library Style Guide Style Guide 10

Slide 11

Slide 11 text

DEFINE: DEFINE: Subscriber Subscriber 11

Slide 12

Slide 12 text

So what's the problem? So what's the problem? 12

Slide 13

Slide 13 text

NOT ASKING: NOT ASKING: How do I get people on board with building a How do I get people on board with building a design system? design system? 13

Slide 14

Slide 14 text

How do we encourage people How do we encourage people to keep using our design to keep using our design system? system? 14

Slide 15

Slide 15 text

designsystemssurvey.seesparkbox.com 15

Slide 16

Slide 16 text

THE ANSWER: THE ANSWER: Your Design System Your Design System = Your Product. = Your Product. 16

Slide 17

Slide 17 text

THE ANSWER: THE ANSWER: Your Design System Your Design System = Your = Your Desirable, Desirable, Funded, Funded, Teachable, Teachable, Attentive, Attentive, Documented, Documented, Adaptable, Adaptable, Branded Branded Product. Product. 17

Slide 18

Slide 18 text

Desirable Desirable 18

Slide 19

Slide 19 text

Find a frustration point your Find a frustration point your subscribers have, and ease it. subscribers have, and ease it. 19

Slide 20

Slide 20 text

BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Have an Ambassador Have an Ambassador 20

Slide 21

Slide 21 text

BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Hold Stakeholder Interviews Hold Stakeholder Interviews 21

Slide 22

Slide 22 text

Hubspot Hubspot "Your system should be owned by all." bit.ly/ds-hubspot 22

Slide 23

Slide 23 text

BUILD SOMETHING DESIRABLE BUILD SOMETHING DESIRABLE Win trust by solving your Win trust by solving your subscriber’s problems. subscriber’s problems. 23

Slide 24

Slide 24 text

Funded Funded 24

Slide 25

Slide 25 text

Funding ➡ Deliverables Funding ➡ Deliverables 25

Slide 26

Slide 26 text

Funding ➡ Deliverables ➡ Funding ➡ Deliverables ➡ Process Process 26

Slide 27

Slide 27 text

design-system.pluralsight.com 27

Slide 28

Slide 28 text

Where is the Money? Where is the Money? UX/Design Research & Development Tech Debt 28

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Teachable Teachable 30

Slide 31

Slide 31 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Subscribers come ﬁrst. Subscribers come ﬁrst. 31

Slide 32

Slide 32 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Hold Regular Ofﬁce Hours Hold Regular Ofﬁce Hours 32

Slide 33

Slide 33 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Create a Digestible Create a Digestible Changelog / Release Notes Changelog / Release Notes bit.ly/ds-release-notes 33

Slide 34

Slide 34 text

atlassian.design 34

Slide 35

Slide 35 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Host Internal Workshops Host Internal Workshops & Lunch 'n' Learns & Lunch 'n' Learns 35

Slide 36

Slide 36 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Develop a Virtual Learning Develop a Virtual Learning Library Library 36

Slide 37

Slide 37 text

BUILD SOMETHING TEACHABLE BUILD SOMETHING TEACHABLE Subscribers come ﬁrst. Subscribers come ﬁrst. 37

Slide 38

Slide 38 text

Attentive Attentive 38

Slide 39

Slide 39 text

BE ATTENTIVE BE ATTENTIVE Listen to your customer. Listen to your customer. 39

Slide 40

Slide 40 text

design-system.pluralsight.com 40

Slide 41

Slide 41 text

BE ATTENTIVE BE ATTENTIVE Listen to your customer. Listen to your customer. 41

Slide 42

Slide 42 text

Documented Documented 42

Slide 43

Slide 43 text

DOCUMENT IT WELL DOCUMENT IT WELL SemVer for the Win! SemVer for the Win! semver.org 43

Slide 44

Slide 44 text

DOCUMENT IT WELL DOCUMENT IT WELL Name things. Name things. (.ellipses != .ellipsis) 44

Slide 45

Slide 45 text

DOCUMENT IT WELL DOCUMENT IT WELL Build a documentation site. Build a documentation site. 45

Slide 46

Slide 46 text

carbondesignsystem.com 46

Slide 47

Slide 47 text

Document it well. Document it well. 47

Slide 48

Slide 48 text

Adaptable Adaptable 48

Slide 49

Slide 49 text

BE ADAPTABLE BE ADAPTABLE Iterate as the need arises. Iterate as the need arises. 49

Slide 50

Slide 50 text

BE ADAPTABLE BE ADAPTABLE Iterate as the need arises. Iterate as the need arises. 50

Slide 51

Slide 51 text

Individuals commit the sunk cost fallacy when they continue a behavior or endeavor as a result of previously invested resources (time, money or effort) (Arkes & Blumer, 1985). behavioraleconomics.com 51

Slide 52

Slide 52 text

Your system has to Your system has to be willing to change and grow. be willing to change and grow. 52

Slide 53

Slide 53 text

Branded Branded 53

Slide 54

Slide 54 text

BRANDING MATTERS BRANDING MATTERS Name Your System Name Your System 54

Slide 55

Slide 55 text

polaris.shopify.com 55

Slide 56

Slide 56 text

BRANDING MATTERS BRANDING MATTERS Make It Ofﬁcial Make It Ofﬁcial 56

Slide 57

Slide 57 text

design.trello.com 57

Slide 58

Slide 58 text

BRANDING MATTERS BRANDING MATTERS Send Newsletters Send Newsletters 58

Slide 59

Slide 59 text

Self Portrait with Straw Hat, 1887 by Vincent Van Gogh via VincentVanGogh.org 59

Slide 60

Slide 60 text

Your Design System Your Design System = Your = Your Desirable, Desirable, Funded, Funded, Teachable, Teachable, Attentive, Attentive, Documented, Documented, Adaptable, Adaptable, Branded Branded Product. Product. 60

Slide 61

Slide 61 text

Thanks! Thanks! Catherine Meade Catherine Meade DEVELOPER, SPARKBOX DEVELOPER, SPARKBOX | | @catheraaine @catheraaine cat@heysparkbox.com cat@heysparkbox.com bit.ly/meade-design-systems bit.ly/meade-design-systems 61

Slide 62

Slide 62 text

| ✨ Resources ✨ ✨ Resources ✨ Slide Repository | Slide PDF | Foundry Article | Design Systems Survey 2018 | @catheraaine cat@heysparkbox.com bit.ly/meade-design-systems speakerdeck.com/catheraaine http://bit.ly/ds-foundry designsystemssurvey.seesparkbox.com 62