Jiayao Yu joined callstats.io this past summer as our in-house UI/UX designer. She focused her work on our data-intensive dashboard, marketing materials, and designing a good user experience for our payment service. Read on to learn about her experiences on design challenges with data analytics.
Design Data Visualization for Decision Making
When I first joined callstats.io, one of my jobs was to design the dashboard to facilitate decision-making on the WebRTC service pipeline. To put it in simpler terms, the callstats.io dashboard is like a container: it hosts several pages with different services, including a WebRTC metrics data overview, artificial intelligence-driven data mining, and a Smart Connectivity Test. I focused on the design of the Smart Connectivity Test. It was really fun to play around with the data and try to tell the right stories through visualizations.
Thinking Like a Designer
The first step in this process is to start from the customer perspective. What are your motivations and goals?
Firstly, you want to know how to wisely set up your WebRTC service pipeline to improve the quality of your conferences as much as possible. We need to tell you what pipeline choices lead to higher scores of network quality based on metrics developed by our data analytics team. This includes metrics such as location and service provider. We want to design the interaction path so that you can effectively understand and reach your goal.
A typical interaction for our Smart Connectivity Test covers four steps:
You understand the page purpose and content.
You know how to find better quality calls through our metrics.
You can use the WebRTC pipeline choices and check the associated quality of your calls.
You are able to take away WebRTC pipeline action points to improve your service.
A good design must be tolerant for various individuals, so that anyone can achieve the same goal despite interacting with the design in different ways. For example, if you are using the design for the first time, it should give you an intuition of what to do. We guide you by displaying a data overview and immediately usable interactive elements. For more experienced users, we provide shortcuts with saved settings and direct data manipulation.
Visualizing the Data
We are experimenting with a few different methods of data visualization for the metrics developed by our analytics team. These are some of the visualizations we have come up with. Leave a comment below if you have any suggestions!
High-dimensional Information Visualization
Figure 1: Spider plot of the distribution of conferences with failed connections.
Occasionally, we need to show information on three or more dimensions. For example, the distribution of errors that cause conference failures can evolve and become more complex over time. The distribution is already two dimensional: errors and their associated percentages. An additional component we must take into consideration is the evolution of distribution on the time series. In order to add this additional component, we have to either compromise information visualization to a single dimension, or display all three dimensions in at least two plots. We have been experimenting with the visualization by using a spider plot, then adding a time slider so the user can choose an associated time frame.
Figure 2: Visualization of the average sent frame in basic mode.
The dashboard needs to be easily understood, so we design our data visualizations so that even brand new users without technical experience can get an impactful amount of information from their first impression. For example, when visualizing the changing of throughput over time, we plot two lines for the evolution of sent and received information. The color in between dictates loss in transmission. When visualizing the evolution of video frame size, we plotted frame width and height on two different, mirrored Y axes. This allows us to visualize the space between the two line plots as the capacity of the information channel.
Assisted Decision Making
Figure 3: Visualization of terminated conferences in AI mode.
One example of assisted decision making is our AI-driven data mining. We show raw data collected from monitoring, as well as our interpretations, which includes trends, fluctuations, and predictions. To maintain the integrity of the visualization, we designed two modes: Basic and AI. Basic visualizes the raw data, while AI visualizes the interpretations. In AI mode, we keep scatter plots for raw data points, add trends as a line, fluctuations as an area, and predictions as a dashed extension.
Curious to learn more about the Smart Connectivity Test?