Duration: August 2019 - May 2020

Role: Lead UX Designer

Contribution: UX Design;

                           Graphic Design;

                           Information Architecture

Status: Launched

Overview

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.

Website Analytics

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

Network Analytics

GWR Analytics Analytics

Structure Rearrangement

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 cart" button on the top right to see detailed KPI info. 

by default

card expands while "view chart" button is clicked

Hi-Fi Mockup

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.