Bridging Brand and Product — Atlassian

Year
2016 - 2017

Problem and Opportunity
My first week at Atlassian was thrown into a two-week design workshop. Fortunately, this two-week workshop led to my joining the design system team for the next three years. I joined at a terrifying but exciting time, the start of the bold new style for Atlassian that trickled down into product and brand.

The illustration style at the time was distilled by strong outlines, muted colours and rounded shapes, on top of some random styles that were never depreciated but still lived in the product (yikes, I know). My help was initially meant for a product, but over time became the bridge for both.

The brand team originally contracted some talented illustrators to try and emulate the new vision for Atlassian. The problem was these illustrators had no idea what Atlassian was or our products. There was a serious disconnect when it came down to the illustrations and asking them to illustrate our products like Bitbucket.

At the time, I was helping with the visual design side of things, and I saw they needed help with illustrations, so I jumped in as there were enough product and visual designers on board. Luckily, II used Jira, Confluence and Hipchat at previous job,s, so it helped with coming up with relevant metaphors and concepts. At this moment, it made sense to have an in-house team, those who were familiar with the products. After this AH-HA moment, we brought another product designer / illustrator on board to help workshop the ideas.

As we unpacked the illustration style, it reinforced the human factors involved in teamwork. We wanted to depict people swarming together to get sh*t done but also illustrate a fun aspect to it. We think of the illustration style as a way to tell many different stories about teamwork in various situations. We felt the metaphors were right, but the style and colour combinations didn’t sit well. Below are only some of the colour and style variants we went through:

It’s important to note that the exploration phase was so important. We went wide in ideas because the opportunity was there. We kept the same metaphors across the illustrations as a consistent part to see where things thrived and didn’t work.

We demonstrated our team's adaptability by experimenting with gradients, colour pairings, and metaphors until we found a style that worked. It was a challenging process, but our ability to constantly test and refine the product was a testament to our flexibility. Below are the final versions of the metaphors that emerged from the original workshop (the ones with the blue people). The style began to feel more cohesive as we saw them in-product and observed their interactions with the surrounding UI.

This visual above is one of my most favourite before and after moments. Those illustrations in the above row were done in my first day of illustrating at Atlassian. A year later we found our style and updated these illustrations. I’d like to think that stories are a lifetime, while style is always changing. I firmly believe a solid story within your illustration can be timeless.

At this point, I lessened the help with the illustration work and put my efforts into the product side of things with components and patterns with the Design System team. I became a stakeholder with the growing illustration style, helping systemize product illustration, scaling product illustration, contributing back to the illustration library, the placement of illustrations in the product (in empty states, focused tasks, illustrated avatars, onboarding and many more) as well working on some spot hero and spot illustrations over the years.

Here are some of my other favourite illustrations that I was able to do throughout my time at Atlassian: