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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Experience

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

1. Documentation Image source: Unsplash

Slide 7

Slide 7 text

Documentation is not for just you, its for your consumers

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2. Getting started Image source: Unsplash

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Time for value Source: f36.contentful.com/

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Onboarding Image source: Unsplash

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

3. Feedback Image source: Unsplash

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Next Js Documentation Feedback Source: nextjs.org/docs

Slide 19

Slide 19 text

Google Cloud Docs Feedback

Slide 20

Slide 20 text

4. Purpose

Slide 21

Slide 21 text

Source: twitter.com/ashlie/status/1425506038506147840

Slide 22

Slide 22 text

Source: twitter.com/ashlie/status/1425506038506147840

Slide 23

Slide 23 text

Source: design.gitlab.com/

Slide 24

Slide 24 text

5. Beyond UI Image source: Unsplash

Slide 25

Slide 25 text

“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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

6. Design systems entropy Image source: Unsplash

Slide 29

Slide 29 text

Single source of truth Image source: thenounproject

Slide 30

Slide 30 text

7. Contribution Image source: Unsplash

Slide 31

Slide 31 text

Consumer VS contributor Image source: Unsplash

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Ways to contribute Source: mantine.dev/contribute/

Slide 34

Slide 34 text

Clear steps Source: hds.hel.ﬁ/contributing/before-contributing

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

8. Layout Image source: Unsplash

Slide 37

Slide 37 text

Commercetools UIKit Source: uikit.commercetools.com/

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

9. Information architecture Image source: Unsplash

Slide 40

Slide 40 text

Helsinki Design System Source: hds.hel.ﬁ

Slide 41

Slide 41 text

10. Maintenance Image source: Unsplash

Slide 42

Slide 42 text

Create new reusable components Image source: Unsplash

Slide 43

Slide 43 text

Deprecate components Image source: Unsplash

Slide 44

Slide 44 text

Pair Programming with your consumers Image source: Undraw

Slide 45

Slide 45 text

Do You Have Any Questions? Image source: thenounproject

Slide 46

Slide 46 text

Thanks Twitter: @anilbms75 Email: anilbms75@gmail.com Linkedin: linkedin.com/in/anilkrishnashetty