Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Initiating and Building Design Systems — Across...

pizza0502
May 15, 2019

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

pizza0502

May 15, 2019
Tweet

Other Decks in Design

Transcript

  1. Initiating and Building Design Systems Across Products, People and Process

    PRESENTED BY Pizza Yap Product Designer @ Grab @pizza0502 May 15, 2019
  2. 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
  3. 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?
  4. 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?
  5. 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?
  6. 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?
  7. 1. Reusable Components 2. Standards & Guidelines 3. Common Language

    4. Cohesive Experience 5. Scalability What is a Design System?
  8. Mailchimp What is a Design System? A HTML/CSS playbook for

    1 product team to build a consistent design. http://ux.mailchimp.com
  9. 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/
  10. 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/
  11. 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?
  12. 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/
  13. 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
  14. A design system is a single source of truth for

    consistency and cohesion. What is a Design System?
  15. 1. For Organization It helps scaling organization across designs and

    products What’s the benefit of Design System?
  16. 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?
  17. 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?
  18. 4. For Communication Have a common language and vocabulary across

    different roles and timezone What’s the benefit of Design System?
  19. 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?
  20. 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?
  21. A good system allows us to focus on what we

    are passionate about What’s define a good Design System?
  22. A good system can improve the workflow for designers who

    code and engineers who build UI What’s define a good Design System?
  23. 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?
  24. But that X company just publish their cool new Design

    System publicly, we should do so! Why we need a Design System?
  25. 5 Five Whys — Sakichi Toyoda Why we need a

    Design System? https://thedesignteam.io/always-ask-why-five-times-452345856bde
  26. 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?
  27. 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?
  28. One of the most obvious problem to solve is the

    Handoff process Why we need a Design System?
  29. 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?
  30. But you said we shouldn’t follow the trend blindly…‍♂ When

    should we start building a Design System?
  31. • 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
  32. 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
  33. 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?
  34. 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?
  35. 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
  36. 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
  37. Emphasise business outcomes , over team benefits — Laura Van

    Doore (Head of Product Design @ Fathom) How to get buy in Design System?
  38. 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?
  39. Other measurements 1. Delivery increase 2. Bugs reduction 3. Usability

    metrics improvement 4. Team happiness increase How to get buy in Design System?
  40. Show examples • Polaris by Shopify • Zendesk Garden •

    Atlassian • Lightning Design System by Salesforce • And more... How to get buy in Design System?
  41. 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
  42. • 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
  43. 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?
  44. It takes time to get buy in. Be patient (and

    don’t give up) How to get buy in Design System?
  45. If you don’t document something, it doesn’t exist. — Miriam

    Suzanne (Creator of Susy) Why we need a Design System?
  46. 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
  47. Conduct a design audit Running an interface audit can determine

    inconsistencies in your products How to build a Design System?
  48. Gather everything single thing that you have created for your

    products How to build a Design System?
  49. 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/
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. 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
  58. Team activity for prioritization How to build a Design System?

    1. Pick the Parts 2. Prioritize the System 3. Aggregate
  59. 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
  60. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design

    libraries How to build a Design System? https://www.sketch.com/docs/sketch-cloud/
  61. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design

    libraries How to build a Design System? https://www.abstract.com/
  62. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design

    libraries How to build a Design System? https://www.figma.com/
  63. 1. Sketch Cloud 2. Abstract 3. Figma Tools for design

    libraries How to build a Design System? https://designcode.io/design-system/
  64. 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
  65. 1. Colors 2. Typography Naming Convention How to build a

    Design System? https://danmall.me/articles/typography-in-design-systems/
  66. 1. Colors 2. Typography Naming Convention How to build a

    Design System? https://danmall.me/articles/typography-in-design-systems/
  67. 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/
  68. 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
  69. 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/#/
  70. 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
  71. Documentation is a critical step during the development process. All

    about documentation How to build a Design System? https://unsplash.com/photos/vpR0oc4X8Mk
  72. 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
  73. 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/
  74. 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/
  75. 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/
  76. 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?
  77. 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/
  78. 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?
  79. 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
  80. 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?
  81. 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?
  82. Designers from multiple product teams decide on the system together.

    Team Model №3 Federated How to scale/maintain a Design System?
  83. 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/
  84. Setting up Design System team as a product team How

    to scale/maintain a Design System?
  85. 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?
  86. 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
  87. 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
  88. 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/
  89. 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/
  90. 2 . 1 . 7 How to scale/maintain a Design

    System? Major Minor Patch https://medium.com/eightshapes-llc/versioning-design-systems-48cceb5ace4d
  91. 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
  92. 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?
  93. 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
  94. 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
  95. 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?
  96. 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?
  97. 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
  98. 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/