Portfolio for Jira redesign

Atlassian, 2017 – 2018

Led the year-long redesign of Atlassian's Portfolio for Jira as primary designer — simplifying a product considered too complex, quadrupling monthly active users and earning promotion to Jira Premium.

4× Monthly active users within two years of launch — previously flat growth.

Problem

Portfolio for Jira was Atlassian's most complex product — and by 2017, it was at risk of losing the enterprise planning market it was built to serve. The product relied on a rigid scheduling algorithm that couldn't be overridden by the user, making it feel like the tool was making decisions for them rather than supporting theirs. PMs described it as impossible to "put what is in my head, into the tool."

The business case was clear: the product needed to find genuine product-market fit or it risked being wound down. I was brought in as the primary designer to lead a fundamental rethink — simplifying the experience enough to attract new users without losing the existing ones who had already built workflows around it.

*In 2020 (after I had left) 'Portfolio for Jira' was rebranded to 'Advanced Roadmaps' and was made part of Jira Premium.

Top constraints

Several tensions shaped every major decision I made on this project:

  1. Any change too drastic risked losing the existing user base who had built workflows around the product.
  2. The product needed to maintain data compatibility with its Cloud offering, giving customers a safe migration path.
  3. We were simultaneously adopting a new front-end technology stack (React), which affected what was feasible sprint-to-sprint.
  4. The team started with 2 product managers, myself as the sole designer, and 5 developers — growing to approximately 12 developers as we demonstrated early progress.
  5. Backwards compatibility with the previous generation of the tool was non-negotiable.

Process

Now that we had understood why exactly users were struggling with the product, I wanted to make sure we knew exactly how product managers went about planning their roadmap today.

A whiteboard showing different people's strategies for creating roadmaps
To inform our user journey, I interviewed a variety of product managers and sequenced their planning into distinct phases. Comparing across the group revealed common patterns of planning.

From this and other research, I formed an end-to-end user journey represented the typical product manager. With this in mind, I started to work through the flow in a low fidelity. These are just a few key screens that explore basic hierarchy and structure of the page.

Those initial interviewees were brought back to give feedback on the lo-fi end-to-end journey. Over the course of many rounds of feedback, I increased the fidelity and polished both the overall flow, as well as designing how smaller tasks would behave.

This project would end up spanning over a year from initial kickoff to launching to customers, so I will only include some of the most interesting or relevant parts of the process here.

Creating a customer guild for this change ended up being one of the most helpful and important parts for setting us up for success. This was a small invite-only group of a mix of existing and prospective customers who gave regular early feedback on the development of the new version of the tool. 8-10 customers were recruited for this and represented a range of industries, maturity, and familiarity with the existing tool. In an ideal case we could attract new customers without alienating existing ones.

Both large strategic decisions and smaller feature level problems were brought to the customer guild. A common way this might play out would be:

  1. Initial discovery and enquiries with guild + other users to learn about a problem (e.g. How do you go about socialising roadmaps at your workplace?)
  2. After turning those research notes into insights, I would then create initial design concepts for solving a certain flow or task. (E.g. a share roadmap flow where you can embed the result in a slide show)
  3. A protototype or low-fidelity mock would then be brought back to the guild to get feedback on whether that would meet their needs and what changes could be made to better suit them.
  4. I would work with the product managers to prioritise which set of changes would be best overall trade-off. For example, you might get a very specific request from 1 member of the guild because of their unique business, but it might not make sense to include in our product as a whole.
  5. A refined design would then make its way into a future sprint or milestone. Once built, those guild customers could then try it out for real in their early-access preview and provide further feedback.
  6. Depending on if that feature/flow met our goals (quality/impact), we could then move on to the next thing. If it wasn't working for the guild customers, it would be a signal that it'd be unlikely to work at full public launch too.

During this phase I would create, print out and put up in our working area these customer sentiment cards. By the end hundreds of these were hung up (wish I had a photo!). Here are a few examples of them.

You don't want a major change like this to disrupt existing users who are just trying to get work done. I worked with product management and engineering on defining this rollout strategy:

  1. A invite only private alpha
  2. An opt-in public beta
  3. General availability (any newly created plans would be made in the new interface, but could be toggled off)
  4. (As of writing has not occurred yet)Future sunsetting of the old interface
