Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems at Scale

195 views

Published on

A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks. Attendees will go home with tips they can use to improve design systems of any stage.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design Systems at Scale

  1. 1. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman
  2. 2. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman
  3. 3. Engineering Operations Design
  4. 4. Engineering Operations Design
  5. 5. A brief history of the universe
  6. 6. Old Photoshop
  7. 7. Atomic Design
  8. 8. “We’re not designing pages, we’re designing systems of components.” - Stephen Hay (2012)
  9. 9. Document-oriented development becomes component-oriented development
  10. 10. Design and engineering have been on a collision course for years.
  11. 11. Enter design systems
  12. 12. Styleguides & Brand Guidelines
  13. 13. Spoiler: No one has figured it out yet.
  14. 14. Spoiler: No one has figured it out yet.
  15. 15. What is a design system?
  16. 16. A product that helps us scale our design practice.
  17. 17. Scale means getting the best results with the least duplication of effort.
  18. 18. Scale means getting the best results with the least duplication of effort. Keeping your designs DRY.
  19. 19. Duplication leads to fragmentation.
  20. 20. Duplication leads to fragmentation.
  21. 21. Diving deeper
  22. 22. In order to really understand what a design system is, we have to understand where it lives.
  23. 23. A design system is an organizational problem.
  24. 24. A design system is an organizational problem.
  25. 25. A design system is run like a product.
  26. 26. A design system is run like a product.
  27. 27. Resources + Operations outputs Product Product + Emotion creates Experience
  28. 28. The product is what users consume. The experience is how it makes them feel. The operations are how it’s made.
  29. 29. None of it really matters as long as your team knows what the heck you’re talking about.
  30. 30. Buttons, links, inputs, icons, etc Fonts, colors, sizing Basic documentation UI Components Grid Code style Developer tooling Design tokens High level guidelines Accessibility information Internationalization Motion guidelines Voice and tone/writing Workflow tooling
  31. 31. The benefits
  32. 32. The benefits Quick iteration Stronger brand identity Everyone speaks the same language Better user experience
  33. 33. A delivery mechanism for important goals.
  34. 34. A delivery mechanism for important goals.
  35. 35. A delivery mechanism for important goals.
  36. 36. Collaborating at Scale Design Systems at Adobe
  37. 37. spectrum
  38. 38. SPECTRUUUUUU
 UUUUUUMMM!!
  39. 39. What scale are we dealing with?
  40. 40. What scale are we dealing with? Over 250 designers world wide
  41. 41. What scale are we dealing with? Over 124 products sent to market
  42. 42. What scale are we dealing with? Available in 4 color themes
  43. 43. What scale are we dealing with? Available on 6 platforms UWP (Windows) macOS Web Desktop iOS Android Web Mobile
  44. 44. What scale are we dealing with? Built in multiple frameworks
  45. 45. This has 1,080 permutations
  46. 46. Call to action Primary Secondary Warning Over background
  47. 47. Standard & quiet styles
  48. 48. 5 interactive states
 (default, hover, down/touch, keyboard focus, disabled)
  49. 49. Extra Light Light Dark Extra Dark
  50. 50. Web Desktop macOS UWP (Windows) Web Mobile iOS Android
  51. 51. Web DesktopmacOSUWP (Windows) Web MobileiOSAndroid
  52. 52. Engineering Operations Design
  53. 53. Establishing trust Implementing at scale Designing at scale Measuring success
  54. 54. relaunching our website Establishing trust
  55. 55. 2017 Q2
  56. 56. “Is this up-to-date?” pain point
  57. 57. Spectrum “Basic Elements” - 2017 Q2
  58. 58. Lightroom CC
  59. 59. “Does this work for my product?” pain point
  60. 60. Spectrum needed to be something people can really trust.
  61. 61. Inclusion Criteria
  62. 62. Inclusion Criteria cross-platform 4 color themes accessible documentation etc.
  63. 63. website
  64. 64. website spectrum=
  65. 65. Interactive playground Resources Anatomy Variations Usage guidelines Keyboard interactions
  66. 66. Imperative vs. Declarative Approach
  67. 67. callout image column row section column content-block callout image Imperative vs. Declarative Approach
  68. 68. callout image Imperative vs. Declarative Approach column
  69. 69. frameworks and tooling Implementing at scale
  70. 70. Designers Engineers Hybrids spectrum-react spectrum-css spectrum-native Spectrum Design Frameworks etc.
  71. 71. Spectrum DNA
  72. 72. Spectrum DNA Store constants as data Integrate constants with UI code Validate design integrity
  73. 73. checkbox-box-border-radius
  74. 74. border-radius-xsmall border-radius-small border-radius-regular border-radius-medium border-radius-large border-radius-small border-size-thin border-size-thick border-size-thicker border-size-thickest checkbox-box-border-radius
  75. 75. border-radius-xsmall border-radius-small border-radius-regular border-radius-medium border-radius-large border-radius-small border-size-thin border-size-thick border-size-thicker border-size-thickest 1 pt 2 pt 4 pt 8 pt 16 pt 2 pt 1 pt 2 pt 4 pt 8 pt checkbox-box-border-radius
  76. 76. Asset Delivery
  77. 77. Asset Delivery Cataloging & Tracking Storage & Workflow Delivery & Validation
  78. 78. an evolving design process Designing at scale
  79. 79. “Where did everything go!?” pain point
  80. 80. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these have not been vetted
  81. 81. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Switch Radio Checkbox Text Field Dropdown Tooltip Dialog
  82. 82. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Action Button Switch Radio Checkbox Text Field Tag Dropdown Slider Loader Progress Bar Tooltip Status Light Dialog Rule Tabs Basic Table Side Navigation Tool
  83. 83. How can Spectrum grow faster?
  84. 84. Spectrum Precursors
  85. 85. Spectrum Precursors
  86. 86. Spectrum Precursors
  87. 87. Spectrum Precursors
  88. 88. Documentation, a design process
  89. 89. Involve various disciplines early.
  90. 90. Involve various disciplines early.
  91. 91. scorecards Measuring success
  92. 92. How can we measure adoption at scale? pain point
  93. 93. Spectrum Scorecards
  94. 94. Spectrum Scorecards
  95. 95. Spectrum Scorecards Self-assessment
  96. 96. Spectrum Scorecards Self-assessment Spectrum assessment
  97. 97. color system elements icons inclusive etc.
  98. 98. color system elements icons inclusive etc.
  99. 99. color system elements icons inclusive etc.
  100. 100. Engineering Operations Design
  101. 101. Thank you! Sarah @sarah_federman Special thanks to PJ Buddhari (@pudjeeb_pj )for her contributions to the content and slides.

×