This document outlines the five pillars for establishing a design system: 1) Sell it by preparing an elevator pitch and value proposition, 2) Research users and components, 3) Design system components and establish UX principles, 4) Build out the components and documentation, and 5) Maintain the system through semantic versioning and scaling it to stay flexible over time. Design systems offer benefits like consistency, improved quality, and speed but also require tradeoffs that restrict other parts of the design process.

1. DESIGNSYSTEMSThe Full Story

2. HELLOI’M
TIMSCHOCH
2004 – 2012
Webdesigner / Developer
Since 2013
UX Designer
Since 2016
Freelancer

5. tim@timschoch.com
schochtim@UXAustralia#DL19
@tim_schoch

6. style guides, UX patterns and
functional components.
Design systems combine

7. stand-alone products that
need to be maintained.
Design systems are

8. There is no warrant for
a design system in itself.

9. FIVEPILLARS

11. 1stSELLIT

13. PREPARE
– Quick Research
– Value Proposition
– Scope and Resources

14. FUNDING
– Dedicated Budget
– Product Team Rotation
– Licencing

15. Consistency
Improved Quality
Speed
Benefits of a Design System

16. Design systems offer advantages,
while restricting other parts
of the current process.
It’s a trade off

17. Design systems allow others
to focus on generating value.
Elevator Pitch

18. 2ndRESEARCH

19. Design systems need to know
the reason they exist.
What problem are we solving?

20. WHOARE
OURUSERS?
– Users
– Product Teams

21. COMPONENTINVENTORY

22. THEGOAL
– Create a shared vision
– Define realistic scope
– Decide on UX Principles
– Name it

23. 3rdDESIGN

28. WETRADE
PERFECTION
FORSPEEDAND
CONSISTENCY

29. NAMINGhelps with adoption

30. 4thBUILD

31. DRY

32. WET

33. BUTTON
Variations
– Primary
– Secondary
– Outline
– Ghost
Properties
– Label
– Sub-Label
– Icon
– Animated
States
– Default
– Hover
– Active
– Disabled

34. 644 × 4 × 4

35. 804 × 4 × 5

36. CARD
Variations
– Default
– Hero
– Small
– Product
– Testimonial
Properties
– Title
– Sub-Title
– Category
– Images
– Video
– Description
– Author
– More Link
– Product
– Price
– Discount
– Ribbon
States
– Default
• Hover
• Selected
– Highlighted
• Hover
• Selected

37. 3605 × 6 × 12

39. DRY+WET

40. DOCUMENTATION
– Vision
– UX Principles + Patterns
– Components
– Tokens
– Change log
– Contact page

41. eg. Storybook eg. zeroheight

42. 5thMAINTAIN

44. EVERYTHINGis a public API

45. 1.4.2
Major.Minor.Bugfix
Semantic Versioning

46. SCALINGhow to build rigid and stay flexible

48. WRAPUP

51. LINKS+ARTICLES
tsc.li/followup
KEEPINCONTACT
@tim_schoch
in/schochtim
ICONS
icofont.com
simpleicons.org
PICTURES
Me 