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

10 key mistakes the Design Systems team makes a...

Avatar for anilbms75@gmail.com [email protected]
September 29, 2021
Design
1
270

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

Avatar for anilbms75@gmail.com

[email protected]

September 29, 2021
Tweet

More Decks by [email protected]

See All by [email protected]
Enhance Developer Experience by community - Dublin DevRel Meetup
Avatar for anilbms75@gmail.com anilkumar
0
44
Unlocking a world of accessibility: how internationalization is the key
Avatar for anilbms75@gmail.com anilkumar
0
74
Enhance Developer Experience by community - Code.talks 2023
Avatar for anilbms75@gmail.com anilkumar
0
110
Internationalization(i18n) of your Next.js 13 apps using i18next - enterJS 2023
Avatar for anilbms75@gmail.com anilkumar
0
96
Enhance Developer Experience by community
Avatar for anilbms75@gmail.com anilkumar
0
28
DX IS NOT THE SAME AS UX
Avatar for anilbms75@gmail.com anilkumar
0
41
10 Key Mistakes In Your API Docs and How to Avoid Them - API conference 27th April 2023
Avatar for anilbms75@gmail.com anilkumar
0
25
DESIGN-STAGE LOCALIZATION
Avatar for anilbms75@gmail.com anilkumar
0
33
why-pair-programming-is-the-best-usability-testing-technique
Avatar for anilbms75@gmail.com anilkumar
1
43

Other Decks in Design

See All in Design
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
400
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.1k
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
500
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.6k
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
480
事例で学ぶ！今日から使えるWebサービスUI改善ポイント
Avatar for NCDC ncdc
0
140
Storyboard Honey
Avatar for Rocío Parrón rocioparronrubio
0
270
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.4k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
230
DC Style Redesign
Avatar for Brynn McDucky P. mcduckyart
0
120
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
180

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
990
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k

Transcript

  1. 10 key mistakes the Design Systems team makes and how

    to avoid them? By ANIL KUMAR @anilbms75
  2. None
  3. None

  4. Experience

  5. Contentful Contentful Web app Customers/ Partners Custom app Developer Content

    creators /editors Websites

  6. 1. Documentation Image source: Unsplash

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

  8. None

  9. 2. Getting started Image source: Unsplash

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

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

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

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

  14. Onboarding Image source: Unsplash

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

  16. 3. Feedback Image source: Unsplash

  17. GitHub issue is not the only way to receive Feedback

    Image source: Unsplash

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

  19. Google Cloud Docs Feedback

  20. 4. Purpose

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

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

  23. Source: design.gitlab.com/

  24. 5. Beyond UI Image source: Unsplash

  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
  26. None
  27. None

  28. 6. Design systems entropy Image source: Unsplash

  29. Single source of truth Image source: thenounproject

  30. 7. Contribution Image source: Unsplash

  31. Consumer VS contributor Image source: Unsplash

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

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

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

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

  36. 8. Layout Image source: Unsplash

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

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

  39. 9. Information architecture Image source: Unsplash

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

  41. 10. Maintenance Image source: Unsplash

  42. Create new reusable components Image source: Unsplash

  43. Deprecate components Image source: Unsplash

  44. Pair Programming with your consumers Image source: Undraw

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

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