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.
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 node info, 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 I’d need to compensate for reduced info details on each. I compensated by introducing the concept of semantic zoom, to allow users to see more details on each node by zooming in and out by using + or - icons or the mouse scroll-wheel.
Since 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, and I worked with them on a day-to-day basis to ensure code consistency with my design goals.
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.