Balancing change in design systems

Df61cca31c740e23c1055ad7e553d0d8?s=47 Jan Toman
September 04, 2018

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.

Df61cca31c740e23c1055ad7e553d0d8?s=128

Jan Toman

September 04, 2018
Tweet

Transcript

  1. 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
  2. 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 .
  3. 10.
  4. 11.
  5. 12.
  6. 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.
  7. 14.
  8. 15.
  9. 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.
  10. 17.

    When you want to change so many stuff for so

    many people, it is important to balance it very carefully @HonzaTmn
  11. 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
  12. 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
  13. 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.
  14. 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
  15. 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.
  16. 26.

    @HonzaTmn „What is the smallest possible thing that can help

    us?“ Improve how our products look & feel
  17. 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.
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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.
  24. 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.
  25. 48.

    @HonzaTmn Plugin for better efficiency It’s possible because design system

    provides shared standard … and many other small projects are created.
  26. 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