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

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: anilbms75@gmail.com
    Linkedin: linkedin.com/in/anilkrishnashetty
    

    View Slide