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 System as a Product

401 views

Published on

Design System as a Product - Maria Elena Duenias, Esther Butcher

Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Design System as a Product

  1. 1. 1 Design Systems as a Product #YConf2020 © 2020 ThoughtWorks
  2. 2. 2 About us Maleh Duenias Senior Developer @maledr5 Esther Butcher Senior Experience Designer #notwitter
  3. 3. 3 What is a Design System? What is a design system Understand users and find value Start small The big picture Quick Agenda
  4. 4. - [First Name] [Last Name] 4 What is a Design System? Practitioners over leaders More than the basics Who will find this talk useful: New perspective Conversation starter ⛵
  5. 5. - [First Name] [Last Name] 5 What is a Design System? Practitioners over leaders More than the basics Who will find this talk useful: New perspective Conversation starter ⛵
  6. 6. - [First Name] [Last Name] 6 What is a Design System? Practitioners over leaders More than the basics Who will find this talk useful: New perspective Conversation starter ⛵
  7. 7. - [First Name] [Last Name] 7 What is a Design System? Practitioners over leaders More than the basics Who will find this talk useful: New perspective Conversation starter ⛵
  8. 8. 8© 2020 ThoughtWorks What is a Design System?
  9. 9. - [First Name] [Last Name] 9 — Sarah Federman Ask a hundred people what a design system is and you’re bound to get a hundred different answers. It seems like no one agrees 🤯 What is a Design System?
  10. 10. - [First Name] [Last Name] 10© 2020 ThoughtWorks — Nathan Curtis A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive. What is a Design System?
  11. 11. - [First Name] [Last Name] 11© 2020 ThoughtWorks — Brad Frost A design system is a humble product, in service of other products. Is the story of how your organization designs and build digital products What is a Design System?
  12. 12. 12© 2020 ThoughtWorks In other words, you build it [design system] so it fits your needs [like a product] What is a Design System?
  13. 13. 13© 2020 ThoughtWorks In other words, you build it [design system] so it fits your needs [like a product] … which needs? 🤔 What is a Design System?
  14. 14. 14© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem)
  15. 15. - [First Name] [Last Name] 15© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value!
  16. 16. 16© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value! 😳 It needs management & strategy (ownership, collaboration, adoption, marketing..)
  17. 17. - [First Name] [Last Name] 17© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value! 😃 Don’t worry, you can start small
  18. 18. - [First Name] [Last Name] 18© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value! 🧐 Just don’t forget the big picture
  19. 19. - [First Name] [Last Name] 19© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value! 🙌 Or why you’re doing it
  20. 20. - [First Name] [Last Name] 20© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value! 🙌 Or why you’re doing it
  21. 21. 21© 2020 ThoughtWorks Let’s start with your users
  22. 22. - [First Name] [Last Name] 22© 2020 ThoughtWorks You are not your user. Start with your users
  23. 23. 23© 2020 ThoughtWorks You are not your user. But in design systems, you are. Start with your users
  24. 24. - [First Name] [Last Name] 24© 2020 ThoughtWorks You are not your user. But in design systems, you are. Aren’t you? 🤔 Start with your users
  25. 25. - [First Name] [Last Name] 25© 2020 ThoughtWorks Start with your users Building a sketch library for designers, simple?
  26. 26. - [First Name] [Last Name] 26© 2020 ThoughtWorks Start with your users 🧔🏽 Power User Building a sketch library for designers, simple?
  27. 27. - [First Name] [Last Name] 27© 2020 ThoughtWorks Start with your users 🧔🏽 Power User 👨 Making it work Building a sketch library for designers, simple?
  28. 28. 28© 2020 ThoughtWorks Start with your users 🧔🏽 Power User 👩🏼‍🦰 Multi-brand Master 👨 Making it work Building a sketch library for designers, simple?
  29. 29. - [First Name] [Last Name] 29© 2020 ThoughtWorks Start with your users Research is important even when you have personal experience.
  30. 30. - [First Name] [Last Name] 30© 2020 ThoughtWorks Start with your users Research is important even when you have personal experience. Sit with teams to learn how a design system can add value and fit in with their work.
  31. 31. 31© 2020 ThoughtWorks Where’s the value?
  32. 32. - [First Name] [Last Name] 32© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions:
  33. 33. - [First Name] [Last Name] 33© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found?
  34. 34. - [First Name] [Last Name] 34© 2020 ThoughtWorks Are your customers (and business 💸) feeling the pain of an inconsistent experience? Where’s the value?
  35. 35. - [First Name] [Last Name] 35© 2020 ThoughtWorks Are teams solving the same problems again and again? Where’s the value?
  36. 36. Are your ways of working not scaling well? 36© 2020 ThoughtWorks Where’s the value?
  37. 37. - [First Name] [Last Name] 37© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found?
  38. 38. - [First Name] [Last Name] 38© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found? 2. How would a design system help?
  39. 39. - [First Name] [Last Name] 39© 2020 ThoughtWorks Do you think it will help you find a common language? Where’s the value?
  40. 40. - [First Name] [Last Name] 40© 2020 ThoughtWorks Do you think it will help you move faster? Where’s the value?
  41. 41. - [First Name] [Last Name] 41© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found? 2. How would a design system help?
  42. 42. - [First Name] [Last Name] 42© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found? 2. How would a design system help? 3. Is now the right time?
  43. 43. - [First Name] [Last Name] 43© 2020 ThoughtWorks Is there a rebrand coming? Where’s the value?
  44. 44. - [First Name] [Last Name] 44© 2020 ThoughtWorks Is your organisation growing fast? Where’s the value?
  45. 45. - [First Name] [Last Name] 45© 2020 ThoughtWorks Or maybe there is a strategic initiative that would benefit? Where’s the value?
  46. 46. - [First Name] [Last Name] 46© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found? 2. How would a design system help? 3. Is now the right time?
  47. 47. - [First Name] [Last Name] 47© 2020 ThoughtWorks Where’s the value? These 3 questions help to:
  48. 48. - [First Name] [Last Name] 48© 2020 ThoughtWorks Where’s the value? These 3 questions help to: Get everyone on the same page
  49. 49. - [First Name] [Last Name] 49© 2020 ThoughtWorks Where’s the value? These 3 questions help to: Get everyone on the same page Help leadership understand the investment
  50. 50. - [First Name] [Last Name] 50© 2020 ThoughtWorks Where’s the value? These 3 questions help to: Get everyone on the same page Help leadership understand the investment And help you to focus on where to start
  51. 51. 51© 2020 ThoughtWorks Starting small
  52. 52. 52
  53. 53. 53
  54. 54. - [First Name] [Last Name] 54© 2020 ThoughtWorks Starting small Chances are you want a design system to help more than one team.
  55. 55. - [First Name] [Last Name] 55© 2020 ThoughtWorks Starting small Chances are you want a design system to help more than one team. Let’s look at some other ways to start small.
  56. 56. - [First Name] [Last Name] 56© 2020 ThoughtWorks Starting small Chances are you want a design system to help more than one team. Let’s look at some other ways to start small. By returning to your users.
  57. 57. 57© 2020 ThoughtWorks Starting small Print out interfaces to compare and contrast
  58. 58. 58© 2020 ThoughtWorks Starting small Review codebase for existing styles and components
  59. 59. 59© 2020 ThoughtWorks Where’s the value? Pick relevant and irrelevant parts from a list https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742
  60. 60. 60© 2020 ThoughtWorks Where’s the value? EFFORT Low High High VALUE Do first Do next Don’t bother Maybe?
  61. 61. 61© 2020 ThoughtWorks Where’s the value? EFFORT Low High High VALUE Do first Do next Don’t bother Maybe? Backlog
  62. 62. - [First Name] [Last Name] 62© 2020 ThoughtWorks Where’s the value? But wait, I will bet you that when you pick up the first thing...
  63. 63. - [First Name] [Last Name] 63© 2020 ThoughtWorks Where’s the value? But wait, I will bet you that when you pick up the first thing...
  64. 64. - [First Name] [Last Name] 64© 2020 ThoughtWorks Where’s the value? Try to slice your components like any other feature.
  65. 65. 65© 2020 ThoughtWorks Where’s the value? Try to slice your components like any other feature. First Next Later Tints/Shades Functional colours Basic Usage Usage per component Dark mode Themes Brand colours Colour contrast
  66. 66. 66© 2020 ThoughtWorks Where’s the value? And, start with what you know.
  67. 67. 67© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮
  68. 68. 68© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮 🎨 Foundations, then harvest
  69. 69. 69© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮 🎨 Foundations, then harvest 🚧 Build (+ docs) as you go
  70. 70. 70© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮 🎨 Foundations, then harvest 🌏 Global and widely used 🚧 Build (+ docs) as you go
  71. 71. Start small, release early and set up good feedback loops with teams who use it 71© 2020 ThoughtWorks Where’s the value? MEASURE 📏LEARN🔎 BUILD🏗
  72. 72. 72© 2020 ThoughtWorks Don’t forget the big picture!
  73. 73. 73© 2020 ThoughtWorks Don’t forget the big picture! The “System” of Design Systems
  74. 74. 74© 2020 ThoughtWorks Where’s the value?
  75. 75. How do people find out about it? 75© 2020 ThoughtWorks The BIG picture
  76. 76. How do people find out about it? 76© 2020 ThoughtWorks The BIG picture What help do they need to get started?
  77. 77. How do people find out about it? 77© 2020 ThoughtWorks The BIG picture What help do they need to get started? What if the things they need doesn’t exist?
  78. 78. How do people find out about it? 78© 2020 ThoughtWorks The BIG picture What help do they need to get started? When there are bugs, who fixes them? What if the things they need doesn’t exist?
  79. 79. How do people find out about it? 79© 2020 ThoughtWorks The BIG picture What help do they need to get started? When there are bugs, who fixes them? How will changes be handled? What if the things they need doesn’t exist?
  80. 80. How do people find out about it? 80© 2020 ThoughtWorks The BIG picture What help do they need to get started? When there are bugs, who fixes them? How will changes be handled? Who pays for people and time required? What if the things they need doesn’t exist?
  81. 81. - [First Name] [Last Name] 81© 2020 ThoughtWorks The BIG picture The “System” of Design Systems … Is not just about the “deliverables”
  82. 82. - [First Name] [Last Name] 82© 2020 ThoughtWorks The BIG picture It’s about collaboration
  83. 83. 83© 2020 ThoughtWorks The BIG picture It’s about collaboration roles teams products
  84. 84. - [First Name] [Last Name] 84© 2020 ThoughtWorks The BIG picture It’s about ownership
  85. 85. - [First Name] [Last Name] 85© 2020 ThoughtWorks The BIG picture It’s about ownership GuildPO + core team
  86. 86. - [First Name] [Last Name] 86© 2020 ThoughtWorks The BIG picture It’s about adoption
  87. 87. - [First Name] [Last Name] 87© 2020 ThoughtWorks The BIG picture It’s about adoption 🎉 Pilot teams + success stories 📣 Share the news 👯‍♂👯 Guild
  88. 88. It’s about maintenance 88© 2020 ThoughtWorks The BIG picture
  89. 89. 🏆 Gamify it! It’s about maintenance 89© 2020 ThoughtWorks The BIG picture ♻ Contribute back ⚖ Balance QA + experience
  90. 90. - [First Name] [Last Name] 90© 2020 ThoughtWorks The BIG picture It’s about funding
  91. 91. 91© 2020 ThoughtWorks The BIG picture It’s about funding 📈 Efficiency 🤩 Users happy 🧭 Solving real problems
  92. 92. 92© 2020 ThoughtWorks Takeaways
  93. 93. - [First Name] [Last Name] 93© 2020 ThoughtWorks Takeaways This is not a recipe, You will need to figure out how a design system can work for you
  94. 94. - [First Name] [Last Name] 94© 2020 ThoughtWorks Takeaways Start with your users Even when you have some experience building products you still need to do research with designers and developers within your organisation
  95. 95. - [First Name] [Last Name] 95© 2020 ThoughtWorks Takeaways Find the value Choose 1-2 problems from your research to focus on, explain how you think a design system would help to solve them and link it back to what's happening within your organisation
  96. 96. - [First Name] [Last Name] 96© 2020 ThoughtWorks Takeaways Start small Your design system doesn’t have to be huge to powerfully change how teams work. Start with what you already know and setup feedback loops with teams who use it.
  97. 97. - [First Name] [Last Name] 97© 2020 ThoughtWorks Takeaways keep in mind the big picture There is more than tools and documentation. Find how to also start small with things like collaboration, adoption and maintenance.
  98. 98. - [First Name] [Last Name] 98© 2020 ThoughtWorks — Brad Frost A design system is a humble product, in service of other products. Is the story of how your organization designs and build digital products Takeaways
  99. 99. - [First Name] [Last Name] 99© 2020 ThoughtWorks Takeaways Write your own recipe, and enjoy the ride 🎢 😉 It is your story! your product.
  100. 100. Maleh Duenias Senior Developer malehduenas@thoughtworks.com @maledr5 Esther Butcher Experience Designer ebutcher@thoughtworks.com 100© 2020 ThoughtWorks

×