Design Systems for People

Slide 1

Slide 1 text

Communication, Collaboration & Culture Design Systems   for People #DesignExchange

Slide 2

Slide 2 text

#DesignExchange The New Design Frontier

Slide 3

Slide 3 text

#DesignExchange 5% 12% 21% 21% 41% Level 1 Level 2 Level 3 Level 4 Level 5 Impact of design Adoption of design

Slide 4

Slide 4 text

#DesignExchange Adapted from “Design in the Organization”, Junginger (2009) Tasks Culture Partner

Slide 5

Slide 5 text

Design as outputs #DesignExchange

Slide 6

Slide 6 text

Design as outcomes #DesignExchange

Slide 7

Slide 7 text

Impact = People #DesignExchange

Slide 8

Slide 8 text

#DesignExchange

Slide 9

Slide 9 text

#DesignExchange Communication Collaboration Process Culture

Slide 10

Slide 10 text

The people layer #DesignExchange

Slide 11

Slide 11 text

1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange Agenda

Slide 12

Slide 12 text

But ﬁrst, some ground rules. #DesignExchange

Slide 13

Slide 13 text

#DesignExchange #DesignExchange @InvisionApp @elou

Slide 14

Slide 14 text

Ice Breaker: Punctual Paul #DesignExchange

Slide 15

Slide 15 text

Ice Breaker: How to make toast #DesignExchange

Slide 16

Slide 16 text

#DesignExchange 3 minutes Draw or sketch how to make toast

Slide 17

Slide 17 text

Ice Breaker: How to make toast #DesignExchange

Slide 18

Slide 18 text

? #DesignExchange

Slide 19

Slide 19 text

? #DesignExchange

Slide 20

Slide 20 text

? #DesignExchange

Slide 21

Slide 21 text

? #DesignExchange

Slide 22

Slide 22 text

? #DesignExchange

Slide 23

Slide 23 text

#DesignExchange

Slide 24

Slide 24 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 25

Slide 25 text

#DesignExchange

Slide 26

Slide 26 text

#DesignExchange

Slide 27

Slide 27 text

#DesignExchange

Slide 28

Slide 28 text

#DesignExchange

Slide 29

Slide 29 text

#DesignExchange

Slide 30

Slide 30 text

#DesignExchange

Slide 31

Slide 31 text

#DesignExchange

Slide 32

Slide 32 text

#DesignExchange …Weird.

Slide 33

Slide 33 text

#DesignExchange 915, 103, 765

Slide 34

Slide 34 text

#DesignExchange

Slide 35

Slide 35 text

#DesignExchange

Slide 36

Slide 36 text

#DesignExchange

Slide 37

Slide 37 text

Lego challenge #DesignExchange

Slide 38

Slide 38 text

Keep your card secret! #DesignExchange

Slide 39

Slide 39 text

#DesignExchange 15 minutes Build a tower as a team Achieve your secret goal!

Slide 40

Slide 40 text

Discuss! #DesignExchange

Slide 41

Slide 41 text

What did you ﬁnd? #DesignExchange

Slide 42

Slide 42 text

#DesignExchange Design systems are more than just stuff

Slide 43

Slide 43 text

#DesignExchange A collection of reusable elements,

Slide 44

Slide 44 text

#DesignExchange guided by clear standards and structures, A collection of reusable elements,

Slide 45

Slide 45 text

#DesignExchange guided by clear standards and structures, A collection of reusable elements, that is coherently organized

Slide 46

Slide 46 text

#DesignExchange guided by clear standards and structures, A collection of reusable elements, that is coherently organized to let us build better products faster.

Slide 47

Slide 47 text

#DesignExchange UI Components content strategy Visual styles information architecture code framework templates What How Why

Slide 48

Slide 48 text

#DesignExchange

Slide 49

Slide 49 text

“Organizations which design systems are constrained to produce designs that are copies of the communication structures of these organizations.” #DesignExchange Conway’s Law

Slide 50

Slide 50 text

#DesignExchange

Slide 51

Slide 51 text

#DesignExchange

Slide 52

Slide 52 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 53

Slide 53 text

simple #DesignExchange ?

Slide 54

Slide 54 text

simple #DesignExchange enough?

Slide 55

Slide 55 text

simple #DesignExchange ? Too

Slide 56

Slide 56 text

