Code collaboration personal dashboard

Atlassian, 2016

Getting the home page of your product right is fundamental. An underperforming home page was developed into a personal dashboard that brought together pieces of important information into one view. I worked on this project as a Junior Designer.

Problem

Bitbucket Server is a tool used by software developers for hosting and collaborating on code. The home page of the tool didn’t provide much value to users, as it simply listed all the projects available.

By bringing together relevant information developers needed in one location, we would reduce unnecessary navigation and increase the productivity of our users.

Top challenges and constraints

  1. How customisable or opinionated should our solution be? Different people care about different kinds of things.
  2. Similarly, there is a large amount of things you could put on the dashboard. How do we narrow it down to the must-haves?

Process and solution

Uncovering what content should be shown in the dashboard was the most important part of the design. To do this, I first did competitive analysis to see if there were trends in dashboard content for coding tools. I then ran an internal survey within developers at Atlassian to learn more about what content in a dashboard they would find most useful.

One technique I used was creating a ‘build your own dashboard kit’. This involved paper mock-ups of 10-15 components, and was given to developers to construct their perfect dashboard. They could also choose to draw their own if they wanted something that wasn’t already prepared. I also made sure to clarify, out of the pieces they used, which ones were must-haves versus nice-to-haves. From there, I rank ordered the biggest needs of the dashboard. This process identified the top priorities for the dashboard:

  1. Reviewing code of my teammates
  2. Responding and implementing feedback on my own code
  3. Navigating to repositories

From these priorities, I started to sketch out some ideas:

wireframe early design of dashboard higher fidelity design that incorporated top task feedback

The above design was sent out to 8 external developers. Some had experience with Bitbucket, and others used competitor tools. Overall, users found this to be on the right track. Feedback highlights include: “I like it more than the [competitor] one i’m used to”, “I prefer this over [competitor]’s dashboard. Easier to see the things I want, less noise” . Some of the main negative findings were more about details than the content itself, which was a positive sign for me.

Final design

Any elements which didn't help users progress their work or navigate to common locations was stripped back. The overall result was cleaner and more focused.

Final design of bitbucket dashboard
The dashboard allowed users to quickly get to their most needed content. Here, we prioritise viewing your colleague's code. If you hadn't reviewed it yet, it would be listed first. You'd also be notified if any new changes occurred.
Feature discovery message on Bitbucket dashboard
For feature discovery, this message was shown to users the first time they visited the new home page.

Success criteria

After a user had used the dashboard for a while, we contextually asked users “How much did the personal dashboard meet your needs” on a 5-point Likert scale between “strongly disagree” to “strongly agree”. In analytics we measured a lowering of the previous navigation path, and an increase in users navigating via the dashboard.

Project 1 of 5