Design Systems for People

So much of the focus on design systems centers around the stuff we put in them. However, examples and surveys show that it's the culture of communication and collaboration that actually holds the keys to success. Design systems amplify that culture, so we have to focus on improving those systems first in order to create design systems that thrive.

This content can be delivered from a 1-hour talk to an 8-hour immersive workshop.

Transcript

1. Communication, Collaboration & Culture Design Systems 
 for People #DesignExchange
2. #DesignExchange The New Design Frontier
3. #DesignExchange 5% 12% 21% 21% 41% Level 1 Level 2 Level 3 Level 4 Level 5 Impact of design Adoption of design
4. #DesignExchange Adapted from “Design in the Organization”, Junginger (2009) Tasks Culture Partner
5. Design as outputs #DesignExchange
6. Design as outcomes #DesignExchange
7. Impact = People #DesignExchange
8. #DesignExchange
9. #DesignExchange Communication Collaboration Process Culture
10. The people layer #DesignExchange
11. 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange Agenda
12. But first, some ground rules. #DesignExchange
13. #DesignExchange #DesignExchange @InvisionApp @elou
14. Ice Breaker: Punctual Paul #DesignExchange
15. Ice Breaker: How to make toast #DesignExchange
16. #DesignExchange 3 minutes Draw or sketch how to make toast
17. Ice Breaker: How to make toast #DesignExchange
18. ? #DesignExchange
19. ? #DesignExchange
20. ? #DesignExchange
21. ? #DesignExchange
22. ? #DesignExchange
23. #DesignExchange
24. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
25. #DesignExchange
26. #DesignExchange
27. #DesignExchange
28. #DesignExchange
29. #DesignExchange
30. #DesignExchange
31. #DesignExchange
32. #DesignExchange …Weird.
33. #DesignExchange 915, 103, 765
34. #DesignExchange
35. #DesignExchange
36. #DesignExchange
37. Lego challenge #DesignExchange
38. Keep your card secret! #DesignExchange
39. #DesignExchange 15 minutes Build a tower as a team Achieve your secret goal!
40. Discuss! #DesignExchange
41. What did you find? #DesignExchange
42. #DesignExchange Design systems are more than just stuff
43. #DesignExchange A collection of reusable elements,
44. #DesignExchange guided by clear standards and structures, A collection of reusable elements,
45. #DesignExchange guided by clear standards and structures, A collection of reusable elements, that is coherently organized
46. #DesignExchange guided by clear standards and structures, A collection of reusable elements, that is coherently organized to let us build better products faster.
47. #DesignExchange UI Components content strategy Visual styles information architecture code framework templates What How Why
48. #DesignExchange
49. “Organizations which design systems are constrained to produce designs that are copies of the communication structures of these organizations.” #DesignExchange Conway’s Law
50. #DesignExchange
51. #DesignExchange
52. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
53. simple #DesignExchange ?
54. simple #DesignExchange enough?
55. simple #DesignExchange ? Too
56. Principles help us make consistent decisions. #DesignExchange
57. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
58. Design systems for people • @invisionapp
59. #DesignExchange Cross functional team responsible for the design system 77% Source: Sparkbox 2019 Design Systems Survey
60. #DesignExchange Integrated into developer systems 79% Source: Sparkbox 2019 Design Systems Survey
61. #DesignExchange If it’s not successful, why? 52% Adoption 42% Maintenance 38% Staffing 35% Lack of an executive champion Source: Sparkbox 2019 Design Systems Survey
62. #DesignExchange Stakeholder examples Peers (engineers) Influencers (other designers) Executives (decision makers)
63. A design system is a Product that supports other Products #DesignExchange
64. A design system is a Product that supports other People #DesignExchange
65. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
66. #DesignExchange Just moving 3 developers to 4 doubles the number of lines of communication
 -Rich Rogers
67. #DesignExchange The solitary model The centralized team model The federated model
68. #DesignExchange Your design system
 is a reflection of your design culture
69. Every system has two sets of rules: The rules as they are intended or commonly perceived, and the actual rules ("reality") #DesignExchange Paul Buchheit
70. The system always 
 kicks back. #DesignExchange Paul Buchheit
71. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
72. #DesignExchange
73. #DesignExchange
74. 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange Agenda
75. lunch: Be back at 1:30 pm #DesignExchange
76. AGENDA 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language #DesignExchange
77. #DesignExchange
78. #DesignExchange
79. #DesignExchange
80. Brainstorm #DesignExchange Words or phrases that describe your design system goals
81. #DesignExchange 5 minutes Words or phrases that describe your design system goals
82. Re-write #DesignExchange How would you frame the negative of that?
83. #DesignExchange 3 minutes How would you reframe the negative of that?
84. Sketch #DesignExchange Your principles in action, your principles ignored
85. #DesignExchange 8 minutes Your principles in action, your principles ignored
86. #DesignExchange
87. #DesignExchange
88. #DesignExchange
89. #DesignExchange Simple Straightforward Easy Uncomplicated Effortless Elementary Basic
90. #DesignExchange Easy & Simple Customer Comfort
91. Brainstorm #DesignExchange Re-write your principles as descriptive words or phrases
92. #DesignExchange 8 minutes Re-write your principles as descriptive words or phrases
93. Share #DesignExchange
94. Principles for principles? #DesignExchange ✍
95. #DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA
96. External empathy #DesignExchange
97. Internal empathy #DesignExchange
98. #DesignExchange Brainstorm a list of stakeholders
99. #DesignExchange 5 minutes Brainstorm a list of stakeholders
100. #DesignExchange
101. Pick 3 stakeholder roles to focus on. #DesignExchange Role 1 Role 2 Role 3
102. #DesignExchange What metrics and outcomes matter to them?
103. #DesignExchange Technical debt Speed to market Adoption rate Brand trust NPS QA time
104. #DesignExchange 5 minutes Brainstorm metrics for each persona
105. #DesignExchange vaLue Feasibility Metric Metric Metric Metric Metric Metric Metric Metric Metric Metric
106. #DesignExchange 6 minutes Plot your metrics against the 2x2
107. #DesignExchange Framing through the values of others
108. #DesignExchange 10 minutes How can we frame and use the design system based on the values of others
109. #DesignExchange Discuss How can we frame and deliver the design system through the values of others
110. #DesignExchange Let’s chat!
111. #DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA
112. #DesignExchange Chapter 2 Designing your design system
113. #DesignExchange Solitary Model
114. #DesignExchange Centralized Model
115. #DesignExchange Federated Model
116. #DesignExchange \ Hybrid Models
117. #DesignExchange PARTNERS CORE
118. #DesignExchange EXTERNAL PARTNERS CORE
119. #DesignExchange EXTERNAL PARTNERS CORE • What activities need to happen? • Who are the owner/decision makers? • Who are consulted? • Who are informed?
120. #DesignExchange EXTERNAL PARTNERS CORE • What activities need to happen? • Who are the owner/decision makers? • Who are consulted? • Who are informed?
121. #DesignExchange Form follows function
122. #DesignExchange Design components Document components Adopt components Executive approval
123. #DesignExchange 5 minutes Write down all the tasks, outcomes, accountable actions
124. #DesignExchange Adopt components Document components Design components Executive approval
125. #DesignExchange 5 minutes Plot actions to bullseye
126. Break: Be back at 4:00 PM #DesignExchange
127. #DesignExchange 1. Why “Systems”? 2. Principles 3. Stakeholders 4. Governance 5. Language AGENDA
128. #DesignExchange Is a hotdog a sandwich?
129. #DesignExchange The cube rule Toast Sandwich Taco Sushi Soup Calzone
130. #DesignExchange Toast example
131. #DesignExchange Taco example
132. #DesignExchange Sushi example
133. #DesignExchange
134. #DesignExchange “Language is the material of intent.” - Abby Covert, How to Make Sense of Any Mess
135. #DesignExchange
136. #DesignExchange
137. #DesignExchange “MEDIA PICKER" “BUTTON”
138. #DesignExchange Creating a shared design language
139. Analyze #DesignExchange
140. #DesignExchange 5 minutes Analyze and discuss
141. Cut, sort, and label #DesignExchange
142. #DesignExchange 40 minutes Cut out as many components as you can find, sort, and label
143. Pile your components and lable then swap clockwise #DesignExchange Swap!
144. Re-sort #DesignExchange
145. #DesignExchange 8 minutes Sort the components into groups and label them (add new labels if needed)
146. We’re almost there! #DesignExchange
147. #DesignExchange Building a shared understanding Testing your language 1. Audit 2. Card sort 3. Site map 4. Findability
148. 1. Think in systems 2. Principled decisions 3. Know your stakeholders 4. Form follows function 5. Build a shared language #DesignExchange
149. Hello Emily Campbell Design Transformation
 emmiecampbell.com @elou