One of the most crucial decisions we made was that there would be no data loss between switching between the old and new interface, despite this actually requiring a bunch of backend changes. Although this added a decent amount of engineering scope, it gave customers confidence to try the new interface and reverse the decision if it didn't meet their needs yet.

Solution

The project spanned over a year and I created 80+ Sketch files in that time. I'll include some of the key screens. To get a sense of the product in motion you can check out a video like this one from Atlassian on YouTube. If you're curious about some of the drag and drop experience see the Interaction design case study .

Before

Design before the project

After

Design before the project
A screenshot of a sketch design file that shows the many parts of the application
The success of the redesign of this tool lead to it being promoted from being a marketplace add-on to a core offering of the Jira Premium package. (Above) As of April 2024, Advanced Roadmaps is prominently featured in the Jira Premium marketing page. Note: Image features product changes made between my time and when screenshot taken.

Various assets

A screenshot of a sketch design file that shows the many parts of the application
A zoomed out look at the designs for the first milestone (alpha release) of the project. These were then divided out into separate pages so more detail and clarity could be given.
A screenshot of a table showing time along the y-axis, and functionality lists along the x-axis.
I collaborated closely with the two product managers on this project for milestone, design, an delivery planning.
Designs for a sprint summary showing things like how many story points are in the sprint, how many are completed.
An example of a design asset I would share informally with developers in Slack to get thoughts. In this case I was exploring showing how we might show sprints differently depending on if they are completed, in progress, or future.
A future state design sharing your roadmap to stakeholders in various formats. The initial release was just a url that couldn't be customised.
In the tool users could use a feature that used an algorithm to optimise the scheduling of their roadmap. During the alpha phase there was so much to do we often created a 'just get it working' that made tasks possible (albeit difficult) and would come back later with enhancements that made them usable.
This screen allowed users to review then accept or remove any staged changes made in their roadmap. Having a sandbox for planning helps users feel comfortable to experiment and make changes without worrying about accidentally messing up issue data for thousands of users.
As mentioned previously, this is the screen users were shown during the opt-in beta to encourage them to try the new experience.
Jira is already a highly flexible product, and our tool visualised hierarchy in Jira in a way that hadn't been done previously. This created complex design challenges - in this case whether to show inherited matches to a filter.
In this image I was exploring how we should represent 'releases' (or milestones) on the roadmap timeline. Whilst the marker approach looked good in isolation, on a busy schedule it became overpowering for information that was only needed at a glance. The circle was what I moved forward with.

Early lo-fi mocks

Low fidelity mock-up that shows the overall layout for the new design Early wireframe of roadmap page

Success measurement

The redesign worked. In the two years following general availability launch, Portfolio for Jira achieved a three-digit percentage increase in monthly active users — significant enough that Atlassian promoted the product from a paid marketplace add-on to a core pillar of Jira Premium, where it remains today as Advanced Roadmaps.

Our core metric throughout the project was usage churn: for someone who uses the product in week one, what percentage return the following week? Driving that number down was the signal we needed that the product was delivering genuine value, not just trial curiosity.

Qualitative feedback during the beta told a clear story. The vast majority of negatives were about missing functionality — the expected early access trade-off — rather than the interaction model itself. A few examples:

  • "I like the new cleaner look. The old look has too many options that we will not use or be able to use."
  • "This made my night! I am so happy to see the changes to the UI, drag/drop functionality w/ respect to scheduling, better transparency, simplicity, all really important."
  • "This is a wonderful improvement to the Portfolio for Jira stack. The WebUI is very user friendly and the create issues on the fly is working a lot better."
  • "I like the new planning experience - It greatly simplifies things and find that its the right direction."
  • "In the "New Experience" there are less supported types than previously. Already one big issue with Portfolio was that not all the types were supported but it's now gone back"
  • "It's really clunky to only have the 3M, 1Y Fit, time bar as a way to navigate the roadmap. There needs to be a horizontal scroll bar that affects the road map only, to allow the user to move freely"

Project 3 of 6