Airbrake Bug Tracker

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 user sees errors occurred in various apps. In addition to the web app overhaul, Airbrake line of products includes mobile apps, APIs and enterprise solutions that we supported during our tenure.

airbrake-sketch-logo-for-print-2

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 their primary task is deciding which one is important to fix and when they are looking at a single error, they are looking for data that helps them find the cause of an error.

One of the first things our team carried out was introducing exit surveys. We uncovered 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.

Artboard-Copy-3@2x-3

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.

Problems & Solutions

Hypothesis

- 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

***

- Reduce vertical space
- 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.)

21-improved

Problem

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.

2426c223615191.56325ed21aedb

Solution

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.

2c9a7123615191.56325ed22016d

Problem

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

9f6f3623615191.56325ed2205b0

Solution

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.

2c9a7123615191.56325ed22016d

See more of our work