Sumo Logic Monitors and Alerts

“Create a monitoring and alerting system within the existing framework to provide users the ability to detect suspicious behavior and notify appropriate parties accordingly.”

The Challenge

Having just shipped the new Unified Logs and Metrics feature, it was now time for us to build a Monitoring framework from the ground up and lay the foundation for an alerting system that could accommodate increasingly complex settings and customization. The new Monitoring UI would live in the existing Sumo Logic UI framework, and would need to support the ability to alert on Logs in the future, in addition to Monitors.

Background

The introduction of the new Metrics feature as a key differentiator to the Sumo Logic platform provided users with newfound visibility into their system’s behavior by providing a way to measure their machines’ key performance indicators (KPI’s). Now that they could see into their system, the next solution users needed was a way to monitor these metrics and be alerted when metrics reached a concernedly high (or low) level that required their attention.

What is Sumo Logic Unified Logs and Metrics?

My Role

I led the design of the Metrics Monitors and Alerts feature at Sumo Logic, Inc. I collaborated closely with our cross-functional team of backend engineers, developer, visual designer, user researcher, and product manager. The project commenced in August 2016 and shipped in January 2017.

Product Definition

I worked closely with our project manager to define the product, prioritize and negotiate features, and establish the vision for launch and beyond.

User Research and Experience Design

We conducted user research and testing, which we used to inform the journeys, wireframes, prototypes, and design specs I created.

Leadership

I presented my designs to earn buy-in from executives and stakeholders throughout the project lifecycle.

The Approach

Agile

We followed an Agile process, with daily stand-ups every morning.

Design Work Sessions

This project required a high level of cross-functional collaboration: developers, backend engineers, product management, and design. I led highly collaborative design-focused work sessions multiple times per week throughout the project lifecycle. This fostered frequent communication and feedback, stakeholder buy-in, and evangelization of design ideas and concepts.

Top-Down Design

We started with the high-level user goal and vision before drilling down into the lower-level interactions to keep focus on the primary design solution before addressing smaller design details.

Rapid Prototyping and User Testing

We created rapid prototypes and introduced user testing after every major iteration throughout the project lifecycle.

Closed Beta

We hosted a closed beta to test the functionality and usability of our designs without the guardrails of a user testing session. User feedback was invaluable.

The Discovery

To create a holistic view of the alerting use case, I collaborated with internal users, product management, and my design team to run a value proposition and journey mapping exercise that enabled us to represent our users’ pain-points and to create solutions for them.

Through rapid prototyping, we then quickly mapped out a high-level end-to-end journey with UI concepts for our 2 newly redefined personas, Melinda and Andre.

Reviewing this with our cross-functional team built project momentum and fostered early discussion about multiple aspects of the project: scope, architecture, requirements, design, timelines, and more.

To focus on the first release while keeping a conscious inventory of the steps and features that would need to wait for a subsequent release, we used our map of the high-level end-to-end user journey to identify what steps of the journey to prioritize. Soon, we honed in on the user journey for the first release of our product:

Team Education

Once we agreed on the high-level scope and priorities for the first release of the Monitoring project, we accelerated our education of the Monitoring domain and landscape. We read literature, created a glossary to document nomenclature on which we had agreed, and conducted an extensive competitive analysis.

The Vision

Create a Monitoring feature from the ground up that allows users to:

Create/edit a monitor to measure specific metrics and set criteria for when to trigger an alert to the user
Access the Monitors features via multiple entry points within the product, to prevent a feature-silo’ed user experience
Specify the notification channel on a per-monitor basis
View all monitors at once to check overall system health
Lay the foundation framework for increased scale and future complex Monitoring updates

The Concepts

Framework

My next step was to drill one level down into the high-level journey, into the framework. Fitting a brand new feature into an existing UI required an inventory of the existing framework and a few iterations:

Wireframes

Now that we had answered the who? what? when? why? and where? questions, it was time to answer the how? To do so, I created wireframes, which I reviewed with our cross-functional team after every major iteration. Team feedback and user testing with customers helped inform each iteration.

Designing Monitor Management

Although they successfully captured all of the different settings, my initial wireframe for the Monitor creation flow immediately felt clunky, inefficient and overwhelming:

Challenges with Initial Monitor Management Design

Displaying many fields at once feels overwhelming
Modal dialog feels cramped and rushed
Relationships and dependencies among options is unclear
Layout feels custom and not re-usable
Layout cannot accommodate the eventual addition of more user options and settings
Settings are difficult to understand, not clear what they all do

Redesigning Monitor Management

I quickly revisited this wireframe, identifying the main issues and addressing each of them in a new design:

Solutions to Initial Monitor Management Design

Separating the flow into progressively shown steps guides the user
Create a new page, providing white space and better reflecting the amount of time the user needs to spend on this step
If/else statements capture the relationships among options clearly and are a familiar logic format for Melinda and Andre personas, who are highly technical
Reusing graph and query components from other pages
Modular approach to various monitoring options accommodates addition of future options
Present settings as a sentence so their purpose and relationships are clear

User Testing Response

Users responded positively to the second iteration design in our user testing sessions. Some of their reactions included:

“Interactive, really like that the interactivity of it seems like it helps you get set up correctly.”

“If else statements. Nice. That’s a clean way of doing it.”