Application map
Azure Application insights
Created an intuitive visual topology for distributed application systems—now a user-favorite for customers in reducing signal noise and identifying APM issues.
Partnered with PMs, Developers, and UX Researchers to iterate on Figma prototypes using customer calls and feedback loops.
Designed an intuitve interactive interface featuring semantic zoom, detailed filtering, and on-demand insights to quickly surface crucial data.
Client
Microsoft Inc., Azure, Application Insights
Role
Senior User Experience Designer
Location
On-sight, remote
Scope
To help users easily find problems in their distributed application systems using an industry standard topology view.
Challenge
Azure’s Application Insights team aimed to help App developers, DevOps professionals, and Site Reliability Engineers identify issues in large, distributed application systems.
Unfortunately, the first version of the Application Map was visually complex, and lacked a clear indication of problem areas, leading to poor success metrics and low retention numbers.
Action
The App Insights team consulted with me on the project, requesting a redesign to solve the problems with their V1 design.
I began by working closely with the PM to create a user flow diagram that would demonstrate the customer journey, since one of the main goals of Application Map was to use it as an entry point to other Application Insights triage tools, like Availability, Failures, and Performance.
After brainstorming with the PM and Dev team, I began by creating rough wireframes to explore the addition of an on-demand context pane to display additional info about each node, using a card-based visualization that identified the most problematic issues and sorted them to the top of the list.
Market research revealed many existing application-based topologies favored clean circular nodes, which I adopted to optimize the map layout for scale. I added health info on the nodes and the connections between the nodes to quickly help identify problem areas. An adjacent historical timeline showing deployments and alerts was later cut due to development constraints.
The switch to smaller node visualizations meant that the nodes would lose some of their informational details. I compensated by introducing the concept of “semantic zoom” which reveals or hides different aspects of the data depending on the zoom level, providing a more meaningful way to explore the node information.
After I had entered the high-fidelity mockup stage, I created style-guides for the map nodes and colors, to share with our front-end Developers, working with them on a day-to-day basis to ensure code consistency with my design goals.
Feedback from my PM and others indicated I’d need to simplify the visual footprint even more, so I dropped the iconography on App nodes, reserving them only for dependencies.
Research validated that the UX had improved across every measure, however, users with large app systems complained that the density of their data on the map canvas made it difficult to isolate hot spots. I responded by creating a filtering capability to narrow on what mattered and the ability to save or load filtered views to use later or to share.
Result
With the new filtering tools in place, Application Map became a user favorite, particularly among Azure’s largest enterprise customers, as it improved the flow of the application triage process, drove increased usage of Performance, Failures and End-to-End Transactions capabilities and reduced time to mitigation for problem issues.
Since all products in Azure need to work at sizes consistent with smaller form factors like mobile phones, I created a series of mockups to assist our developers in creating our responsive break points, while maintaining the integrity of the interaction concepts.