Atlassian’s design system is built to create simple, intuitive and beautiful experiences. It’s a living system and is constantly evolving to accommodate the needs and scale of Atlassian’s platform and multi-product offerings such as Jira, Confluence, Bitbucket and Trello (to name a few).

A bold journey to the cloud

In 2016, Atlassian set foot on a mission to unleash the potential in every team on the cloud. We saw this as an opportunity to rebrand our brand personality and rebuild our design system. This personality would become the foundation with which we build all Atlassian experiences.

The building blocks for quality and scale

Our existing design system ‘ADG2/AUI’ proved that it was successful in improving scaling issues. By rebuilding our design system ‘ADG3/Atlaskit’, we would move closer to the future we had envisioned for ourselves.

• Improve overall quality through consistent and scalable experiences

• Allow more time to focus on high-impact customer experiences

• Speeds up development efforts by providing flexible building blocks

Phase 1: Teaming up for a strong foundation

We couldn’t have a rebrand without our Creative Marketing team. Together, we envisioned how to deliver our brand personality end to end. We considered every customer touch point, from landing on our marketing site and all the way to the product features that our customers use every day.

The marketing team (who flew from San Francisco to endeavour a four-week spike with the Sydney team) were exploring the look and feel of our new brand personality. Simultaneously, the product designers were exploring how visual design elements could inform the foundations of the new design system. We looked at illustrations, typography, iconography, grids, and colour.

Under the guidance of design leadership, I spent my time auditing existing user interfaces from all Atlassian products and experimenting with different layouts and how the visual design elements could be applied. We had a few guest designers join us for collective creativity power! At the end of the day, we would present our ideas and give each other feedback, which we would note for explorations the next day.

Once confidence was built with our stakeholders and leadership, it was time to launch our shared vision with the wider company at our global town hall.

Phase 2: Designing components and documentation

To encourage the adoption of any Design System, sharing knowledge through documentation is crucial. We needed a place to publish usage guidelines.

During this phase, I worked closely with product designers and engineers to redesign the components using our new design language. Once the components were coded into the Atlaskit library, I paired up with our content designer to write usage guidelines that would live on the Atlassian Design Guidelines (ADG) site. We prioritised components and operated on a design sprint, in a two-week cadence.

Key challenges

Each component has its nuances and considerations. However, the process of designing a component remains the same. Challenges tend to present themselves in these areas:

• Modern web standards (accessibility, responsiveness, technical constraints).

• Expected behaviour and intent of the component from other systems and studies

• A range of use cases from the Atlassian platform and every product

We do our best to find common ground and form a strong opinion on how it should be used. But also make room for some flexibility so that the components can scale. You would be surprised how many bespoke use cases exist when you have over four enterprise products to consider.

Retrospectively, the ‘dropdowns vs selects’ confusion forced us to be thought leaders on new component standards. In which we worked closely with Thinkmill on rebuilding the selects component.

Soft Launching ADG 3.0

After we completed our prioritised components, we felt ready to go live! We did an internal review the night before it was scheduled to be released to the public. We announced it internally, and as we see adoption increase, so does engagement with product teams.

Key Takeaways

I felt grateful to be placed with the design systems team during this time of my early career. I developed systems thinking, strengthened my visual design skills and learned the art of sparring. Over time, I gained some wisdom on building and maintaining a design system.

• Maintaining a system is work. Maintaining multiple versions of a system is even more work. Therefore, code is the source of truth.

• Education is effective for adoption. What’s more effective is to find champions to help co-create and contribute back to the design system.

Notes

Atlassian’s design system continues evolving to better serve the teams who use it. After the ADG launch, there were monumental milestones that put us on the list of leading Design systems in the industry.

• 2017 - We went through a complete company rebrand

  • Our bold new brand

  • Behind the scenes of Atlassian's rebrand

• 2020 - Unifying the guidelines and component library

  • Our new home for the Atlassian Design System