Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

    made with confidence and speed. ✨ Going smaller to go bigger
  5. When a design system tries to please everyone, it pleases

    no one Image credit: The Pokemon Company
  6. 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 … …
  7. 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 … … … …
  8. 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
  9. 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!
  10. 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!
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. But how ? Design Tokens The single source of truth

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

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

    How it’s going… Scale 8 Welcome friends!
  30. 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
  31. 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!
  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 Let’s build with primitives!
  33. 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!
  34. 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
  35. 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!
  36. 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
  37. 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!
  38. 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
  39. 🖥 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. Strive for parity 🔮 but allow it to come in

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

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

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

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

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

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

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

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

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

    issue for some people like me. “ JIRA CUSTOMER
  56. Thank you for adding dark mode! This was an accessibility

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

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