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
3. Atlassian Design System is the cornerstone of crafting quality user interfaces at scale.
5. 18+ products
6. 4000+ designers & developers 18+ products
7. 18+ products 30,000+ marketplace 
 vendors 4000+ designers & developers
8. 18+ products millions end customers 4000+ designers & developers 30,000+ marketplace 
 vendors
9. The ‘wicked’ intersection
10. The ‘wicked’ intersection PAST High maintenance burden
11. The ‘wicked’ intersection PAST High maintenance burden PRESENT Hyper growth driving high demand No longer modern, world class or useful
12. 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!?!?
13. Unleashing the potential for high quality design decisions to be made with confidence and speed. ✨ Going smaller to go bigger
14. ✨
15. ✨ TEAM
16. ✨ TEAM COMPOSABILITY
17. ✨ TEAM COMPOSABILITY FUTURE VISION
18. Team
19. When a design system tries to please everyone, it pleases no one
20. When a design system tries to please everyone, it pleases no one Image credit: The Pokemon Company
22. PRODUCT
23. SERVICE PRODUCT
24. SERVICE VALUE PRODUCT
25. SERVICE VALUE PRODUCT Design Systems are for people
27. Image credits @JohnnyParr @CallaghanDesign
28. An organization’s output is directly related to how it communicates internally 
 Conway’s Law
31. Thanks for capturing all this and for seeking our feedback regularly as this evolves! Co-designing our future is really empowering. Jack Lo Russo, Design Systems Engineer … …
32. Thanks for capturing all this and for seeking our feedback regularly as this evolves! Co-designing our future is really empowering. Jack Lo Russo, Design Systems Engineer I’m also keen to know how these partner relationships are going to be developed. Ali Pereira, Design Systems Designer … … … …
33. One team
34. UI Foundations UI Foundations Accessibility Maker Experience Teams Four mission driven teams
35. UI Foundations UI Foundations Accessibility Maker Experience Enablement and adoption Enterprise grade Service and support Teams Shared Capabilities Atlassian Design System leadership Leads Four mission driven teams
36. You will ship your org. Embrace this to be mission focused.
37. Composability
38. UI Foundations UI Foundations Accessibility Maker Experience
39. UI Foundations UI Foundations Accessibility Maker Experience
40. Maintainable Scalable Flexible
41. Maintainable Scalable Confluence → Jira → Trello → Flexible
42. Maintainable New products and experiences Scalable Flexible
43. Easily supported by the DS team Maintainable Scalable Flexible
44. 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!
45. 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!
46. 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
47. 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
48. 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
49. 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
50. 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
51. 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
52. 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
53. 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
54. 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. elevation.surface.default text.default Space.100 8 Inline Space.100 8 Stack avatar.small icon.button heading.small This is a smaller header space.200 16 Box space.150 12 Stack
55. 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
56. 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
57. But how ? Design Tokens Primitives New!
58. But how ? Design Tokens The single source of truth to name and store design decisions. Primitives New!
59. 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!
60. But how ?
61. But how ? UI foundations Our products Tokens Primitives
62. Guidance is 🫅. Embed it into your system, every step of the way.
63. 8 How it started… Hi there!
64. “I don’t understand when 
 I can use 8px and when I can use 4px.” Inconsistent guidance How it started… 8
65. “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
66. “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
67. “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
68. “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?
69. 64 48 40 32 24 20 12 16 6 4 How it’s going… Scale 8 Welcome friends!
70. 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
71. How it’s going… Box Stack Inline Scale Tokens Primitives
72. How it’s going… Scale Tokens Primitives Grid
73. MAKERS Scale Tokens Primitives Grid How it’s going…
74. Scale Tokens Primitives Grid Responsive Density MAKERS CUSTOMERS How it’s going…
75. Box Stack Inline space.300 24 Box space.300 24 Stack space.300 24 Inline Layout primitives
76. Box Stack Inline Layout primitives
77. 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!
78. 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!
79. 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!
80. 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
81. 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!
82. 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
83. 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!
84. 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
85. 🖥 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
86. 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
87. 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
88. 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
89. 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
90. 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
91. Strive for parity 🔮 but allow it to come in different forms* * meet the maker where they are
92. Let’s talk about code for a bit… Hi, there!
93. UX: Design and Code UX: Design and Code + UX: Design and Code
94. + UX: Design and Code
95. Let’s build our card for real!
101. Why stop there? Primitives can be applied to other UI foundations… Are we stopping?
102. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
103. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
104. Wow, finally after so many years, we have an amazing portal with a long description to top up the lorem ipsum Travel Service Desk
105. Key benefits
106. Key benefits Increased designer and developer productivity
107. Key benefits Increased designer and developer productivity • Pervasive IA: Terminology parity, better handovers
108. Key benefits Increased designer and developer productivity • Pervasive IA: Terminology parity, better handovers Less time handling boilerplate, more time spent shipping
109. 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
110. Handover 🤝
 in detail 🔍
111. + Bring the tools closer together
112. + ❤ Bring the tools closer together
113. Bring the tools closer together Box Stack Inline
114. Bring the tools closer together
115. Bring the tools closer together
116. What about bespoke experiences?
117. xcss What about bespoke experiences?
118. Full docs: go.atlassian.com/xcss xcss: An example
119. xcss: An example Full docs: go.atlassian.com/xcss
120. xcss: An example Full docs: go.atlassian.com/xcss
121. Auto layout What about vendor lock-in?
122. What about vendor lock-in?
123. Three 🔑
 principles
124. Elements to success Cohesion Composition Confidence
125. Cohesion Ensure cohesive experiences that are distinctly Atlassian while not restricting the creativity and unique expression of our makers Composition Confidence
126. Composition Confidence Cohesion
127. Cohesion Composition Smaller pieces mean higher fidelity. They can be composed infinitely with each use being declarative and intentionally expressive. Confidence
128. Composition Confidence Cohesion
129. Cohesion Composition Confidence More expressive & declarative code ‑‐ Better target for code transformation tools ‑‐ Keeping code up-to- date with latest
130. Composition Confidence Cohesion
131. Composition Confidence Cohesion
132. Future Vision
133. PAST PRESENT 2023 FUTURE 2033 What do the next 10 years hold?
134. PAST PRESENT 2023 FUTURE 2033 What do the next 10 years hold?
135. Make experience quality the pit of success
136. Make experience quality the pit of success
137. Make experience quality the pit of success
138. We’re shifting our culture through systems thinking. “ Jennie Yip | Principal Design Architect 
 Atlassian Design System
141. Thank you for adding dark mode! This was an accessibility issue for some people like me. “ JIRA CUSTOMER
142. Thank you for adding dark mode! This was an accessibility issue for some people like me. “ JIRA CUSTOMER
143. Primitives are awesome. [They are] genuinely low effort and high impact. “ ATLASSIAN DEVELOPER
144. Primitives are awesome. [They are] genuinely low effort and high impact. “ ATLASSIAN DEVELOPER
145. Systemic Shifts
146. Systemic Shifts
147. Systemic Shifts
148. What have we learned? atlassian.design
151. THANK YOU Maria Christley Head of Design
 UI Platform Eva Plaisted Senior Product Designer
 Atlassian Design System
 Klaus Paiva Senior Engineer
 Atlassian Design System