Airbrake Bug Tracker Web App
 

During my time working on Airbrake, I completely redesigned the product, introduced new features, managed the development of iOS and Android companion apps and reinvented Airbrake's brand.
 

Context

Airbrake is a bug tracking application built for developers who want to know what triggers errors in their apps.

Airbrake UI is made up of settings and the list view – where you see errors that happened in different projects (various apps, language-specific areas, etc.) of yours. In addition to the web app, Airbrake line of products includes mobile apps, APIs and enterprise solutions, but this case study specifically discusses product's web app overhaul and redesign I carried out during my time there.

In the industry, errors rarely occur to just one user, so similar instances of an error are grouped together. When an Airbrake user goes through a list of errors his primary task is is deciding which one is important to fix and when he is looking at a single error, he is looking for data that helps him find the cause of it.

One of the first things carried out to get prepared for the redesign was introducing exit surveys. From those as well as the user interviews conducted, I found out that users were spending a lot of time navigating through the interface – scrolling/clicking within the error itself, rather than looking at the data provided.

Ideal workflow is achieved when user receives all of the information required from a glance – most of Airbrake flow is based around comparing errors and finding that piece of data that started the chain reaction of similar errors as well as figuring out which error is an important one to tackle today.
 
Due to a number of on-the-go UX solutions as well as the app's legacy, Airbrake's list view was cluttered and very "noisy". At the same time some of the vital information was either hidden or partialy hidden – adding an extra click for viewing That slowed users down and even though the tools required to carry the task at hand out were present, they were almost non-existent to first-time users overwhelmed with a difficult UI.

Problem

It is hard for users to see important data
It's hard to read the summary
It's hard to scan errors at a glance
 

Proposed solutions
 

Reduce vertical space use.
Stick with a fewer UI patterns and keep them consistent.
Reduce visual noise by removing non-vital information for non-selected errors.
Provide users with a visual error summary – graphs, important stats, etc.
Non-visual solutions: sorting mechanism update, introducing filters (text, environment, date, etc.)

Similar errors
 

Similar error instances are grouped together and checking/comparing those is an important tool for Airbrake users. Before the redesign users were presented with a mundane task of clicking through every instance and then back to compare notices. The interaction was far from ideal and involved too many unneccessary clicks.

By providing an easy-to-use flicker that tracked the tab user was viewing at the time, not only did we eliminate more than half of clicks in the interaction eventually speeding up the workflow, but also improved side-by-side comparisons.
 

Vertical space
 

Saving vertical was not a concern before redesign which resulted in a lot of scrolling for the user.
 

Saving vertical space was one of the top priorities for the team. We made sure scrolling was not in the way of observing errors at the same time eliminating clutter created by unnecessary visual artifacts in the previous version.