UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution

Over the past 2 years the Atlassian Design System team have been reimagining how a design system needs to evolve to be a force multiplier for good - good for our own team, good for our designers and developers and good for our customers. They’ll share their journey towards unlocking a thriving design system which supports the past, the present and the future all at the same time and how they evolved it to drive both purpose and impact at scale. In a time of economic uncertainty, different design models of what good looks like not only become necessary but essential to fuel the next decade of design system’s growth. We’ll share the highs and lows and wisdom we have gained by going smaller, to go bigger.

Transcript

1. Going smaller to go bigger. A design system’s evolution. Maria Christley Head of Design
 UI Platform Eva Plaisted Senior Product Designer
 Atlassian Design System
 Klaus Paiva Senior Engineer
 Atlassian Design System
2. Atlassian Design System is the cornerstone of crafting quality
4. 18+ products
5. 4000+ designers & developers 18+ products
6. 18+ products 30,000+ marketplace 
 vendors 4000+ designers & developers
7. 18+ products millions end customers 4000+ designers & developers 30,000+ marketplace 
 vendors
8. The ‘wicked’ intersection PAST High maintenance burden PRESENT Hyper growth driving high demand No longer modern, world class or useful FUTURE What future? No time!?!?
9. Unleashing the potential for high quality design decisions to be made with confidence and speed. ✨ Going smaller to go bigger
10. ✨ TEAM COMPOSABILITY FUTURE VISION
11. Team
12. When a design system tries to please everyone, Image credit: The Pokemon Company
13. SERVICE VALUE PRODUCT Design Systems are for people
14. Image credits @JohnnyParr @CallaghanDesign
15. An organization’s output is directly related to how it communicates internally 
 Conway’s Law
17. Thanks for capturing all this and for seeking our feedback regularly as this evolves! Co-designing our future is really empowering. I’m also keen to know how these partner relationships are going to be developed. Ali Pereira, Design Systems Designer … … … …
18. One team
19. UI Foundations UI Foundations Accessibility Maker Experience Teams Four mission driven teams
20. UI Foundations UI Foundations Accessibility Maker Experience Enablement and adoption Enterprise grade Service and support Teams Shared Capabilitie s Atlassian Design System leadership Leads Four mission driven teams
21. You will ship your org. Embrace this to be mission focused.
22. Composability
23. UI Foundations UI Foundations Accessibility Maker Experience
24. UI Foundations UI Foundations Accessibility Maker Experience
25. Maintainable Scalable Flexible
26. Maintainable Scalable Confluence → Jira → Trello → Flexible
27. Maintainable New products and experiences Scalable Flexible
28. Easily supported by the DS team Maintainable Scalable Flexible
29. This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action Let’s build a card!
30. This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action
31. Flexible Scalable Maintainable Create a super card 🦸 This is a heading I'm baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action
32. Flexible Scalable Maintainable Action Build ALL the cards This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action
33. Flexible Scalable Maintainable This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action Break it down 🕺 Flexible Scalable Maintainable
34. Break it down 🕺 This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action Flexible Scalable Maintainable
35. This is a heading I'm baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action
36. This is a heading I'm baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action Action
37. This is a heading This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa mustache yes plz unicorn YOLO. Praxis banh mi jawn stumptown kitsch green yuccie. Action elevation.surface.default Image space.300 24 Box heading.default text.default space.200 16 Stack Space.100 8 Inline Space.100 8 Stack button avatar.small icon.button heading.small This is a smaller header space.200 16 Box space.150 12 Stack
38. This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa. This is a smaller header This is a subtitle Edited 4 July 2023
39. This is a description. I’m baby jawn godard ennui, big mood mustache af jean shorts. Shaman vibecession tumblr, food truck 8-bit quinoa. This is a smaller header This is a subtitle Edited 4 July 2023
40. But how ? Design Tokens Primitives New!
41. But how ? Design Tokens The single source of truth to name and store design decisions. Primitives New!
42. But how ? Design Tokens The single source of truth to name and store design decisions. Primitives The scaffolding built around design tokens to guide usage. New!
43. But how ? UI foundations Our products Tokens Primitives
44. Guidance is 🏽. Embed it into your system, every step
45. 8 How it started… Hi there!
46. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance How it started… 8
47. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance “I use grid size with any multiple to get the values my designers request.” Creative use of grid-size How it started… 8
48. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance “I use grid size with any multiple to get the values my designers request.” Creative use of grid-size “How should I space elements apart on my page?” Lack of updated grids How it started… 8
49. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance “I use grid size with any multiple to get the values my designers request.” Creative use of grid-size “Why are all these page widths inconsistent?” A layout crisis “How should I space elements apart on my page?” Lack of updated grids How it started… 8
50. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance “What the f%*& are our breakpoints?” No framework for responsive “I use grid size with any multiple to get the values my designers request.” Creative use of grid-size “Why are all these page widths inconsistent?” A layout crisis “How should I space elements apart on my page?” Lack of updated grids How it started… 8 Wait, isn’t it 2023?
51. 64 48 40 32 24 20 12 16 6 4 How it’s going… Scale 8 Welcome friends!
52. How it’s going… space.025 space.050 space.075 space.100 space.150 space.200 space.250 space.300 space.400 space.500 space.600 space.800 Scale Tokens 64 48 40 32 24 20 12 16 6 4 8
53. How it’s going… Box Stack Inline Scale Tokens Primitives
54. How it’s going… Scale Tokens Primitives Grid
55. MAKER S Scale Tokens Primitives Grid How it’s going…
56. Scale Tokens Primitives Grid Responsive Density MAKER S CUSTOMER S How it’s going…
57. Box Stack Inline space.300 24 Box space.300 24 Stack space.300 24 Inline Layout primitives
58. Box Stack Inline Layout primitives
59. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk <avatar> <heading> <text> Let’s build with primitives!
60. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk Let’s build with primitives!
61. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk space.300 24 Box Let’s build with primitives!
62. Let’s build with primitives! Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
63. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk space.200 16 Inline Let’s build with primitives!
64. Let’s build with primitives! Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
65. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk space.050 4 Stack Let’s build with primitives!
66. Let’s build with primitives! Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
67. 🖥 space.300 24 Box space.200 16 Inline space.050 4 Stack But wait…there’s more! Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
68. But wait…there’s more! 📱 space.200 16 Box space.050 4 Stack space.150 12 Inline Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk 🖥 space.300 24 Box space.200 16 Inline space.050 4 Stack Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
69. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Operations Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Financial Month End Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Customer Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Sales Ops Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum SWAGs Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum HR Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Onboarding Let’s put it into action
70. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Operations Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Financial Month End Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Customer Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Sales Ops Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum SWAGs Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum HR Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Onboarding space.800 64 Stack space.800 64 Stack space.300 24 Box space.200 16 Inline space.050 4 Stack
71. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Operations Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Financial Month End Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Customer Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Sales Ops Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum SWAGs Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum HR Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Onboarding space.500 40 Stack space.200 16 Box space.150 12 Inline space.050 4 Stack space.500 40 Stack
72. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Sales Ops Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum IT Support Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum SWAGs Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum HR Service Desk Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Onboarding
73. Strive for parity 🔮 but allow it to come in different forms* * meet the maker where they are
74. Let’s talk about code for a bit… Hi, there!
75. UX: Design and Code UX: Design and Code + UX: Design and Code
76. + UX: Design and Code
77. Let’s build our card for real!
83. Why stop there? Primitives can be applied to other UI foundations… Are we stopping?
84. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
85. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
86. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
87. Key benefits
88. Key benefits Increased designer and developer productivity
89. Key benefits Increased designer and developer productivity • Pervasive IA: Terminology parity, better handovers
90. Key benefits Increased designer and developer productivity • Pervasive IA: Terminology parity, better handovers Less time handling boilerplate, more time spent shipping
91. Key benefits Increased designer and developer productivity • Pervasive IA: Terminology parity, better handovers Less time handling boilerplate, more time spent shipping 6+ hours saved / week of design time
92. Handover 🤝
 in detail 🔍
