End to End Transactions
Azure Application Insights
Enabled DevOps engineers to quickly diagnose failing or slow application transaction components and identify whether performance issues stemmed from their code or external dependencies, by switching between a hot-path “Gantt chart” view and a Traces & events list.
Partnered with PM and developers to iterate in Figma to test a flexible UX layout that maximizes screen real estate for Gantt chart, revealing important details of selected transactions. A dedicated insights area provides rich details about selected transactions and quick links to additional diagnostic tools.
Client
Microsoft Inc., Azure, Application Insights
Role
Senior User Experience Designer
Location
On-sight, remote
Scope
To help make it super easy to diagnose why a transaction across multiple application components was slow or failed.
Challenge
Have you ever wondered why some online transactions take forever or fail unexpectedly? As applications become increasingly distributed and complex, each transaction often passes through a series of components—sometimes spanning multiple teams or even organizations.
I designed End-to-End Transaction Details to simplify diagnosing slow or failed transactions by improving visibility and access to relevant data. I aimed for more precision than Application Insights’ “Transaction Search” UX, which while helpful for spotting trends, made comparing individual events difficult and time-consuming.
Action
Working closely with a Subject matter expert/ PM, I did market research on similar solutions and realized that a Gantt chart would allow easy comparison of traces. I created a series of wire-frame layouts and shared the best with users in research studies. After trying versions where Traces and Events were always visible, and one where insights appeared on a context pane when a transaction was selected, users requested more space for the Gantt chart and preferred “always visible” insights.
The feedback I received convinced me shift to a version where Traces & Events was hidden in a collapsable drawer and I added a chevron to collapse the insights column, creating greater flexibility for the Gantt chart.
The flexible Traces & Events drawer solved the Gantt space problem, but I also knew that we needed to notify users when Traces & Events data was available, so they’d know when to open that drawer. I added purple dashes on the chart to show the times where Traces & Events occurred and for how long. Additionally I added a quick link icons to the rows, and a button on the Insights column, to open the Traces & Events drawer on click.
The final version enabled DevOps engineers to quickly diagnose slow or failing transaction components and determine whether issues originated from their own code or external dependencies. Telemetry revealed frequent use of Traces & Events signals and links within the UX to access this data. Users also often relied on external tool links in the Insights column to continue their triage workflow.