Principles help us make consistent decisions. #DesignExchange

Slide 57

Slide 57 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 58

Slide 58 text

Design systems for people • @invisionapp

Slide 59

Slide 59 text

#DesignExchange Cross functional team responsible for the design system 77% Source: Sparkbox 2019 Design Systems Survey

Slide 60

Slide 60 text

#DesignExchange Integrated into developer systems 79% Source: Sparkbox 2019 Design Systems Survey

Slide 61

Slide 61 text

#DesignExchange If it’s not successful, why? 52% Adoption 42% Maintenance 38% Stafﬁng 35% Lack of an executive champion Source: Sparkbox 2019 Design Systems Survey

Slide 62

Slide 62 text

#DesignExchange Stakeholder examples Peers (engineers) Inﬂuencers (other designers) Executives (decision makers)

Slide 63

Slide 63 text

A design system is a Product that supports other Products #DesignExchange

Slide 64

Slide 64 text

A design system is a Product that supports other People #DesignExchange

Slide 65

Slide 65 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 66

Slide 66 text

#DesignExchange Just moving 3 developers to 4 doubles the number of lines of communication  -Rich Rogers

Slide 67

Slide 67 text

#DesignExchange The solitary model The centralized team model The federated model

Slide 68

Slide 68 text

#DesignExchange Your design system  is a reﬂection of your design culture

Slide 69

Slide 69 text

Every system has two sets of rules: The rules as they are intended or commonly perceived, and the actual rules ("reality") #DesignExchange Paul Buchheit

Slide 70

Slide 70 text

The system always   kicks back. #DesignExchange Paul Buchheit

Slide 71

Slide 71 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 72

Slide 72 text

#DesignExchange

Slide 73

Slide 73 text

#DesignExchange

Slide 74

Slide 74 text

1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange Agenda

Slide 75

Slide 75 text

lunch: Be back at 1:30 pm #DesignExchange

Slide 76

Slide 76 text

AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange

Slide 77

Slide 77 text

#DesignExchange

Slide 78

Slide 78 text

#DesignExchange

Slide 79

Slide 79 text

#DesignExchange

Slide 80

Slide 80 text

Brainstorm #DesignExchange Words or phrases that describe your design system goals

Slide 81

Slide 81 text

#DesignExchange 5 minutes Words or phrases that describe your design system goals

Slide 82

Slide 82 text

Re-write #DesignExchange How would you frame the negative of that?

Slide 83

Slide 83 text

#DesignExchange 3 minutes How would you reframe the negative of that?

Slide 84

Slide 84 text

Sketch #DesignExchange Your principles in action, your principles ignored

Slide 85

Slide 85 text

#DesignExchange 8 minutes Your principles in action, your principles ignored

Slide 86

Slide 86 text

#DesignExchange

Slide 87

Slide 87 text

#DesignExchange

Slide 88

Slide 88 text

#DesignExchange

Slide 89

Slide 89 text

#DesignExchange Simple Straightforward Easy Uncomplicated Effortless Elementary Basic

Slide 90

Slide 90 text

#DesignExchange Easy & Simple Customer Comfort

Slide 91

Slide 91 text

Brainstorm #DesignExchange Re-write your principles as descriptive words or phrases

Slide 92

Slide 92 text

#DesignExchange 8 minutes Re-write your principles as descriptive words or phrases

Slide 93

Slide 93 text

Share #DesignExchange

Slide 94

Slide 94 text

Principles for principles? #DesignExchange ✍

Slide 95

Slide 95 text

#DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA

Slide 96

Slide 96 text

External empathy #DesignExchange

Slide 97

Slide 97 text

Internal empathy #DesignExchange

Slide 98

Slide 98 text

#DesignExchange Brainstorm a list of stakeholders

Slide 99

Slide 99 text

#DesignExchange 5 minutes Brainstorm a list of stakeholders

Slide 100

Slide 100 text

#DesignExchange

Slide 101

Slide 101 text

Pick 3 stakeholder roles to focus on. #DesignExchange Role 1 Role 2 Role 3

Slide 102

Slide 102 text

#DesignExchange What metrics and outcomes matter to them?

Slide 103

Slide 103 text

#DesignExchange Technical debt Speed to market Adoption rate Brand trust NPS QA time

Slide 104

Slide 104 text

