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.
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
Habitat
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.
Infuse
Inspired by Pinterest
Where your team easily can discover, collect and share visual content relevant to different projects.
Atlasreel
Inspired by YouTube
Atlasreel is a singular place for finding videos created by other team members, and videos curated by other team members.
Singergy
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!
