Rackspace wanted to offer its users an enhanced, intuitive, and efficient dashboard for managing their cloud resources. They sought a solution that would simplify complex tasks without compromising on the depth of functionality.
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.
The main problems addressed in the UI overhaul were:
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
They were addressed by using fewer, more consistent UI patterns to minimize cognitive load. Visual noise was reduced by hiding non-essential details for unselected errors. Each error was accompanied by a concise visual summary – graphs and key stats – to help users quickly grasp the situation. Non-visual tools like enhanced sorting and the addition of filters (e.g., by text, environment, date) were introduced for exploration support and overall improvement.
Addressing groups of similar error instances, we introduced a tab eliminated more than half of clicks in the interaction eventually speeding up the workflow, and improved side-by-side comparisons.
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.
By asking the right questions at the right time we could quickly address issues that resulted in customers leaving. We could've gone after releasing dozens of new features but instead prioritized usability. By understanding that the stickiness of the tool was so high we could only hurt ourselves, we took customer obsession to the next level and eventually got acquired for UX reasons by the mastodon of the industry – Rackspace.
The revamped dashboard was met with widespread approval from Rackspace’s user base and I had the privilege of sharing my learning with other designers within the corporate structure post acquisition.
