Designing something new with the Atlassian Design System

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:

Explore and Define — 30 min

  • 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

Design — 90 min (incl. coffee break ☕️)

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.

Showcase (aka. more designing) — 30 min

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

A fun team activity

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?

A great way to challenge our own work

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:

It left us pretty impressed with what you can achieve with the Atlassian Design System

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

Doing this more often

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.

Exploring how we could best fill the gaps we found

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!




Tales from the Atlassian experience design team

Recommended from Medium

Ironhack Prework-Challenge 1: Design Thinking

Conducting Interviews

conducting interviews

Fun People (Case Study)

Greyhounds Track Club — Website Redesign

Data Through Design: A Tactile Take on Open Data

Case Study: TaskFox

Bed Mattress Reviews are helpful in deciding which one tochoose

100 (+1) Tips to Become Better UX Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Deborah Lindberg

Deborah Lindberg

More from Medium

Create accessible designs using the Figma A11y Annotation kit

Alt=”Starred” callouts pointing to the star icons

Building Design Systems

Interactive Stories with CSF Play and User-Events

How to let your design system evolve in the right direction