Design Systems for People

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.

859a039e66a4508596c0b5200860fb99?s=128

Emily Campbell

April 16, 2019
Tweet

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