Design Systems - Polish Berlin Tech

A primer in design systems, what they are, why you want one and a couple of sales tactics on getting the ball rolling for your team and company.

Originally given as a talk at Polish Berlin Tech event in January 2018.

Transcript

1. Design Systems
2. Hello!
3. Let’s talk scaling.
4. Step 1: Your company grows.
5. Step 2: You launch more products.
6. Step 3: You hire more people.
7. Step 4: Those people launch their own experiments, initiatives and internal and external products.
8. Marketing landing pages.
9. Mobile apps.
10. Flyers.
11. Websites.
12. Banner campaigns.
13. Everyone works inside their neat little silo of a team, without paying attention to what happens at a global level.
14. Step 5: You’re successful and you go global. Communication gets more fragmented as you go.
15. Suddenly…
16. ! : Dan Mall
17. !
18. How do you fix that?
19. Enter design systems.
20. Design systems are a shared language.
21. Design systems work at three levels.
22. Level 1: Reusable library of documented components.
23. Level 2: Reusable library of documented rules, principles, best practices, ideas and values.
24. Level 3: Connected community of people invested in consistency and quality of the products.
25. In other words: Design system is a product used to build other products.
26. That’s all great, but how do we actually build one?
27. Getting buy-in.
28. “Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev
29. Designers: We can maintain consistency across our designs so you can focus on innovation rather than pixel pushing.
30. Designers: Oh, if you enjoy pixel pushing, come work on design systems with me, so we can do pixel pushing at a global level.
31. Developers: We’ll work on a UI framework that you can use like Bootstrap / Material / something they know, so you can focus on important code things.
32. Executives: We can build better, more consistent products, faster.
33. Executives:
34. Customer success: UI bugs and issues are basically a thing of the past.
35. Product management: You’ll be able to quickly mock up your experiments using a kit of elements without investing a lot of time.
36. Product management: More product ideas in less time.
37. Marketing: We can easily align marketing message with visual language — principles-based design.
38. Marketing: You can easily generate marketing materials out of blocks that designers supply.
39. Gathering requirements.
40. ✅ Sketch Library ✅ CSS Framework ✅ UI kit for Visio (for PMs)
41. Interface inventory.
42. Pro tip: print it out.
43. Building a team.
44. “Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev
45. R/A/C/I
46. Responsible/A/C/I
47. R/Accountable/C/I
48. R/A/Consulted/I
49. R/A/C/Informed
50. Interface inventory.
51. Building it out.
52. Document everything.
53. Design tokens.
54. “Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.” https://www.lightningdesignsystem.com/design-tokens/
55. Good design token represents meaningful value and a design choice.
56. $brand-blue
57. $color-link-regular
58. Component library.
59. Atomic Design.
61. http://atomicdesign.bradfrost.com/
62. !
63. !
64. Congratulations, you now have a design system.
65. Congratulations, you now have a design system style guide.
66. !
67. Level 3: Connected community of people invested in consistency and quality of the products.
68. Evangelize.
69. Add design system as part of your company onboarding.
70. Do workshops.
71. Explain.
72. Get everyone on board.
73. Extra points: Build a dedicated Design Systems Engneering team whose sole purpose is maintaining, updating and evangelizing design system.
74. Congratulations, you now have a design system.
75. Get inspired:
76. WeWork (hi! ) Plasma http://plasma.guide/
77. VMWare Clarity https://vmware.github.io/clarity/
78. IBM Carbon http://carbondesignsystem.com/
79. Salesforce Lightning https://www.lightningdesignsystem.com/
80. Design Systems community on Slack http://designsystems.herokuapp.com/
81. Have fun and explore!
82. Thanks!
83. @dotmariusz