Communicating with Design: Reaching alignment through system thinking

Design systems are not just for designers. A design system provides a solid foundation for communicating with your organization, enabling product managers and engineers to make decisions without relying on constant feedback from designers. In this talk, we'll explore how Design functions as a language, how design systems encourage autonomy, and how treating your system as a product will enable design at scale.

Transcript

1. Communicating with Design Reaching alignment through system thinking Taurie Davis • @tauried
2. Staff Product Designer at GitLab
 Maintainer of Pajamas Design System Author of Building Design Systems HI, I’M TAURIE! Twitter: @tauried | GitLab: tauriedavis | LinkedIn: tauriedavis | Website: tauriedavis.com
3. GETTING TO KNOW YOU
4. GETTING TO KNOW YOU Who here has heard of design systems?
5. GETTING TO KNOW YOU Who here is currently working on a design system?
6. GETTING TO KNOW YOU Who here is trying to get buy in for their design system?
7. https://gph.is/g/aKn9brl
8. https://twitter.com/gerrymcgovern/status/1179344187109576704
9. Fragmented products, experiences, and code.
10. Lack of autonomy Strained relationships Boring problems
11. Design systems TL;DR — A product that serves products https://www.behance.net/FLRNdL
12. Style guides: Static documentation related to a brand’s visual identity.
13. Component libraries: A set of core components used throughout your application.
14. Design systems: Documented components with both design and technical guidelines, live code examples, and underlying design principles.
15. Design as a language
16. Lexicon: The total number of fragments (or words) that make up that language. DESIGN AS A LANGUAGE
17. DESIGN AS A LANGUAGE
18. Dog the lamp ate sky green. DESIGN AS A LANGUAGE
19. Grammar: A system of known rules that allow us to focus on higher level ideas, rather than form or structure. DESIGN AS A LANGUAGE
20. DESIGN AS A LANGUAGE
21. DESIGN AS A LANGUAGE
22. DESIGN AS A LANGUAGE
23. What makes my system unique? DESIGN AS A LANGUAGE
24. Design principles DESIGN AS A LANGUAGE
25. • Combine organizational goals with user needs • Core values that aide us in making crucial design decisions • Align teams • Build cohesiveness • Provide an anchor Design principles DESIGN AS A LANGUAGE
26. Minimal and efficient Bring a sharp focus by helping customers know what matters now vs. DESIGN AS A LANGUAGE
27. A design system is a vehicle for communicating. DESIGN AS A LANGUAGE
28. Getting your system off the ground
29. Treat your design system the same as you would your product. GETTING YOUR SYSTEM OFF THE GROUND
30. 1. Understand your users and their needs. GETTING YOUR SYSTEM OFF THE GROUND
31. • Improving efficiency in the designer/engineer relationship • Reducing redundant code • Creating consistency in our interfaces and experiences • Etc. 1. Understand your users and their needs GETTING YOUR SYSTEM OFF THE GROUND
32. https://unsplash.com/photos/YXemfQiPR_E https://unsplash.com/photos/YXemfQiPR_E
33. 1. Understand your users and their needs. 2. Gain support and buy in. GETTING YOUR SYSTEM OFF THE GROUND
34. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy
35. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship
36. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education
37. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
38. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
39. The management of relationships. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
40. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations The art of dealing with people in a sensitive effective way.
41. https://unsplash.com/photos/JKMnm3CIncw
42. 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations GETTING YOUR SYSTEM OFF THE GROUND
43. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations The skills and methods used to sell your idea.
44. “We don’t have enough resources to devote to this effort.” GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
46. How often do you ask a designer or front end engineer for help regarding the styling of a component? [0-1] [2-4] [5-7] [8+] times a cycle How often do you ask a designer or front end engineer for help regarding the usage of a component? [0-1] [2-4] [5-7] [8+] times a cycle On average, how long does it take to get the assistance you need? [N/A] [Under an hour] [1-3 hours] [4-8 hours] [1 day] [2+ days] How often are you able to work on a UI bug without designer assistance? [Frequently] [Sometimes] [Rarely] [Never] GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
47. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations “We can’t stop shipping features.”
48. https://unsplash.com/photos/F5qVefeCrp8
49. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations “We don’t see the value.”
50. 1. 2. 3. Dimensions of value: GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
51. 1. Employee 2. 3. Dimensions of value: GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
52. 1. Employee 2. Organization 3. Dimensions of value: GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
53. 1. Employee 2. Organization 3. End users of your product Dimensions of value: GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
54. Employee https://unsplash.com/photos/sggw4-qDD54
55. - Problem and solution validation - Idea generation - Product discovery Designers GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
56. - Less technical debt - Easier design-to-dev handoffs - Less bugs Engineers GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
57. - Stability - Less blockers - Efficient prototyping Product managers GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
58. More autonomy. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
59. Organization https://unsplash.com/photos/PhYq704ffdA
61. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Design systems reduce costs.
62. End user https://unsplash.com/photos/gp8BLyaTaA0
63. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Design systems shift focus to more important problems.
64. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
65. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations The process of facilitating learning.
66. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Don’t assume what others know or don’t know.
67. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Practice empathetic listening.
68. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Address misconceptions.
69. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations Include others in your process.
70. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations
71. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations The act of deliberately managing the spread of information.
72. GETTING YOUR SYSTEM OFF THE GROUND 2. Gain support and buy in Diplomacy, Salesmanship, Education, Public Relations “The design system is a failure.”
73. https://unsplash.com/photos/Q1p7bh3SHj8
74. 1. Understand your users and their needs. 2. Gain support and buy in. 3. Build a roadmap. GETTING YOUR SYSTEM OFF THE GROUND
75. https://unsplash.com/photos/6gQjPGx1uQw
76. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
77. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
78. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
79. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
80. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
81. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
82. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
83. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
84. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
85. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
86. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
87. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
88. 3. Build a roadmap GETTING YOUR SYSTEM OFF THE GROUND
89. https://unsplash.com/photos/IUY_3DvM__w
90. 1. Understand your users and their needs. 2. Gain support and buy in. 3. Build a roadmap. 4. Document everything. GETTING YOUR SYSTEM OFF THE GROUND
91. This tendency to assume documentation is a waste of time greatly devalues the importance of clarifying important issues and goals in writing. - Tracey Halvorsen President & Chief Visionary Officer at Fastspot
92. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND Document for both consumers and makers.
94. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND Is this a new component or a variation of an existing one? Why do existing components not support this use case? Will this component be reused beyond the current scope?
95. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND What does the release process look like?
96. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND What does the release process look like? How do you communicate the status of each component?
97. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND What does the release process look like? How do you communicate the status of each component? How do you run unit tests?
98. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND What does the release process look like? How do you communicate the status of each component? How do you run unit tests? How are visual regression tests set up?
99. 4. Document everything GETTING YOUR SYSTEM OFF THE GROUND Transform consumers into makers.
100. GETTING YOUR SYSTEM OFF THE GROUND 1. Understand your users and their needs. 2. Gain support and buy in. 3. Build a roadmap. 4. Document everything. 5. Release and iterate. GETTING YOUR SYSTEM OFF THE GROUND
101. 5. Release and iterate GETTING YOUR SYSTEM OFF THE GROUND Even the most flashy design systems are not finished.
104. 5. Release and iterate GETTING YOUR SYSTEM OFF THE GROUND Aim for progress, not perfection.
105. 5. Release and iterate GETTING YOUR SYSTEM OFF THE GROUND Use a familiar release cadence.
106. To recap:
107. To recap: Design systems consist of style guides and component libraries but also much more.
108. To recap: A design language can help you communicate and teach system thinking.
109. To recap: Design principles help you make decisions.
110. To recap: Treating your system as if it were a product will enable you to build your system effectively and efficiently.
111. To recap: 1. Understand your users and their needs. 2. Gain support and buy in. 3. Build a roadmap. 4. Document everything. 5. Release and iterate.
112. Thank you! Twitter: @tauried | GitLab: tauriedavis | LinkedIn: tauriedavis | Website: tauriedavis.com