Rollbar Account Dashboard
Rollbar is a real-time error alerting and debugging tool for software developers.
I led the design effort to create a new view in the web app that provides users visibility into errors across multiple Rollbar projects.
The Account Dashboard is a new view in the Rollbar web app specifically designed to give engineers and managers a complete picture of all active projects.
Many Rollbar users are developing products composed of numerous applications and services, but without a comprehensive overview of these separate Rollbar projects it's difficult to see the overall health of an application.
- Provide greater leverage to engineering teams for mitigating expensive failures.
- Shorten the time it takes to solve complex issues.
- Increase engineering team efficiency.
Starting with a simple prototype that aggregated project data onto a single view, we tested the interface with a small number of customers. One of the most interesting outcomes of these tests is that we discovered there were two distinct use cases: reporting, and 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 problems more efficiently. For the initial version of the view we decided to provide a basic tool that would solve both problems.
- 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 to for teams to drill down into issues across languages, environments, and error levels.
The first release of the Account Dashboard helped Rollbar customers achieve their previously unmet goals immediately. By providing insight into individual trends alongside potential correlated patterns, engineering teams could now quickly see how performance of various applications and services affects the health of their overall product. When a team can more efficiently triage and solve errors in complex systems they are more effective at maintaining high quality experience for their users.
“The Account Dashboard makes it even easier than before to understand the overall health of the Instacart product as well as individual teams/systems that make up Instacart. It also 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
You can view a limited demo of the Account Dashboard in the Rollbar Demo account here.
At Solano Labs I helped move the product development process to SCRUM and two week sprints. My goal was to restructure the product development process to allow for more design thinking to happen earlier in the cycle.
To accomplish this, I adapted the Design Sprint process to run my own sprints alongside engineering. This allowed for proper research and validation of hypotheses before diving into implementation; the output of a completed design sprint went directly into the engineering backlog, with the benefit of providing developers with a well-defined goal.
Research, analysis, exploration; the bedrock of subsequent design activities.
Through research and user testing sessions, I helped the team better understand how the interface was solving problems for customers, and how it was falling short. Digging deeper below issues of cluttered visual presentation and confusing interactions, I got to the root of a critical issue users were having: they were not seeing a complete and accurate view into the state of their build.
During my research I captured input from users about the specific UI issues they had. I made notations on printouts of the existing session view.
Activities & Outputs: User Research, Use Cases, Usability Testing, Interviews, Concept Maps.
Clarity and focus; framing the problem to create a solution
I facilitated development of an internal prototype (running with live data) to validate new reporting outputs. I used this information later in the project to construct an improved real-time status report model.
I had previously developed with the team a set of personas that profiled new and existing customers. These were hybrid marketing and design personas that gave us clear idea of our users goals and pain points. Reinforced by the deeper research done for this specific project, the picture that emerged helped me get buy-in on making broader changes to the product.
One of the biggest challenges of this project was to figure out how to re-structure the presentation of session status. Most of these rough layouts were done with pencil and paper; many were done on whiteboards with the Product Manager, especially when design decisions might impact other views in the product.
Activities & Outputs: Personas, Use Cases, User Flows, Sketches, Lo-fi Wireframes.
Concepts for outcomes; combine understanding of the problem with imagination.
I iterated through a series of wireframes showing all possible configurations of a session view (there are twelve!). Previously, less common session types had inconsistent layouts; I refined the structure to present all sessions consistently.
The visual and interface design came from my work-in-progress style guide and design system.
Working with my Sketch mockups from the previous design update, I adapted these styles to new elements and components for a more consistent and cleaner interface.
I also selected icons that would help communicate the detailed status of the build, and refined the color scheme for the build lifecycle stages.
I applied these styles to the clickable prototype that would serve as a final mockup of the UI design.
Activities & Outputs: Wireframes, Paper Prototypes, Style Tiles, UI Design, Lo-fi Mockups, Art Direction, Content Strategy.
If a picture is worth a thousand words, a prototype is worth a thousand pictures.
Since we had very hi-fidelity wireframes and a defined set of styles for the UI components, it was more efficient to create a clickable prototype rather than static mockups.
The purpose of this prototype was two-fold:
- Simulate a build running in the new UI, showing all the visual feedback in action
- Create front-end hooks for the engineers to being wiring up the data to the view.
- This proved to be a very effective step in the process. Engineers got a head start on implementation planning while we continued to refine the visual presentation.
Activities & Outputs: Mockups, Clickable Prototypes, Heuristics, Interactions
Prototype as if you know you’re right, but test as if you know you’re wrong
There was no practical way to deliver our initial prototype to customers using real-time data, so the engineering team built the new session view into the production app. We then allowed users to test it as an ‘alpha’ feature (behind a feature flag).
Making full use of the Agile philosophy, we had working software. But in the spirit of Design Thinking, we were still in the design phase.
Now the process of moderated and unmoderated user testing can reveal where we hit the mark with our solution, and where it might need improvement.
And by monitoring analytics we can uncover usage patterns than will help us improve the user experience even more in future versions of the app.
Activities & Outputs: Usability Tests, Analytics, QA