Initiating and Building Design Systems — Across Products, People and Process

Learn about what it takes to initiating and building a design system in your organization. What people will involve, how to improve the products, and how to set up a process to makes the design system for a long run

Transcript

1. Initiating and Building Design Systems Across Products, People and Process PRESENTED BY Pizza Yap Product Designer @ Grab @pizza0502 May 15, 2019
2. Hello How are you? What’s your role?
3. TWITTER @pizza0502 MEDIUM @pizza0502 WEBSITE kwangyik.com
4. We’ll Cover — The Purpose of Design Systems — The Benefits of Having Design Systems — When to Build Design Systems — People That You Need to Build Design Systems — Tools for Building Design System — Living Design Systems
5. What is a Design System?
6. What is a Design System? The NASA Graphics Standards Manual
7. What is a Design System? The NYCTA Graphics Standards Manual
8. A collection of reusable components, governed by clear standards , that can be assembled together to build any number of applications or products. — Laura Van Doore (Head of Product Design @ Fathom) What is a Design System?
9. A system is an interconnected set of elements coherently organized in a way that achieves something . — Donella Meadows (Thinking in Systems) What is a Design System?
10. An unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with. — Karri Saarinen (Ex Design Systems Lead @ Airbnb) What is a Design System?
11. A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience. — Nathan Curtis (Design Systems Consultant at EightShapes) What is a Design System?
12. 1. Reusable Components 2. Standards & Guidelines 3. Common Language 4. Cohesive Experience 5. Scalability What is a Design System?
13. Mailchimp What is a Design System? A HTML/CSS playbook for 1 product team to build a consistent design. http://ux.mailchimp.com
14. Atlassian What is a Design System? Brand guideline, design spec, illustration library and React JS code component for 10+ product teams to build a consistent experience. https://atlassian.design/
15. U.S. Web Design System What is a Design System? A visual language that synthesizes the principles of good design with the accessibility and innovation of technology that used across 100+ products. https://v2.designsystem.digital.gov/
16. GOV.UK Design System What is a Design System? https://design-system.service.gov.uk/
17. Aurora Design System What is a Design System? https://design.gccollab.ca/
18. Australian Government Design System What is a Design System? https://designsystem.gov.au/
19. Singapore Government Design System What is a Design System? https://designsystem.isomer.gov.sg/
20. Open source design systems are not meant be reused and spin up for yourself, but to learn from and apply to your own. — Mike Dick (Design System Lead at SurveyMonkey) What is a Design System?
21. Bootstrap A toolkit that contain HTML, CSS & JS that can customize by any teams for unlimited products to produce design efficiently. What is a Design System? https://getbootstrap.com/
22. https://material.io/design/ A toolkit that contain guidelines, frontend code for web and native that can customize by any teams for unlimited products to produce design efficiently. What is a Design System? Material Design
23. A design system is a single source of truth for consistency and cohesion. What is a Design System?
24. What’s the benefit of Design System?
25. 1. For Organization It helps scaling organization across designs and products What’s the benefit of Design System?
26. 2. For New Hires It’s a great educational resource to onboard new hires to make them get up to speed on your organization’s design principles, methods, tools, and assets. What’s the benefit of Design System?
27. 3. For Designers & Engineers It’s speed up iterations, and focus on the details and solve complex problems What’s the benefit of Design System?
28. 4. For Communication Have a common language and vocabulary across different roles and timezone What’s the benefit of Design System?
29. 5. For Customers Keep up on our customer demands and put our products in more devices and platforms. What’s the benefit of Design System?
30. What’s define a good Design System?
31. A good system take care of all the boring stuff so that product teams can invent the new What’s define a good Design System?
32. A good system allows us to focus on what we are passionate about What’s define a good Design System?
33. A good system can improve the workflow for designers who code and engineers who build UI What’s define a good Design System?
34. A good system empowers designers to code, and empowers engineers to design — Diana Mounter (Design Systems Lead at GitHub) What’s define a good Design System?
35. Why we need a Design System?
36. Because it’s a cool thing now! Why we need a Design System?
37. Because it’s a cool thing now! Why we need a Design System?
38. But it’s so trendy and everyone are talking about it! Why we need a Design System?
39. But it’s so trendy and everyone are talking about it! Why we need a Design System?
40. But that X company just publish their cool new Design System publicly, we should do so! Why we need a Design System?
41. Why we need a Design System?
42. 5 Five Whys — Sakichi Toyoda Why we need a Design System? https://thedesignteam.io/always-ask-why-five-times-452345856bde
43. First Why? We keep copy pasting designs and codes Second Why? We don’t have components Third Why? We didn’t define atomic design Fourth Why? The design handoff process is a mess Fifth Why? Our products are inconsistent from visual to experience Why we need a Design System?
44. Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. — Alex Schleifer (VP of Design at Airbnb) Why we need a Design System?
45. One of the most obvious problem to solve is the Handoff process Why we need a Design System?
46. Who is Design System for?
47. It is crucial to clearly identify who this design system is for and what they are able to do with it. — Chris Coyier (Founder of CSS Tricks) Who is Design System for?
48. ‍ Designers Who is Design System for? ‍ Engineers Team Leads ‍ Partners
49. When should we start building a Design System?
50. Now! When should we start building a Design System?
51. But you said we shouldn’t follow the trend blindly…‍♂ When should we start building a Design System?
52. DYOR When should we start building a Design System?
53. When should we start building a Design System?
54. When should we start building a Design System?
55. • What challenge do you face? • How useful is the current documentation? • Do we need a design system? • Any suggestions? When should we start building a Design System? https://unsplash.com/photos/npxXWgQ33ZQ Ask questions with surveys
56. Talk 1:1 with people who work on products Look for the pattern of how people working alone and as a team. Seek for advice too. When should we start building a Design System? https://unsplash.com/photos/lp1AKIUV3yo
57. Gain supports ... Don’t go war alone! When should we start building a Design System?
58. How to get buy in Design System?
59. You will gets a lot of questions… How to get buy in Design System?
60. How to get buy in Design System?
61. 1. Who needs convinced? 2. Who's doing the convincing? 3. What will happen if this initiative fails? How to get buy in Design System?
62. Be realistic and honest about the potential risks . Outline what’s the worst case scenarios if this initiative failed. How to get buy in Design System?
63. Prepared a pitch deck • Compile findings • Keep it clear and short • Present How to get buy in Design System? https://unsplash.com/photos/IBUcu_9vXJc
64. Present a solid roadmap • Show a clear deliverables and scopes. • Outline what’s your plan for the design system over the time. How to get buy in Design System? https://github.com/uswds/uswds/milestone/52
65. Emphasise business outcomes , over team benefits — Laura Van Doore (Head of Product Design @ Fathom) How to get buy in Design System?
66. Designer spend 1hr on design: • Design from scratch • Finding design guidelines • Searching previous designed screens (which might affect another designer’s time) Developer spend 1hr on development: • Rebuilding same component • Check code standard with peers (which might affect another developer’s time) • Getting reviews from designer Design System ROI: • Assume each designer and developer cost $100/hr • 1hr/day * 261 days * $100 * 2 ppl = $52,200/year Calculate metrics on how we save ⏱ & How to get buy in Design System?
67. Other measurements 1. Delivery increase 2. Bugs reduction 3. Usability metrics improvement 4. Team happiness increase How to get buy in Design System?
68. Show examples • Polaris by Shopify • Zendesk Garden • Atlassian • Lightning Design System by Salesforce • And more... How to get buy in Design System?
69. Watch videos • Jina Bolton • Diana Mounter • Mina Markham • Smashing Magazine • An Event Apart • InVision • And more... How to get buy in Design System? https://vimeo.com/144727010
70. • Clarity Conference • SmashingConf • An Event Apart Conference • Meetups Attend conferences or meetups How to get buy in Design System? https://www.clarityconf.com/videos/2018-recap
71. Most importantly, don’t overuse the term “Design System” when you’re selling it and getting buy in. How to get buy in Design System?
72. It takes time to get buy in. Be patient (and don’t give up) How to get buy in Design System?
73. What’s in a Design System?
74. What’s in a Design System? https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d
75. What’s in a Design System?
76. If you don’t document something, it doesn’t exist. — Miriam Suzanne (Creator of Susy) Why we need a Design System?
77. UI Kit What’s in a Design System? https://dribbble.com/shots/6176448-Symbol-D esign-System-2
78. Style Guide What’s in a Design System? https://www.yelp.com/styleguide
79. Brand Guidelines What’s in a Design System? https://brandland.zendesk.com/
80. Voice & Tones (Content Guidelines) What’s in a Design System? https://styleguide.mailchimp.com/
81. Motion Guidelines What’s in a Design System? https://material.io/design/motion/understanding -motion.html
82. Prototyping Tools What’s in a Design System? https://www.framer.com/
83. CSS Components What’s in a Design System? https://garden.zendesk.com/css-components/
84. JS Components What’s in a Design System? https://design-system.pluralsight.com/
85. Break time
86. How to build a Design System?
87. Drive decision with design principles Take a step back and have a look at look at all the assets as a whole How to build a Design System? Lightning Design System
88. Start by gathering data of visual design foundations How to build a Design System?
89. Conduct a design audit Running an interface audit can determine inconsistencies in your products How to build a Design System?
90. Gather everything single thing that you have created for your products How to build a Design System?
91. Tools you can use to gathering data How to build a Design System? CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template https://cssstats.com/
92. Tools you can use to gathering data How to build a Design System? CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template https://flawlessapp.io/feedback
93. Tools you can use to gathering data How to build a Design System? https://fastlane.tools/ CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template
94. Tools you can use to gathering data How to build a Design System? CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template
95. Tools you can use to gathering data How to build a Design System? https://bit.ly/2v9yUdZ CSS Stats ✨Flawless Feedback ‍♂Fastlane Automation Screenshot ⭐Custom Sketch Plugin Interface Inventory Template
96. Design Audit Reports Showing what is being done right, and what is being messed up and how to make adjustments. How to build a Design System? https://unsplash.com/photos/PaiFrBUJEWQ
97. Analyzing and prioritizing components Take a step back and have a look at look at all the assets as a whole How to build a Design System? https://unsplash.com/photos/qWwpHwip31M
98. Visual Foundation Elements How to build a Design System?
99. Team activity for prioritization How to build a Design System? https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742 1. Pick the Parts 2. Prioritize the System 3. Aggregate
100. Team activity for prioritization How to build a Design System? 1. Pick the Parts 2. Prioritize the System 3. Aggregate https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742
101. Team activity for prioritization How to build a Design System? 1. Pick the Parts 2. Prioritize the System 3. Aggregate
102. Now, start small… How to build a Design System?
103. Share a design library Start small and start with having a design library that contains all the design foundations and components How to build a Design System? https://dribbble.com/shots/5779721-Eggplore-UI-Styleguide-Freebie/attachments
104. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.sketch.com/docs/sketch-cloud/
105. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.abstract.com/
106. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://www.figma.com/
107. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design libraries How to build a Design System? https://designcode.io/design-system/
108. How to build a Design System?
109. 1. Colors 2. Typography Naming Convention How to build a Design System? https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659
110. 1. Colors 2. Typography Naming Convention How to build a Design System? https://danmall.me/articles/typography-in-design-systems/
111. 1. Colors 2. Typography Naming Convention How to build a Design System? https://danmall.me/articles/typography-in-design-systems/
112. Keeping your design system agnostic with design tokens Leverage your design system to more platforms How to build a Design System? https://shopify.github.io/polaris-tokens/
113. How to build a Design System?
114. 1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://github.com/salesforce-ux/theo
115. 1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://amzn.github.io/style-dictionary/#/
116. 1. Theo 2. Style Dictionary 3. Figma API Tools to generate design tokens How to build a Design System? https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f
117. How to build a Design System?
118. Documentation is a critical step during the development process. All about documentation How to build a Design System? https://unsplash.com/photos/vpR0oc4X8Mk
119. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://www.invisionapp.com/design-system-manager
120. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://www.frontify.com/
121. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://zeroheight.com/
122. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://www.lingoapp.com/
123. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System?
124. 1. InVision Design System Manager 2. Frontify 3. Zeroheight 4. Lingo 5. Dropbox Paper or Google Docs 6. Custom Website with CMS Tools for documentations How to build a Design System? https://design.trello.com/
125. It’s important to note that documentation shouldn’t just be written once and then left alone forever. Design System documentation should be a living and breathing document that evolves over time. How to build a Design System?
126. Create use cases or pilot projects Create test websites, widgets, tutorial video and any idea you can think of to show people how to put those design system in use How to build a Design System? https://dribbble.com/shots/6160500-Card-Paginator-Component
127. How to scale/maintain a Design System?
128. Scale with teams... How to scale/maintain a Design System?
129. 3 How to scale/maintain a Design System? 3 team models for scaling a design system
130. How to scale/maintain a Design System? Solitary Centralised Federated https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
131. A solitary model sees a one team make a system available, but with efforts focused primarily on that team’s needs. Team Model №1 Solitary How to scale/maintain a Design System?
132. A single, central design team produces and supports a system used by others as a part of their job. Team Model №2 Centralised How to scale/maintain a Design System?
133. Designers from multiple product teams decide on the system together. Team Model №3 Federated How to scale/maintain a Design System?
134. The Design System informs our Product Design. Our Product Design informs the Design System. Team Model Hybrid Cyclical How to scale/maintain a Design System? https://articles.uie.com/the-salesforce-team-model-for-scaling-a-design-system/
135. Setting up Design System team as a product team How to scale/maintain a Design System?
136. A Design System isn’t a project. It’s a product, serving products . — Nathan Curtis (Design Systems Consultant at EightShapes) How to scale/maintain a Design System?
137. Setting up a formal system team, strive for a mix with recognized authority from both design and engineering disciplines. System team How to scale/maintain a Design System? https://medium.com/eightshapes-llc/designing-a-systems-team-d22f27a2d81d
138. Scale with processes... How to scale/maintain a Design System?
139. Code of Conduct: • Be humble • Ask questions, and seek to understand each other’s context • Research before asking questions • Be open and honest • And more... Chat room for design system How to scale/maintain a Design System? https://unsplash.com/photos/OXkUz1Dp-4g
140. Publish the roadmap Shows what the Design System team at currently planning to work on over the coming year How to scale/maintain a Design System? https://design-system.service.gov.uk/roadmap/
141. Have a Changelog or Release Note The latest updates, and changes to the design system How to scale/maintain a Design System? https://v2.designsystem.digital.gov/about/releases/
142. 2 . 1 . 7 How to scale/maintain a Design System? Major Minor Patch https://medium.com/eightshapes-llc/versioning-design-systems-48cceb5ace4d
143. Process & workflow for contribution A process and workflow to allow people across your organization contribute to the design system How to scale/maintain a Design System? https://medium.com/s/story/the-design-system-decision-tree-edba9abdb83b
144. Contribution Templates - Detailed descriptions - Questions - Does your design pass color contrast ratio? - Is your design consistent with the core library? - Does your design follow basic UX best practices? - Source files and screenshots How to scale/maintain a Design System?
145. Write articles about major product updates, guidance, and interviews etc from time to time Inspire with stories How to scale/maintain a Design System? https://medium.com/segment-design
146. Measuring the impact of a Design System generally falls into two categories: subjective and objective. Measuring the impact How to scale/maintain a Design System? https://unsplash.com/photos/iftBhUFfecE
147. Subjective Measurement - How often do you find yourself using the Design System? - What is one thing you would improve about the Design System? - On a scale of 1 (strongly disagree) to 5 (strongly agree), does the Design System improve your workflow? How to scale/maintain a Design System?
148. Objective Measurement - Does the Design System have a component library? - Does it have robust documentation? - Does it have a process? How to scale/maintain a Design System?
149. How to scale/maintain a Design System? https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f
150. How to scale/maintain a Design System? https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7
151. Takeaways
152. https://thedesignteam.io/designer-first-world-problems-861e53c8ecf7
153. Be gardeners not gatekeepers, not police Takeaways
154. Be non-constraining Design a system that strikes a balance between general and specific so it’s neither too abstract nor too restrictive in application. Takeaways
155. Be regularly fine-tuned while presenting and supporting your company’s core values in a visually cohesive way. Takeaways
156. Don’t forget about tooling Takeaways
157. Learn from others. Then make your choices. Takeaways
158. https://xkcd.com/927/
159. Nothing is particularly hard if you divide it in small jobs. — Henry Ford Takeaways
160. Design System Resources • InVision Design System Series ◦ https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale/ • Adele ◦ https://adele.uxpin.com/ • Design Systems by Figma ◦ https://www.designsystems.com/ • Nathan Curtis ◦ https://twitter.com/nathanacurtis • Jina Bolton ◦ https://twitter.com/jina • Diana Mounter ◦ https://twitter.com/broccolini • ClarityConf ◦ https://www.clarityconf.com/2019 • Design System Slack Channel ◦ http://design.systems/slack/
161. Thanks! TWITTER @pizza0502 MEDIUM @pizza0502 WEBSITE kwangyik.com