$30 off During Our Annual Pro Sale. View Details »

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
51
Unlocking a world of accessibility: how internationalization is the key
Avatar for anilbms75@gmail.com anilkumar
0
75
Enhance Developer Experience by community - Code.talks 2023
Avatar for anilbms75@gmail.com anilkumar
0
120
Internationalization(i18n) of your Next.js 13 apps using i18next - enterJS 2023
Avatar for anilbms75@gmail.com anilkumar
0
100
Enhance Developer Experience by community
Avatar for anilbms75@gmail.com anilkumar
0
29
DX IS NOT THE SAME AS UX
Avatar for anilbms75@gmail.com anilkumar
0
45
10 Key Mistakes In Your API Docs and How to Avoid Them - API conference 27th April 2023
Avatar for anilbms75@gmail.com anilkumar
0
27
DESIGN-STAGE LOCALIZATION
Avatar for anilbms75@gmail.com anilkumar
0
37
why-pair-programming-is-the-best-usability-testing-technique
Avatar for anilbms75@gmail.com anilkumar
1
55

Other Decks in Design

See All in Design
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
240
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
1.1k
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
210
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
0
130
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
150
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
140
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
0
260
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
110
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
350
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
380
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
290

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Done Done
Avatar for chrislema chrislema
186
16k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k

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