$30 off During Our Annual Pro Sale. View Details »

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

UXAustralia
PRO
August 24, 2023
Design
1
160

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
PRO

August 24, 2023
Tweet

More Decks by UXAustralia

See All by UXAustralia
UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution
uxevents
PRO
1
150
UXA2023 Yasamin Asadi - Designing for a post-lockdown metaverse
uxevents
PRO
0
77
UXA2023 Penny Goodwin - Information Architecture and product development
uxevents
PRO
0
130
UXA2023 Andy Budd - Design’s Mid-Life Crisis
uxevents
PRO
0
500
Graphic Recording - Andy Budd
uxevents
PRO
0
370
UXA2023 Erin Casali - Driving organizational change with co-design
uxevents
PRO
0
360
UXA2023 Alina Butolina - The Value of Global Inclusive Design Practices
uxevents
PRO
1
160
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxevents
PRO
0
170
UXA2023 Julia Suh - Driving a multi-sector collaboration for countering online child sexual exploitation
uxevents
PRO
0
34

Other Decks in Design

See All in Design
Rettyとオレンジの歩み
y__ri9813
0
530
Goodpatch Tokyo Tour💙 / We are hiring!
goodpatch
27
650k
ゼロから学ぶWebアクセシビリティ～導入編～
magi1125
4
810
Lecciones de desarrollo de producto en Get on Board
getonbrd
0
170
Adding a Touch of glitr
achafetz
0
300
保育士がデザイナーになって直面した壁とこれからの挑戦
kubosaya
1
450
レガシー産業における顧客理解とデザインの実践 / Customer understanding and design practice in legacy industries
kaminashi
1
1k
目を惹くポートフォリオの8つのポイントと6つのコツ / 8 key points and 6 tips for portfolios
takeshiinotsume
4
330
UXA2023 Alina Butolina - The Value of Global Inclusive Design Practices
uxaustralia
PRO
0
170
今日から始めるDesignOpsのヒント
isaikaori
1
180
UXA2023 Elle Geraghty - Chat GPT and your content: What works and what doesn’t.
uxaustralia
PRO
0
130
UXデザイナーというものが アジャイルに入ってみた!
muture
0
210

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
264
26k
The Language of Interfaces
destraynor
149
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.4k
WebSockets: Embracing the real-time Web
robhawkes
58
6.6k
Designing on Purpose - Digital PM Summit 2013
jponch
108
6.2k
How GitHub Uses GitHub to Build GitHub
holman
467
280k
The Cost Of JavaScript in 2023
addyosmani
9
3k
No one is an island. Learnings from fostering a developers community.
thoeni
14
1.8k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
GraphQLの誤解/rethinking-graphql
sonatard
45
8.7k
Git: the NoSQL Database
bkeepers
PRO
420
62k

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

    View Slide

  2. View Slide

  3. Atlassian Design System is the
    cornerstone of crafting quality user
    interfaces at scale.

    View Slide

  4. View Slide

  5. 18+ products

    View Slide

  6. 4000+
    designers &
    developers
    18+ products

    View Slide

  7. 18+ products
    30,000+

    marketplace 

    vendors

    4000+
    designers &
    developers

    View Slide

  8. 18+ products
    millions

    end

    customers
    4000+
    designers &
    developers
    30,000+

    marketplace 

    vendors

    View Slide

  9. The ‘wicked’ intersection

    View Slide

  10. The ‘wicked’ intersection
    PAST
    High maintenance
    burden

    View Slide

  11. The ‘wicked’ intersection
    PAST
    High maintenance
    burden
    PRESENT
    Hyper growth driving
    high demand
    No longer modern,
    world class or useful

    View Slide

  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!?!?

    View Slide

  13. Unleashing the potential for high quality
    design decisions to be made with
    confidence and speed.
    ✨
    Going smaller to go bigger

    View Slide

  14. ✨

    View Slide

  15. ✨
    TEAM

    View Slide

  16. ✨
    TEAM
    COMPOSABILITY

    View Slide

  17. ✨
    TEAM
    COMPOSABILITY
    FUTURE
    VISION

    View Slide

  18. Team

    View Slide

  19. When a design system
    tries to please everyone,

    it pleases no one

    View Slide

  20. When a design system
    tries to please everyone,

    it pleases no one
    Image credit: The Pokemon Company

    View Slide

  21. View Slide

  22. PRODUCT

    View Slide

  23. SERVICE
    PRODUCT

    View Slide

  24. SERVICE
    VALUE
    PRODUCT

    View Slide

  25. SERVICE
    VALUE
    PRODUCT
    Design
    Systems are
    for people

    View Slide

  26. View Slide

  27. Image credits @JohnnyParr @CallaghanDesign

    View Slide

  28. An organization’s output is directly related
    to how it communicates internally

    

    Conway’s Law

    View Slide

  29. View Slide

  30. View Slide

  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
    … …

    View Slide

  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
    … …
    … …

    View Slide

  33. One team

    View Slide

  34. UI Foundations UI Foundations Accessibility Maker Experience
    Teams
    Four mission driven teams

    View Slide

  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

    View Slide

  36. You will ship your org.
    Embrace this to be

    mission focused.

    View Slide

  37. Composability

    View Slide

  38. UI Foundations UI Foundations Accessibility Maker Experience

    View Slide

  39. UI Foundations UI Foundations Accessibility Maker Experience

    View Slide

  40. Maintainable
    Scalable
    Flexible

    View Slide

  41. Maintainable
    Scalable
    Confluence → Jira → Trello →
    Flexible

    View Slide

  42. Maintainable
    New products and experiences
    Scalable
    Flexible

    View Slide

  43. Easily supported by the DS team
    Maintainable
    Scalable
    Flexible

    View Slide

  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!

    View Slide

  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!

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  57. But how ?
    Design Tokens Primitives
    New!

    View Slide

  58. But how ?
    Design Tokens
    The single source of truth to
    name and store design decisions.
    Primitives
    New!

    View Slide

  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!

    View Slide

  60. But how ?

    View Slide

  61. But how ?
    UI foundations
    Our products
    Tokens Primitives

    View Slide

  62. Guidance is 🫅. Embed
    it into your system,
    every step of the way.

    View Slide

  63. 8
    How it started…
    Hi there!

    View Slide

  64. “I don’t understand when 

    I can use 8px and when I
    can use 4px.”
    Inconsistent guidance
    How it started…
    8

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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?

    View Slide

  69. 64
    48
    40
    32
    24
    20
    12 16
    6
    4
    How it’s going…
    Scale
    8
    Welcome

    friends!

    View Slide

  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

    View Slide

  71. How it’s going…
    Box Stack Inline
    Scale
    Tokens
    Primitives

    View Slide

  72. How it’s going…
    Scale
    Tokens
    Primitives
    Grid

    View Slide

  73. MAKERS
    Scale
    Tokens
    Primitives
    Grid
    How it’s going…

    View Slide

  74. Scale
    Tokens
    Primitives
    Grid
    Responsive
    Density
    MAKERS CUSTOMERS
    How it’s going…

    View Slide

  75. Box Stack Inline
    space.300 24
    Box space.300 24
    Stack
    space.300 24
    Inline
    Layout primitives

    View Slide

  76. Box Stack Inline
    Layout primitives

    View Slide

  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

    Let’s build with primitives!

    View Slide

  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!

    View Slide

  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!

    View Slide

  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

    View Slide

  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!

    View Slide

  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

    View Slide

  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!

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  91. Strive for parity 🔮 but
    allow it to come in
    different forms*
    * meet the maker where they are

    View Slide

  92. Let’s talk about code for a bit…
    Hi, there!

    View Slide

  93. UX: Design and Code
    UX: Design and Code
    +
    UX: Design and Code

    View Slide

  94. +
    UX: Design and Code

    View Slide

  95. Let’s build our card for real!

    View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. Why stop there?

    Primitives can be applied to
    other UI foundations…
    Are we

    stopping?

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  105. Key benefits

    View Slide

  106. Key benefits
    Increased designer and developer productivity

    View Slide

  107. Key benefits
    Increased designer and developer productivity
    •
    Pervasive IA: Terminology parity, better handovers

    View Slide

  108. Key benefits
    Increased designer and developer productivity
    •
    Pervasive IA: Terminology parity, better handovers
    Less time handling boilerplate, more time spent shipping

    View Slide

  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

    View Slide

  110. Handover 🤝

    in detail 🔍

    View Slide

  111. +
    Bring the tools closer together

    View Slide

  112. +
    ❤
    Bring the tools closer together

    View Slide

  113. Bring the tools closer together
    Box Stack Inline

    View Slide

  114. Bring the tools closer together

    View Slide

  115. Bring the tools closer together

    View Slide

  116. What about bespoke experiences?

    View Slide

  117. xcss
    What about bespoke experiences?

    View Slide

  118. Full docs: go.atlassian.com/xcss
    xcss: An example

    View Slide

  119. xcss: An example
    Full docs: go.atlassian.com/xcss

    View Slide

  120. xcss: An example
    Full docs: go.atlassian.com/xcss

    View Slide

  121. Auto layout
    What about vendor lock-in?

    View Slide

  122. What about vendor lock-in?

    View Slide

  123. Three 🔑

    principles

    View Slide

  124. Elements to success
    Cohesion Composition Confidence

    View Slide

  125. Cohesion
    Ensure cohesive
    experiences that are
    distinctly Atlassian
    while not restricting
    the creativity and
    unique expression
    of our makers
    Composition Confidence

    View Slide

  126. Composition Confidence
    Cohesion

    View Slide

  127. Cohesion
    Composition
    Smaller pieces
    mean higher
    fidelity. They can be
    composed infinitely
    with each use being
    declarative and
    intentionally
    expressive.
    Confidence

    View Slide

  128. Composition Confidence
    Cohesion

    View Slide

  129. Cohesion Composition
    Confidence
    More expressive &
    declarative code

    ‑‐

    Better target for
    code transformation
    tools

    ‑‐

    Keeping code up-to-
    date with latest

    View Slide

  130. Composition Confidence
    Cohesion

    View Slide

  131. Composition Confidence
    Cohesion

    View Slide

  132. Future Vision

    View Slide

  133. PAST PRESENT
    2023
    FUTURE
    2033
    What do the next 10 years hold?

    View Slide

  134. PAST PRESENT
    2023
    FUTURE
    2033
    What do the next 10 years hold?

    View Slide

  135. Make experience quality
    the pit of success

    View Slide

  136. Make experience quality
    the pit of success

    View Slide

  137. Make experience quality
    the pit of success

    View Slide

  138. We’re shifting our
    culture through
    systems thinking.
    “
    Jennie Yip | Principal Design Architect 

    Atlassian Design System

    View Slide

  139. View Slide

  140. View Slide

  141. Thank you for adding

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

    View Slide

  142. Thank you for adding

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

    View Slide

  143. Primitives are
    awesome. [They are]
    genuinely low effort
    and high impact.
    “
    ATLASSIAN DEVELOPER

    View Slide

  144. Primitives are
    awesome. [They are]
    genuinely low effort
    and high impact.
    “
    ATLASSIAN DEVELOPER

    View Slide

  145. Systemic Shifts

    View Slide

  146. Systemic Shifts

    View Slide

  147. Systemic Shifts

    View Slide

  148. What have we learned?
    atlassian.design

    View Slide

  149. View Slide

  150. View Slide

  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

    View Slide