93. + Bring the tools closer together
94. + ❤ Bring the tools closer together
95. Bring the tools closer together Box Stack Inline
96. Bring the tools closer together
97. Bring the tools closer together
98. xcss What about bespoke experiences?
99. Full docs: go.atlassian.com/xcss xcss: An example
100. xcss: An example Full docs: go.atlassian.com/xcss
101. xcss: An example Full docs: go.atlassian.com/xcss
102. Auto layout What about vendor lock-in?
103. Three 🔑
 principles
104. Elements to success Cohesion Composition Confidence
105. Cohesion Ensure cohesive experiences that are distinctly Atlassian while not restricting the creativity and unique expression of our makers Composition Confidence
106. Composition Confidence Cohesion
107. Cohesion Composition Smaller pieces mean higher fidelity. They can be composed infinitely with each use being declarative and intentionally expressive. Confidence
108. Composition Confidence Cohesion
109. Cohesion Composition Confidence More expressive & declarative code ‑‐ Better target for code transformation tools ‑‐ Keeping code up- to-date with latest
110. Composition Confidence Cohesion
111. Future
112. PAST PRESENT 2023 FUTURE 2033 What do the next 10 years hold?
113. Make experience quality the pit of success
114. We’re shifting our culture through systems thinking. “ Jennie Yip | Principal Design Architect 
 Atlassian Design System
116. Thank you for adding dark mode! This was an accessibility issue for some people like me. “ JIRA CUSTOMER
117. Primitives are awesome. [They are] genuinely low effort and high impact. “ ATLASSIAN DEVELOPER
118. Systemic Shifts
119. What have we atlassian.design
121. THANK YOU Maria Christley Head of Design
 UI Platform Eva Plaisted Senior Product Designer
 Atlassian Design System
 Klaus Paiva Senior Engineer
 Atlassian Design System