Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 key mistakes the Design Systems team makes and how to avoid them?

[email protected]
September 29, 2021

10 key mistakes the Design Systems team makes and how to avoid them?

[email protected]

September 29, 2021
Tweet

Other Decks in Design

Transcript

  1. 10 key mistakes the
    Design Systems team
    makes and how to
    avoid them?
    By ANIL KUMAR @anilbms75

    View Slide

  2. View Slide

  3. View Slide

  4. Experience

    View Slide

  5. Contentful
    Contentful Web
    app
    Customers/
    Partners
    Custom app
    Developer
    Content creators
    /editors
    Websites

    View Slide

  6. 1. Documentation
    Image source: Unsplash

    View Slide

  7. Documentation is not for just you, its for your
    consumers

    View Slide

  8. View Slide

  9. 2. Getting started
    Image source: Unsplash

    View Slide

  10. Source: reactjs.org/docs/getting-started.html

    View Slide

  11. Time for value
    Source: f36.contentful.com/

    View Slide

  12. Source: chakra-ui.com/docs/form/icon-button

    View Slide

  13. Stripe friction logs technique
    Source: Suz Hinton shoptalkshow.com/409/#t=08:34

    View Slide

  14. Onboarding
    Image source: Unsplash

    View Slide

  15. Chakra onboarding
    Source: chakra-ui.com/docs/getting-started

    View Slide

  16. 3. Feedback
    Image source: Unsplash

    View Slide

  17. GitHub issue is not the only way
    to receive Feedback
    Image source: Unsplash

    View Slide

  18. Next Js Documentation Feedback
    Source: nextjs.org/docs

    View Slide

  19. Google Cloud Docs Feedback

    View Slide

  20. 4. Purpose

    View Slide

  21. Source: twitter.com/ashlie/status/1425506038506147840

    View Slide

  22. Source: twitter.com/ashlie/status/1425506038506147840

    View Slide

  23. Source: design.gitlab.com/

    View Slide

  24. 5. Beyond UI
    Image source: Unsplash

    View Slide

  25. “People don’t want a
    quarter-inch drill. They
    want a quarter-inch
    hole.”
    - Theodore Levitt
    Jobs to be done of
    your consumer
    Image source: Unsplash

    View Slide

  26. View Slide

  27. View Slide

  28. 6. Design systems entropy
    Image source: Unsplash

    View Slide

  29. Single source of truth
    Image source: thenounproject

    View Slide

  30. 7. Contribution
    Image source: Unsplash

    View Slide

  31. Consumer VS contributor
    Image source: Unsplash

    View Slide

  32. Contributions from outside
    Source: seek-oss.github.io/braid-design-system/guides/contribution/

    View Slide

  33. Ways to contribute
    Source: mantine.dev/contribute/

    View Slide

  34. Clear steps
    Source: hds.hel.fi/contributing/before-contributing

    View Slide

  35. Celebrate the contribution
    Source: github.com/contentful/forma-36

    View Slide

  36. 8. Layout
    Image source: Unsplash

    View Slide

  37. Commercetools UIKit
    Source: uikit.commercetools.com/

    View Slide

  38. Braid Design System Layout
    Source: seek-oss.github.io/braid-design-system/foundations/layout

    View Slide

  39. 9. Information architecture
    Image source: Unsplash

    View Slide

  40. Helsinki Design System
    Source: hds.hel.fi

    View Slide

  41. 10. Maintenance
    Image source: Unsplash

    View Slide

  42. Create new reusable components
    Image source: Unsplash

    View Slide

  43. Deprecate components
    Image source: Unsplash

    View Slide

  44. Pair Programming with your consumers
    Image source: Undraw

    View Slide

  45. Do You Have Any Questions?
    Image source: thenounproject

    View Slide

  46. Thanks
    Twitter: @anilbms75
    Email: [email protected]
    Linkedin: linkedin.com/in/anilkrishnashetty

    View Slide