Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

UXA2023 Eva Plaisted, Klaus Paiva and Maria Chr...

UXAustralia
August 25, 2023

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.

UXAustralia

August 25, 2023
Tweet

More Decks by UXAustralia

Other Decks in Design

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. 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!?!?
  3. Unleashing the potential for high quality design decisions to be

    made with confidence and speed. ✨ Going smaller to go bigger
  4. 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 … … … …
  5. 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
  6. 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!
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. But how ? Design Tokens The single source of truth

    to name and store design decisions. Primitives New!
  18. 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!
  19. “I don’t understand when 
 I can use 8px and

    when I can use 4px.” Inconsistent guidance How it started… 8
  20. “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
  21. “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
  22. “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
  23. “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?
  24. 64 48 40 32 24 20 12 16 6 4

    How it’s going… Scale 8 Welcome friends!
  25. 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
  26. 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!
  27. 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!
  28. 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!
  29. 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
  30. 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!
  31. 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
  32. 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!
  33. 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
  34. 🖥 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. Strive for parity 🔮 but allow it to come in

    different forms* * meet the maker where they are
  41. Wow, finally after so many years, we have an amazing

    portal with a long description to top up the lorem ipsum Travel Service Desk
  42. Wow, finally after so many years, we have an amazing

    portal with a long description to top up the lorem ipsum Travel Service Desk
  43. Wow, finally after so many years, we have an amazing

    portal with a long description to top up the lorem ipsum Travel Service Desk
  44. Key benefits Increased designer and developer productivity • Pervasive IA:

    Terminology parity, better handovers Less time handling boilerplate, more time spent shipping
  45. 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
  46. Cohesion Ensure cohesive experiences that are distinctly Atlassian while not

    restricting the creativity and unique expression of our makers Composition Confidence
  47. Cohesion Composition Smaller pieces mean higher fidelity. They can be

    composed infinitely with each use being declarative and intentionally expressive. Confidence
  48. Cohesion Composition Confidence More expressive & declarative code ‑‐ Better

    target for code transformation tools ‑‐ Keeping code up- to-date with latest
  49. We’re shifting our culture through systems thinking. “ Jennie Yip

    | Principal Design Architect 
 Atlassian Design System
  50. Thank you for adding dark mode! This was an accessibility

    issue for some people like me. “ JIRA CUSTOMER
  51. THANK YOU Maria Christley Head of Design
 UI Platform Eva

    Plaisted Senior Product Designer
 Atlassian Design System
 Klaus Paiva Senior Engineer
 Atlassian Design System