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.

    Challenge

    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.

    Customer goals:

    • Provide greater leverage to engineering teams for mitigating expensive failures.
    • Shorten the time it takes to solve complex issues.
    • Increase engineering team efficiency.

    Solution

    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.

    Results

    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

    Demo

    You can view a limited demo of the Account Dashboard in the Rollbar Demo account here.

  • Some Background

    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.

    Discover > Define > Ideate > Prototype > Validate

    Discover

    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.

    Use Cases

    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.

    Solano CI Interface - Research Notes on v1.5 Layouts / View Larger Image

    Activities & Outputs: User Research, Use Cases, Usability Testing, Interviews, Concept Maps.

    TOP

    Define

    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.

    Personas

    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.

    Solano CI Interface - Personas / View Larger Image

    Sketches

    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.

    Solano CI Interface - Sketches / View Larger Image

    Activities & Outputs: Personas, Use Cases, User Flows, Sketches, Lo-fi Wireframes.

    TOP

    Ideate

    Concepts for outcomes; combine understanding of the problem with imagination.

    Wireframes

    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.

    Solano CI Interface - Wireframe of Base Layout / View Larger Image

    UI Design

    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.

    TOP

    Prototype

    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:

    1. Simulate a build running in the new UI, showing all the visual feedback in action
    2. Create front-end hooks for the engineers to being wiring up the data to the view.
    3. 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.

    Solano CI Interface - Prototype in Codepen / View Larger Image - Open Codepen

    Activities & Outputs: Mockups, Clickable Prototypes, Heuristics, Interactions

    TOP

    Validate

    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

    TOP

Contact