Designing something new with the Atlassian Design System

Deborah Lindberg
Oct 6 · 4 min read

Atlassian Design System designers spend considerable time thinking about how the system is used and how we can make it better.

A lot of the time, we’re investigating what products are already doing and testing any system improvements in product screens that have already been designed by product designers. This means we spend a lot of time in Figma evaluating screens for Jira, Confluence, Bitbucket, Trello, etc.

We haven’t had much opportunity to design something new with our design system and wanted to see what the experience was like, so we created a design activity for ourselves with the following goals:

  • Test out our components and foundations to experience designing with them. 🧱
  • Build empathy for designers using the Atlassian Design System. 💙
  • Have some fun as a team and get creative! 💥

The design process

We set up our design activity as follows:

  • Find a product and pick a key screen to redesign
  • Give your product a name
  • Make a logo (bonus points if it’s distinguishable)
  • Define how it “fits” into the Atlassian product landscape

By borrowing a concept from another product we could jump straight into Figma.

We prepared an empty Atlassian product screen as a canvas for each designer to work in.

The template that was used as the blank canvas for the designs

Additionally, we prepared some links to potentially useful stuff. But yeah, we didn’t spend much time prepping apart from this.

We planned to have a showcase at the end of the session, but in reality, we had already been peeking around each other’s designs in our Figma file during the process. So we used this time to design…

The output

Inspired by AirB&B

Habitat enables flexibility for Atlassians to live and work from anywhere in the world by providing a curated set of housing and office options.

Inspired by Pinterest

Where your team easily can discover, collect and share visual content relevant to different projects.

Inspired by YouTube

Atlasreel is a singular place for finding videos created by other team members, and videos curated by other team members.

Inspired by Spotify

Singergy lets you listen to the same playlist in collab-mode! This feature allows your team to feel connected while collaborating. Connect your playlist and focus on your work together.

Our experience

It was really refreshing to take a step away from our day-to-day project work to do something new. Since a lot of our work is about fine-tuning our design system, we often end up testing on screens that have already been designed by the product designers. When was the last time you designed something from scratch?

This activity was definitely no walk in the park. We all struggled to use the Atlassian Design System at times. It was challenging to know when and how to use some of our components / other platform components and when to design new ones. We also experienced some challenges with our foundations.

Some common challenges and questions we all faced included:

Even though our Design System isn’t perfect — it’s pretty impressive what you can pull off with the Atlassian Design System. We were pretty happy with our final product redesigns, and the process of creating them.

What’s next

We want to do this again, not only because it was fun but also because it’s a great way to get creative and empathize with designers using our design system.

Some of the gaps we found are directly related to things that we know we need to work on, like spacing, grid, and typography. These are big meaty challenges and something our team is currently looking into how we can tackle successfully. In the meantime, we’re excited to continue exploring ways to improve our Atlassian Design System in both small ways and big!

Designing Atlassian

Tales from the Atlassian experience design team