JIRA + Atlassian

Lead Designer UX / UI / Mentorship 2016–17
The Brief

Above/ An Agile board, the core of the JIRA product

One of my major responsibilities whilst at Atlassian was the re-design of JIRA — a now 15 year old issue and project tracking tool used by millions. Used primarily by software teams, JIRA is the powerhouse behind companies like NASA, Spotify, and pretty much every team I’ve ever worked with.

As anyone whose ever used JIRA knows… it’s really hard to master. Once you have it figured, you can do some amazing things — but the barrier to entry is high. And in an increasingly saturated marketplace, small software teams are less willing to put in the time to learn the intricacies of such a large product — so it was time for JIRA to adapt to meet their needs.

Over several months, I led a series of workshops, customer interviews and design spikes to produce a fresh new take on JIRA that made it more appropriate for modern software teams. In early-2017, it was announced by Atlassian’s Head of Design at their European Summit.

Photo credit: Sherif Mansour

The outcome of my preliminary workshops and research, and the defining hypothesis of the re-design, was that by helping software teams realise their own potential sooner, they’d be advocates for life. This was validated using extensive user testing and data analysis, both during design and with the subsequent staged release.

“Our customers’ success is our success.”

Every UX and visual design decision was made with this in mind — and was viewed through the lens of helping teams get to a point of productivity sooner. It was my intetion that JIRA should naturally adapt to the way you work best, and remain easy-to-use regardless of content.

Above/ Previous JIRA design, 2002–17

Evolving a design language

This project was a prime candidate for the adoption of the new Atlassian design language, “ADG 3”. Working with such a fully-featured and established base presented an ideal opportunity to spend extra time on UX and micro-interactions, and less time worrying about colours or the design of componentised elements.

Above all else, it afforded me the opportunity to strip JIRA back to only what was absolutely necessary — both from a visual and UX standpoint. By far the biggest challenge was to ensure that JIRA appeared visually simple, even when dense with information and content.

Above & below/ Columns with multi-directional scrolling. When empty, or with multiple columns and potentially thousands of cards, boards must be clear and easy to understand

Prototyping

Because the majority of the visual styling decisions were already in place from the design system, I turned my attention to the interaction design — which involved prototyping… from scrolling interactions and shadows, to focus states and animation.

These prototypes were also used in extensive user testing, which were performed every 2 weeks to ensure we didn’t get too lost in exploration or polish — and were remaining true to our hypothesis and design principles.

The below example, showing how a board can be filtered by assignee, is a good demonstration of how visual decisions needed to be made in code rather than from static design files.

New functionality was introduced where it made sense, and usually in response to a shift in user expectations. The ability to add tasks directly within a column — something that’s possible in Asana, Trello and the likes — was an example of such functionality. Prototyping was important to determine the ideal placement of text, and how animation could indicate success without being too over-the-top (when adding multiple in quick succession).

Above/ Minimal use of shadows to indicate depth
Below/ Subtle animation indicates success

God is in the details

With any pattern library, it’s important to sweat the details — they’re the difference between a collection of building blocks, and a polished interface. JIRA using ADG 3 was no exception. Special attention was spent on the details that usually get forgotten, like how shadows interact with the content beneath them, and the alignment and relationship of content.

Above/ Hover area and animation made creating an inline task feel natural

Applying the design language in the context of such a large product helped evolve patterns and styles at a company-wide level — and has informed the design direction of other products with similar elements, like columns and cards. In my opinion, this two-way relationship of consuming, modifying and updating pattern libraries when applied in context is the true key to success for any living, breathing design system.

Position
Lead Designer
Company
Atlassian
Date
2016–17
Responsibilities
UX & UI
User-testing
Design workshop facilitation
Mentoring
HTML prototyping