The Alerts page is where the the list of notifications about the status of devices appear. It is one of the most used pages in LogicMonitor and so critical to the customers' experience. This project was to add features to the Alerts page to make it easier for the user to see patterns and trends in their network notifications.
The redesigned Alerts Page received significant positive feedback from users and in followup user testing we often hear comments such as "it's exactly what we needed!" This sentiment is supported by high adoption numbers (Pendo) and other feedback from stakeholders and customers.
The design also because a standard for all Notification pages in LogicMonitor, including Logs and Applications Monitoring.
The Alerts page design was generally disliked by our users due to its layout (e.g. too much white space) and because it was not meeting the users' needs. The most significant identified problem was that when there were a significant number of Alerts it was difficult to identify see patterns and trends in the data, making identifying critical problems difficult.
Based on user feedback the Design Team identified two main problems with the existing Alerts page.
A need to improve how the information on the page was being displayed.
A need to see trends and patterns.
A need to filter and drill into clusters of alerts.
When it came to trouble shooting issues, the users needed to perform the following Use Cases:
Categorize Alerts based on properties (status, device type, etc.)
See trends or patterns
Drill in or filter the alerts based on properties
Filter out alerts that are not relevant
We decided to solve the users' problems with the Alert page by considering alternatives to a just displaying Alerts in a list. We brainstormed and sketched out several alternatives and tested them with users. Below are a few examples of those ideas.
This design placed the Alerts into clustered in bins and displayed as a bar chart. The dimension defaulted to "Time" but the user could choose other dimensions for binning. They could then select a bar and drill into the Alerts.
Customers liked this view, but they still wanted to see the Alert table.
This design initially analyzed the Alerts using a Clustering model (K-Means) and then displayed the breakdown of the Alerts.
Customers loved the visual impact of the design and wanted to us this as a Report, but did not feel it was a good choice for the Alerts page.
This design is one of several that that combined a "Header" graph with the table. This version included a time series graph with the Alerts binned based on time and frequency. The table below is broken into the same bins and the rows are expandable to see the individual Alerts.
Customers loved the time series graph but not the binning of the table.
This design was another version that combined the table with a "Header" graph. In this case, the graph is a tree map capable of displaying several levels of dimensions. The graph was a means to quickly filter the table below by selecting a region in the map.
This was one of the most successful designs.
The conclusion of the testing that that the Time Series and Tree Map header graphs were the clear winners. Users liked many of the alternate designs, but when forced to select the most informative and useful they picked either the Time Series or the Tree Map.
The final design address all of the issues identified through user feedback and heuristical analysis. We reached a good balance point between Information Density and Readability. And, we made the extraction of critical information easier and more efficient.
The final design was an interactive Header Graph. Selecting objects within the graph (lines, boxes) would filter the list and allow for rapid drill down to categories of Alerts. Further, since different users' workflows matched different visualizations, we offered both the time series and tree maps.
Filter by time or value.
This is useful for users who want to see patterns over time, e.g. some users reported they often see the same Alert in cycles, and this visualization was optimized for that usecase.
Include up to three dimensions. Filter by value.
This workflow was useful when there is a large number of Alerts and the user needs to see if those Alerts are occurring on particular categories of devices.
The Header graph page has been very well received and well adopted by our users. It is also become a standard part of the Component Library and is used on multiple other pages within LogicMonitor.