singh.aru@husky.neu.edu​ | arushisingh5545@gmail.com

© 2019 Arushi Singh

Traffic Analytics Dashboard

UX Designer

June 2017 - July 2018

One year

Design brief

 

At Microsoft, I worked as a UX Designer for Traffic Analytics, a flagship cloud-based Network Monitoring solution. The goal was to design visualizations and an easy-to-se dashboard to support network traffic analytics. In particular, I was required to create a visual dashboard for network admins for them to look into their network traffic.

 

This was a unique experience of building an entire product experience from scratch.

 

As the only designer working on this product, I was responsible for the initial phase of understanding the user requirements, building the Information Architecture, UI flows, UI screens and visual assets.

Background

Traffic Analytics, a cloud-based solution that provides visibility into user and application traffic on your cloud networks. Traffic Analytics analyzes NSG Flow Logs across Azure regions and equips you with actionable information to optimize workload performance, secure applications and data, audit your organization’s network activity and stay compliant.

 

Gain visibility into network activity across your cloud networks

  • Traffic flows across your networks between Azure and Internet, in Azure,  public cloud regions, VNETs and subnets

  • Inter-relationships between critical business services and applications

  • Applications and protocols on your network

 

Identify threats and secure your network

  • Logs between your VMs and rogue networks

  • Network ports open to the Internet

  • Applications attempting Internet access

  • Anomalous network traffic behavior

 

Improve performance of your applications

  • Capacity planning

  • Analyzing inbound and outbound flows

  • Understanding application access patterns

  • Identification of traffic hotspots

More details can be found on the Microsoft Blog here.

Understanding Users

Traffic Analytics can be used by network, infrastructure or application administrators, to gain insights into the performance of network Links, to monitor network connectivity or to identify root-cause of poor network performance.

Users can use the product on their laptops or large monitors. They also juggle between multiple products to understand root cause of a network issue.

Process

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”, which involved exploring how complex products visualize large scale data for easy consumption. Because the domain of networking was entirely new to me I used analogies to understand and communicate the concepts. My development team often gave me insights into how the world of networking works.

Interface design

 

Designing the interface was an iterative and collaborative process which involved almost daily reviews with the development and management team. This was also a great learning experience for me as I was working very closely with the developers and thus making sure that I'm designing 'doable' things without compromising on the experience.

 

Below are few snapshots from the Dashboard, Geo-Map visualization, and some finer UI details like the filter design.

Dashboard 

The dashboard is the landing page that a user can view once they have configured their solution. It is designed to give an overview of the network traffic and allows the user to drill down at various data pivots.

Data Center Visualizations

I explored various visualizations for how the data centers (DC) can be shown visually on the dashboard (Seen below). The premise was to show 'which DC is talking to which one with how many flows'. I explored heat maps and flow diagrams but eventually shelved those because they had limitations of scalability.

 

I then tried to visualized DCs on a map. When the prototypes were tested to the users seemed to bend towards the map based visualizations because they are used to seeing data centers on a map as they are geotagged.

 

The Bing map api was used for the map and plotting the map and an azure plotting library for creating the topology maps.

Takeaways

This was my first experience, working end to end as the only designer on an enterprise product. Here are my top five takeaways from this experience-

  1. It is good to be out of your comfort zone: Before working on this product I only had experience working on commercial products which I could easily relate to. This was because I could imagine myself or someone I know using it. However, designing for enterprise products is a different ball game altogether. I learned about an entirely new domain of Network monitoring.

  2. Complex is the new simple: Don't stress out when designing for very complex scenarios and dealing with large amounts of data. I have a new sense of pride in myself for being able to understand and design for this rather complex product and ship it on time.

  3. Working with a remote mothership: At Microsoft India, teams often work in close conjunction with the HQ at Redmond, WA. We used many shared components and that required frequent late night calls. It only makes me think of the scale which is required to build a small solution in the Titanic of cloud services-Azure.

  4. Where is thy user?: Getting time from very niche users for an MVP product can be difficult. It often required me to collaborate with research teams in Redmond and to conduct remote usability studies with users across the world.

  5. Be your own evangelist: Design needs a lot of evangelizing in the organization, enterprise design might require many times more of that. I worked with a team of designers who catered to multiple products across Microsoft. Imagine if it took me so much time to understand the product, how difficult it would be for other designers? I often to used simple analogies to help them relate to my product. For instance, I would explain Traffic Analytics to be the same as someone monitoring road traffic of a state or city.

 

Design responsibilities:

User research, interaction design, data visualization, usability engineering, graphic design​​

Tools used:

Sketch, Figma, Invision, Adobe Illustrator, Zeplin

You can read more about my thoughts on enterprise design in my Medium Blog here.