Success Metrics Foundational Dashboard - Sonatype

Sonatype decided to devote more attention to in-product data visualization of customers' usage of their Sonatype products. Among these new dashboards is the Success Metrics dashboard, an eagle's eye view of the state of users' code and software security. As part of this reorg, and in my role as Platform Segment Design Lead, I was moved to the Data Insights team to perform a series of collaborative sessions with stakeholders and to interview users. Subsequently, mockups were finalized before the developers built the dashboard in Looker, placing it into product inside an iframe.

Closeup shots of data visualization mockups for the Success Metrics dashboard, including stacked column charts, grouped column charts, bar charts, line charts, BANs, and tabular data
Closeup shots of data visualization mockups for the Success Metrics dashboard, including stacked column charts, grouped column charts, bar charts, line charts, BANs, and tabular data
Closeup shots of data visualization mockups for the Success Metrics dashboard, including stacked column charts, grouped column charts, bar charts, line charts, BANs, and tabular data
Closeup shots of data visualization mockups for the Success Metrics dashboard, including stacked column charts, grouped column charts, bar charts, line charts, BANs, and tabular data

Date

H1 2023

Role

Product Designer

Company

Sonatype

An image of a Google Doc titled SUCCESS METRICS NOTES, which contains a breakdown of the former Success Metrics section, appearing over a screenshot of the old Success Metrics page
An image of a Google Doc titled SUCCESS METRICS NOTES, which contains a breakdown of the former Success Metrics section, appearing over a screenshot of the old Success Metrics page
An image of a Google Doc titled SUCCESS METRICS NOTES, which contains a breakdown of the former Success Metrics section, appearing over a screenshot of the old Success Metrics page
An image of a Google Doc titled SUCCESS METRICS NOTES, which contains a breakdown of the former Success Metrics section, appearing over a screenshot of the old Success Metrics page

The Problem

The Sonatype Lifecycle application had a section called “Success Metrics” that provided users with basic information about the success (or lack thereof) of their product usage. However, metrics revealed that nobody was using it. This was due to a few reasons:

  • The page was not designed by a designer and as such was very confusing

  • No distinct personas were considered or interviewed in its creation

  • The Customer Success team had built a version users preferred that used existing APIs to create charts in Google Sheets

The page was removed from the product, and the Enterprise Reporting team was tapped to develop a comprehensive Success Metrics dashboard. As the reporting dashboards consisted of a Looker dashboard placed in product via an iframe, there were limitations on the UI/UX that had to be considered.

Screenshot of a Figma file containing images from the Customer Success version of Success Metrics and a long text box full of notes which have been blurred to obscure any information
Screenshot of a Figma file containing images from the Customer Success version of Success Metrics and a long text box full of notes which have been blurred to obscure any information
Screenshot of a Figma file containing images from the Customer Success version of Success Metrics and a long text box full of notes which have been blurred to obscure any information
Screenshot of a Figma file containing images from the Customer Success version of Success Metrics and a long text box full of notes which have been blurred to obscure any information

The Objectives & Key Results

  • Create a well-tested dashboard that appeals to both DevOps and Security personas

  • Replace the piecemeal solution Customer Success had created, both for users and the Customer Success team

  • Utilize available filtering to optimize the user experience as best as possible with the technological limitations

  • Achieve a significant increase in the Account Adoption Rate (Current Data Insights: 2.62%)

An early-stage wireframe exploring the potential layout of the Success Metrics dashboard with text descriptions of each card and a date/time filter button
An early-stage wireframe exploring the potential layout of the Success Metrics dashboard with text descriptions of each card and a date/time filter button
An early-stage wireframe exploring the potential layout of the Success Metrics dashboard with text descriptions of each card and a date/time filter button
An early-stage wireframe exploring the potential layout of the Success Metrics dashboard with text descriptions of each card and a date/time filter button

The Process

The first step taken was to evaluate the current solutions. A holistic design review of the existing Success Metrics page in product found that little was worth saving. Multiple stakeholder interviews with members of the Customer Success team proved to be enlightening. They walked us through the solution they had created and discussed why customers preferred it. 

A wireframe was built based on this feedback, shared with the Tech Lead, Product Manager, and Customer Success representatives, and improvements were made. After this, a full resolution mockup was created and tested iteratively with users. Due to the limitations of how the page could be built, a strong emphasis was placed on user input around filtering, chart sections, and the exporting of hard data (the most universal ask among all interviewed users).

The newest draft of the solution was validated with internal stakeholders, including senior management and the Customer Success team.

Screenshot of the final mockup of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends
Screenshot of the final mockup of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends
Screenshot of the final mockup of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends
Screenshot of the final mockup of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends

The Solution

A full dashboard was created including line charts, pie charts, BANs, area charts, column charts, bar charts, and tabular data. Nine filters were included, as was the unanimous ask for the ability to export the underlying data (of the page itself, as well as each individual chart) to PDF and CSV. This chart reflected trends over time, current usage metrics, and detailed deep dive data. Every aspect of the former Customer Success charting solution was included and improved to reflect best charting design practices (meaning some charts were redesigned entirely to better reflect the user story).

A screenshot of a Gainsight chart showing increased usage of the Success Metrics dashboard with hard data blurred
A screenshot of a Gainsight chart showing increased usage of the Success Metrics dashboard with hard data blurred
A screenshot of a Gainsight chart showing increased usage of the Success Metrics dashboard with hard data blurred
A screenshot of a Gainsight chart showing increased usage of the Success Metrics dashboard with hard data blurred

The Results

The first positive feedback we received was from the Customer Success team, who said that they could immediately think of thirty customer companies who would switch from their current solution to the new in-product version. Additionally, the Account Adoption Rate rose from 2.62% to 16.78%, a 600% increase from a few months prior. Over the ensuing months, the profile of the Enterprise Reporting team rose in the organization, being handed a much larger portion of the product roadmap and gaining increased leadership involvement. As Sonatype dogfoods its own products, it is notable that senior leadership is now demonstrating the company’s usage success to the Board of Directors with this board, as well as the recently introduced Security Risk Analysis dashboard.

Screenshot of the final in-product version of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends with the data obscured
Screenshot of the final in-product version of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends with the data obscured
Screenshot of the final in-product version of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends with the data obscured
Screenshot of the final in-product version of the Success Metrics dashboard, showing filters, links to other dashboards, and four line charts showing violation trends with the data obscured
Next Project
Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have