SHA_flow@3x.png

Overall BHR Analytics

SHA01@3x.png

Network Analytics

SHA02@3x.png

GWR Analytics Analytics

SHA03@3x.png

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.

Group 33.png

Pie chart - to show data composition in a static view

Group 63.png
Group 64.png

Line chart - to show data comparison over time

Group 34.png

and we have more complicated chart combinations to show data with multiple purposes

Group 27.png
Group 26.png
Group 28.png
Group 29.png

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. 

Group 65.jpg

by default

Group 66.png

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. 

NewSHAMockup-1.jpg