Balancing change in design systems

When we want to change so many things like we usually change with the design system, we need to think of how to do it in a non-breaking way. Going with a lean approach, setting small and actionable steps, communicating properly - all that can help us to build a culture that will support our design systems activities.

The talk was presented on Annual Designers Meetup at Avast.

Transcript

1. Balancing change in design systems Jan Toman, Kiwi.com @HonzaTmn
2. Jan Toman Twitter: @HonzaTmn
3. Design systems are popular. @HonzaTmn
4. @HonzaTmn
5. @HonzaTmn
6. @HonzaTmn
7. @HonzaTmn Starting with goals
8. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Improve visual look of our landing pages Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
9. @HonzaTmn “Change doesn’t happen overnight.“ L o t o f p e o p l e s a i d t h a t . I j u s t a g r e e .
10. @HonzaTmn
11. @HonzaTmn
12. @HonzaTmn
13. @HonzaTmn What do we want to change with design system? Visual design Technology Tools Processes Communication Tone & Voice Approach to accessibility Approach to documentation Sharing etc.
14. @HonzaTmn
15. @HonzaTmn
16. @HonzaTmn Who are users of design system? „Everyone in digital“ Visual designers UX Designers Front-end developers QA testers Copywriters Marketers Biz Dev Product managers External partners etc.
17. When you want to change so many stuff for so many people, it is important to balance it very carefully @HonzaTmn
18. Our journey to balance @HonzaTmn
19. We just played it safe. @HonzaTmn Because we didn’t want to break wrong things.
20. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
21. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
22. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn Let’s focus on one goal. And do it right.
23. @HonzaTmn Why it needed to be improved in the first place? Because people didn’t use prepared assets and foundations. Why they didn’t use it? Improve how our products look & feel
24. „Assumption is the mother of all fuck ups.“ @HonzaTmn - U n k n o w n
25. „Did you know we already have UI library?“ @HonzaTmn Yes, but it’s never up to date. Yes, but these component aren’t flexible enough for what I need. I don’t know where to find our icons. It’s faster to copy it from web. I didn’t know we have something. Yes, but it’s easier to just draw/code it again.
26. @HonzaTmn „What is the smallest possible thing that can help us?“ Improve how our products look & feel
27. „We will start only with designers.“ @HonzaTmn Improve how our products look & feel
28. @HonzaTmn Availability Speed Quality Awareness
29. @HonzaTmn Availability Speed Quality Awareness
30. Availability @HonzaTmn Speed Quality Awareness No popup windows, no fancy plugins, just basics.
31. Availability @HonzaTmn Speed Quality Awareness Simple symbols = faster designing Each component variation as separate symbol. Overrides only for content, nothing else. Type longer explanation of your info message here… If it’s a short message, use Default type. One line title that sums up the message Layout guidelines.
32. Availability @HonzaTmn Speed Quality Awareness Layout guidelines inside of symbols
33. Availability @HonzaTmn Speed Quality Awareness Original passenger info Polished passenger info Original button Polished button
34. Availability @HonzaTmn Speed Quality Awareness This was important!
35. Availability @HonzaTmn Speed Quality Awareness Most of the designers used our Sketch library from day one.
36. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
37. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
38. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
39. Improve how our products look & feel Prepare our products for rapid change of design Improve consistency of our microcopy Create culture of contribution Synchronize components between design tools and code Synchronize design and behavior across mobile and desktop Prepare documentation for designers and developers Improve accessibility Make onboarding easy Match our marketing campaigns with product visual Improve communication between designers and devs Prepare guidelines for our whitelabels & partners @HonzaTmn
40. @HonzaTmn “Nothing is invented and perfected at the same time.“ - J o h n R a y
41. Is all the effort worth it? @HonzaTmn
42. It’s hard to measure it quantitatively. Possible, but hard. @HonzaTmn
43. @HonzaTmn How much of your time do you think our design system saves? It depends on how much coding the task requires. About 30% on average. Plus some accidental fixes
44. @HonzaTmn QA testers Design Developer Handoffs We don’t need that many skilled coders anymore Design system provides needed components in code. So our front-end engineers can focus on delivering new features.
45. @HonzaTmn From low-fidelity to approved design in one day Our design system is taken as visual standard Low-fidelity prototype Design system applied No pixel pushing. No discussion about colors or typography. Quick check by design system team Iteration. Done.
46. @HonzaTmn Design system inspires people to take the action Non-measurable value
47. @HonzaTmn Tool for generating new themes It’s possible because design system provides shared standard
48. @HonzaTmn Plugin for better efficiency It’s possible because design system provides shared standard … and many other small projects are created.
49. An investment into design system is worth the effort. @HonzaTmn
50. @HonzaTmn Don’t assume - ask people what doesn’t work for them Don’t change everything - especially when it’s not needed Focus on smaller tasks - the progress will come with them Be flexible - you can’t plan everything Communicate often and early - so people feel prepared
51. I will happily answer your questions + follow me on Twitter: @HonzaTmn