Network Performance Monitor
UX Designer
Sep 2016 - June 2017
Ten months
Design brief
One of my first products as a UX designer was the Azure Network Performance Monitor, in particular, designed the data visualization interface for network end-point monitoring. Network Performance Monitor (NPM), helps you perform near real-time monitoring of network performance parameters (such as packet loss and network latency) and localize network faults. It not only detects network performance issues, but also localizes the source of the problem to a particular network segment or device to make it easy for you to locate and fix a network performance issue.
I closely collaborated with program managers and engineers for this project as the only UX designer in the team. I also remotely collaborated with the Azure design framework team based in Seattle, WA.
Understanding the users
A typical user for this product is a Server Administrator who is responsible for keeping an organization’s computer network up to date and function smoothly.
Other responsibilities include -
-
Installing network and computer systems
-
Maintaining, repairing and upgrading network and computer systems
-
Diagnosing and fixing problems or potential problems with the network and its hardware, software and systems
-
Monitoring network and systems to improve performance
Key Concepts
End Point Monitoring lets the user monitor the network connectivity across an application over the internet.
The modern enterprise often relies on infrastructure outside its control including the internet and cloud application provider’s network. There can be a number of causes that might impact the connectivity of these cloud-hosted applications.
Endpoint monitoring lets users locate the faults in the network connectivity of these applications by conducting a series of user-defined tests. A user can set up either a web test or a network test on an agent to monitor a target URL. A web test gives you network metrics like Response Time, SSL time, and DNS time. Whereas, a network test lets the user measure the Loss, Latency and Jitter across the network.
The diagram below explains the building blocks of this feature.
Design
Due to NDA, I cannot disclose the details of the process and the iterations, however, you can find a case-study discussing important design implications “here”.
In brief, the user starts at the dashboard where they see the key metrics. They can drill down to see two levels of granularity in the network information. The users can finally visualize the nodes in a network in the form of a Network Topology Diagram.
Drill down views
The second tier of information is an information dashboard that contains a list of tests or agents on the left of the screen. The list is sorted such that any of the tests/agents that throws an error is on the top of the list. When the user selects a particular test, they can see the key metrics like loss and latency trends on the right section of the screen.
Drill down page
Topology
The final level of granularity is shown to the user in the form of a topology map. Here, a user can visually see the nodes(or hops) in the link. Each node has an IP attached to it. Nodes that are not identified by the IP are displayed as Unknown nodes. Each node also has a healthy/unhealthy indicator. The health of a node is defined by whether or not they have a breach in their threshold loss or latency.
The users usually focus on the unhealthy nodes, indicated in red to further understand the underlying issue, which could be caused due to multiple factors including faulty hardware and malicious traffic.
Care was taken to make the topology map accessible and therefore you see glyphs of the exclamation marks and checkmarks in addition to color to indicate the node health.
Users can also see the latency between two hops in the topology map. Moreover, users can hover on a node to see the network details of the node and can further drill into the raw logs of the node.
An additional interaction pattern that helps scale-up busy topology maps was to compress multiple nodes to show the health summary of that link.
Network Topology map
Design responsibilities:
User research, interaction design, data visualization, usability research, graphic design
Tools used:
Sketch, Invision, Adobe Illustrator, Zeplin
You can read more about my thoughts on enterprise design in my Medium Blog here.