Duration: August 2019 - May 2020
Role: Lead UX Designer
Contribution: UX Design;
Provides common platform for all in-home analytics independent of the vendor for home router product lines.
The goal of SHA is to address different needs across organizations for understanding network/client behavior better.
BHR Analytics and Ticket Analytics are two major functions of SHA.
"BHR (Broadband Home Router) Analytics" generates reports about the general router condition in the Verizon-covered area and gives the user an evaluation about the router/extender at home. "Ticket Analytics" focuses on the problem-solving part, it listed out the opened tickets with various router issues.
We are focusing on "BHR Analytics" here. Below is part of the analytics about the BHR pages.
Overall BHR Analytics
GWR Analytics Analytics
By working with the project lead and our front-end devs, a rearranged website structure is listed below:
Analytical Dashboard Card Design
A primary goal of an analytical dashboard is to help users make the best sense of the data, analyze trends, and drive decision making. After sorting the structure of SHA, I decided to arrange the website with cards.
Use card in dashboard design helps users quickly categorize the information and locate the specific one they want. Cards also help to keep a neat layout, as well as the responsive design. To make each card representative for its data, we have to define the purpose of each data we get.
Pie chart - to show data composition in a static view
Line chart - to show data comparison over time
and we have more complicated chart combinations to show data with multiple purposes
Tables are used to present specific data when data scientists and stakeholders want to go deeper to the data source.
One small shortcoming for cards, personally thinking, is that they take too many spaces. No matter it is to keep the margin between the content and the card or to maintain the distance between each component, cards take more spaces than a regular site. However, as an analytical dashboard, to make users see as much data as possible at first glance is of great importance. So I came up with a unique card-style - an expandable card, which takes less space by default, and users could click through the "view chart" button on the top right to see detailed KPI info.
card expands while "view chart" button is clicked
According to the new structure, I designed the new website layout. As can be seen from the mockup, the infographics and texts are framed and categorized to make information more recognizable.