#DesignExchange 5 minutes Brainstorm metrics for each persona

Slide 105

Slide 105 text

#DesignExchange vaLue Feasibility Metric Metric Metric Metric Metric Metric Metric Metric Metric Metric

Slide 106

Slide 106 text

#DesignExchange 6 minutes Plot your metrics against the 2x2

Slide 107

Slide 107 text

#DesignExchange Framing through the values of others

Slide 108

Slide 108 text

#DesignExchange 10 minutes How can we frame and use the design system based on the values of others

Slide 109

Slide 109 text

#DesignExchange Discuss How can we frame and deliver the design system through the values of others

Slide 110

Slide 110 text

#DesignExchange Let’s chat!

Slide 111

Slide 111 text

#DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA

Slide 112

Slide 112 text

#DesignExchange Chapter 2 Designing your design system

Slide 113

Slide 113 text

#DesignExchange Solitary Model

Slide 114

Slide 114 text

#DesignExchange Centralized Model

Slide 115

Slide 115 text

#DesignExchange Federated Model

Slide 116

Slide 116 text

#DesignExchange \ Hybrid Models

Slide 117

Slide 117 text

#DesignExchange PARTNERS CORE

Slide 118

Slide 118 text

#DesignExchange EXTERNAL PARTNERS CORE

Slide 119

Slide 119 text

#DesignExchange EXTERNAL PARTNERS CORE • What activities need to happen? • Who are the owner/decision makers? • Who are consulted? • Who are informed?

Slide 120

Slide 120 text

#DesignExchange EXTERNAL PARTNERS CORE • What activities need to happen? • Who are the owner/decision makers? • Who are consulted? • Who are informed?

Slide 121

Slide 121 text

#DesignExchange Form follows function

Slide 122

Slide 122 text

#DesignExchange Design components Document components Adopt components Executive approval

Slide 123

Slide 123 text

#DesignExchange 5 minutes Write down all the tasks, outcomes, accountable actions

Slide 124

Slide 124 text

#DesignExchange Adopt components Document components Design components Executive approval

Slide 125

Slide 125 text

#DesignExchange 5 minutes Plot actions to bullseye

Slide 126

Slide 126 text

Break: Be back at 4:00 PM #DesignExchange

Slide 127

Slide 127 text

#DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA

Slide 128

Slide 128 text

#DesignExchange Is a hotdog a sandwich?

Slide 129

Slide 129 text

#DesignExchange The cube rule Toast Sandwich Taco Sushi Soup Calzone

Slide 130

Slide 130 text

#DesignExchange Toast example

Slide 131

Slide 131 text

#DesignExchange Taco example

Slide 132

Slide 132 text

#DesignExchange Sushi example

Slide 133

Slide 133 text

#DesignExchange

Slide 134

Slide 134 text

#DesignExchange “Language is the material of intent.” - Abby Covert, How to Make Sense of Any Mess

Slide 135

Slide 135 text

#DesignExchange

Slide 136

Slide 136 text

#DesignExchange

Slide 137

Slide 137 text

#DesignExchange “MEDIA PICKER" “BUTTON”

Slide 138

Slide 138 text

#DesignExchange Creating a shared design language

Slide 139

Slide 139 text

Analyze #DesignExchange

Slide 140

Slide 140 text

#DesignExchange 5 minutes Analyze and discuss

Slide 141

Slide 141 text

Cut, sort, and label #DesignExchange

Slide 142

Slide 142 text

#DesignExchange 40 minutes Cut out as many components as you can ﬁnd, sort, and label

Slide 143

Slide 143 text

Pile your components and lable then swap clockwise #DesignExchange Swap!

Slide 144

Slide 144 text

Re-sort #DesignExchange

Slide 145

Slide 145 text

#DesignExchange 8 minutes Sort the components into groups and label them (add new labels if needed)

Slide 146

Slide 146 text

We’re almost there! #DesignExchange

Slide 147

Slide 147 text

#DesignExchange Building a shared understanding Testing your language 1. Audit 2. Card sort 3. Site map 4. Findability

Slide 148

Slide 148 text

1. Think in systems 2. Principled decisions 3. Know your stakeholders 4. Form follows function 5. Build a shared language #DesignExchange

Slide 149

Slide 149 text

Hello Emily Campbell Design Transformation  emmiecampbell.com @elou