SHA02.jpg
SHA03.png

Smart Home Analytics is one of Verizon's internal analytical websites which provides a common platform for all in-home analytics. The goal of SHA is to address different needs across organizations for understanding network and client behavior better.

Artboard_3x.png
web mockup V1-front.jpg

THE Story

Project Duration

Feb. 2020 - Jun. 2021

Project Status

Launched

My Role

Sole UX Designer

Contribution

UX Design  |  Information Architecture  |  Design System

SHA is at first an internal site used by a small number of technical teams such as the Network Repair Bureau. It helps to monitor general router conditions in the Verizon-covered area and evaluating the router according to the open ticket.

 

With a broader usage of 5G technology, SHA expanded its scope into the LET network analysis and 5G router test field. In the meantime, another product Network Performance Analytics (NPA) within our team is about to merge part of its function into SHA due to overlapped users. Inevitably, SHA gained a wider user group from the Business and Customer Quality team to Mobile Device Hardware and Global Access Engineering. As SHA continues to grow, the need for rearranging SHA’s structure and renovating it with a redesign becomes an urgent task to create SHA’s unique identity.

User Needs

As the sole designer, I took the responsibility to redesign the website. The first thing I need to figure out is what users need/expect for SHA 2.0. After speaking with the project lead and sending out emails asking how current customers feel about SHA, I found what our users actually need:

UsersNeed_3x.png

Site ReStructure

To achieve an optimized workflow and merge content from NPA, I started a site restructure with the help of the project manager and stakeholders. Our main goal is - First, rearrange the original BHR Analytics and add a new debug feature; Second, migrate the 5G & 4G LTE business from NPA to SHA; Third, add an Admin section for administrators to monitor user activities.

StructureRearrangement_3x.png

​Troubleshooting

As the same time when we're busy reframing the website, we found that there are dozens of problems existing in the original SHA. Some are due to the unplanned site structure; some are page utilization issues; and some caused content low discoverability and findability.

 

As said by Don Norman, designers are trained to discover real problems. In order to find the key to a successful solution, I validated our site's problems and listed representative ones below before we start the redesign:

These unclickable modals show the major KPIs in our daily in-home analytics. However, as the home page of SHA, large modals with little information consume too much space and leads to a low utilization rate.

TroubleShooting01_3x copy.png
TroubleShooting01_3x03.png

unlike commercial or social media sites that provide users infinite scroll to keep them as long as possible, an analytical website needs to be “straightforward”. A concise location of data can guarantee a smooth and time-saving experience.

TroubleShooting01_3x copy2.png

One of the most misleading parts of the original design is, these information cards on the top part of the page are buttons indeed. Each button is associated with a bunch of charts and reports which appear on click. As the first-time user without any pre-informed instruction, it is a mission-impossible for them to guide themselves through this section, which leads to a low CTR.

Long-scrolling

Low Page Utilization

Low CTR

Example of

Demystifying the problem

To understand any problem, we need to first break it down to gain better understanding.

For example, to solve the low page utilization and long-scrolling issue, I looked into the structure of "Overall BHR Analytics" and "Network Analytics". I found that, part of the KPIs shown on the home page modals are corresponding to the line chart on "Network Analytics". There could be a chance to combine these two related content and simplify the page.

v_3x.png

Modals in "Overall BHR Analytics"

Line charts in "Network Analytics"

First Attempt

After validating my idea about the section-combination with the product manager and stakeholders, a new design form - card is applied to all modals. Each card carries the information of the KPI performance rate and Increase/decrease. While on collapse, the size of this table is reduced by 2/3 compared to the previous modal; While clicking on the chart icon on the top right corner, the card expands with a line chart which shows the KPI performance trend.

table002_1_3x.png

Collapse

chart002_2_3x.png

Expand

Iteration

Although the idea of using the card gains applauds, there are still problems while implementing - A single expanded card takes too many spaces, leaving the neighboring cards a blank space.

chart_03_3x 2.png

So we decided to move the chart icon outside of the card and make it a universal controller. Every time user clicks on the chart icon, KPIs under this section expand.

chart_table02.gif

Outcome

NationwideBHRAnalytics_Numbers 2.png

Design System

As our product continues to grow, the need for a coherent and memorable visual identity becomes more important to ensure a consistent user experience. With a standard design system, designer and developers can collaborate more successfully together, and our team can eliminate the efficiencies by reducing the frequency of visual QA. So I took this chance and build a design system for SHA.

Styleguide_3x.png

Style Guide

UI Component_3x.png

UI Component

Path 7_3x.png

Features walkthrough

Provide general analytical reports on a national scale. Nationwide Analytics is consists of Overall View, Comparative Analytics, Customer Behavior, Performance Comparison, and Data Consumption. Each data was categorized and framed to avoid long scrolling and ensure an intuitive user experience.

Nationwide Analytics

Data Consumption Analytics_Short02_3x 2.png
NationwideBHRAnalytics_Numbers_3x.png

Map View Analytics

Map View Analytics present user with a geographical view of the Verizon Fios service subscriber and outage distribution. Users can select different layers to have a holistic impression of the VZ network usage. Also, they can make cross-comparison by selecting multiple map layers.

Artboard 9.png

Broadband Home Router (BHR) and Fios Home Router (FHR) ensure user a detailed diagnostics of a single in-home router/device.

BHR/FHR Analytics

MeaSure Success

We received bunch of positive feedbacks after the site launch on June 2021, and this is what we achieved so far:

Derek L

It definitely brought us to the next level of beauty in user experience.

14.3%

CTR on BHR/FHR Analytics (original BHR4 Analytics)

3,500+

Total navigations per week

600+

Active internal users from 15+ different groups and departments by Q2 FY21

+670%

+182%

+311%

Bravo! Nice job! the new design looked totally professional! It clearly showed the results and the design is very neat!

Nan - Device Technology

I'm really proud that I handled all the design tasks on my own, and users love my work :)