IBM Cloud Pak for AIOps
The original topology visualization for IBM Cloud Pak for AIOps was a non-interactive static screen, created in a hurry by a dev team under a deadline. Users could pan and zoom but couldn’t click on any of the nodes or decorators, and the overall hierarchy wasn’t useful for SRE’s trying to find the root cause of their issue. Unsurprisingly, the user metrics on this element were terrible- no one used it. With this in mind, my team was tasked to completely redesign the topology viewer.
My role
Visual Design
My teammates
Guy Loret de Mola – UX Design
Colin Butler – UX Design
My process
First, I engaged with user research to develop a deep understanding of user pain points, behaviors, and needs. From this we established our primary persona, Carlos the SRE. After some lo-fi explorations I started on the first of many iterations of a customizable topo viewer to help visualize and map events for our users. I designed the viewer to be intuitive, accessible, and easy on the eyes, with a complete UX and visual overhaul.
“I don’t know what to work on first. There are too many alerts, events and cryptic info.”
— User feedback
I sketched several versions of the topo viewer on paper, then mid-fi'd it in Figma, regularly gathering user feedback and collaborating with my research and UX partners to ratify design decisions. Once we came to a generl consensus, I created the final hi-fi screens and a clickable prototype.
We spent a lot of time exploring how to display the decorators for each node, i.e. the slugs that indicate alert severity, resource type, and other details critical to the user. The decorators lost detail when zoomed too far out, and I worked with our development team to set a minimum size so they wouldn't be lost.
Business results
The topography viewer my team developed was adopted by a majority of our current users and helped them cut through the noise and unlock the value of IBM Cloud Pak of AIOps. Here are some key metrics from our v4.5 GA:
- 3X increase in utlization
- Improved internal accessibility score by increasing color contrast
- Increased NPS score
Awards
We won both a Red Dot Award and Indigo Design Award for our work on AIOps. I storyboarded, edited, voiced, and created the music for our awards submission video to Red Dot. Honestly, I think it was the animated mouse eating the cheese at the end that clinched the win.