Rollbar Account Dashboard

Rollbar is a real-time error alerting and debugging tool for software developers.

Overview

Context

The Account Dashboard is a new view in the Rollbar web app specifically designed to give engineers and managers a complete status overview of all active projects across their account instance.

Problem

Rollbar customers have software projects composed of numerous applications and micro-services, each of which is accessed as a separate project. The lack of a comprehensive projects overview makes it much harder to mitigate potentially expensive failures. Zeroing in on important issues across multiple projects is inefficient, time-consuming, and costly.

Original Rollbar Items View — **Before – repetitive overload:** The Item View is rich in project data. But having to wade through many individual screens to find an issue is difficult.

Customers were becoming frustrated with this problem and switching to our competitors.

Outcome

The project was a major win for Rollbar. Customer commitment to the product strengthened and attrition numbers decreased, especially among enterprise customers.

“The Account Dashboard makes it dead simple to know where our engineering time has the highest leverage regarding issues affecting our customers and shoppers.” — Jason Kozemczak, Tech Lead at Instacart

Discovery

In-depth User Research

I conducted numerous interviews with customers, specifically engineering team leads at larger organizations. When it was feasible, we went to customer offices and observed users directly in their workflows.

Research-informed Design Decisions

Our research and testing revealed that customers typically had one of two distinct use cases: reporting or triage. One group of users wanted to see easily configurable reports of overall status, the other group wanted a way to quickly locate problem areas to solve issues more efficiently.

Affinity Mapping Metrics — **Affinity mapping exercise:** Inputs from our contextual inquiry sessions.

Before and After Flows — **Diagramming user pain points:** Documenting our research findings and developing our initial rationale.

Ideation

Early Concepts & Sketches

From pencil sketches to pen-and-ink wireframes I generated over 100 ideas for various use cases. I encourage stakeholders at this early stage to keep an open mind when presented with a wide variety of concepts.

Low Fidelity Wireframe — **Rough concepts:** Rapid sketches and low-fidelity wireframes to explore different structures

Design Charettes

By bringing the Product team into the design process, we quickly connected product design and business strategy. Real-time group collaboration—when properly structured—yields better design decisions faster.

Design

Connecting Research and Design

To serve both the reporting and triage use cases we designed an experience to:

Provide a dedicated view showing all the projects in an account
Present a clear visual representation of the health of selected projects
Surface all filters available in the individual project view, making it easy for teams to drill down into issues across languages, environments, and error levels

Wireframe — **High-fidelity wireframes:** Taking outputs from ideation sessions, I produced all wireframes in grayscale to avoid distracting focus from structure and interaction.

Combobox Component UI — **First version of the 'combobox':** Filtering controls are a key component in the new session view experience.

Combobox Component UI Variant — **Evolving the ‘combobox’:** We opted for a control that shows selection count even when active because it's much easier to use.

Delivery

Design Documentation for Developers

For this project, we relied mostly on existing component patterns that we had previously built into our design system. For new components, I created comprehensive annotated documentation to describe to front-end developers how the component should function.

Combobox Component Specs for Developer — **Final ‘combobox’ design spec:** Developers use these functionality specifications to construct the working component. In most cases, styles are included as subcomponents already built into the design system.

Final Design

A Simple Solution to a Complex Problem

The result was a simple yet powerful solution that aggregated project data onto a single view, making reporting and triage much easier. 

The positive impact on customer efficiency was immediate for early beta testers; what often took engineering teams hours now took as little as minutes, saving companies' money. 

**After – powerful simplicity:** High-level actionable data from all active projects in one view saves time.

TOP