top of page

Usage Analytics
Dashboard Redesign
Overview
Usage Analytic dashboard is a Data Visualization dashboard helping users to understand and monitor how each function is used in NetX360®️.
Type
UX Design, Data Visualization
Responsibility
User Research, Prototyping, UX Design, Visual Design, User Testing
Problem
According to Stakeholders and product users, the current dashboard is dated, difficult to understand, lack of necessary visualizations, and too many unnecessary items.
Goal
Redesign the dashboard base on users' true daily needs. Enhance the visualization method and visual style.
Before
After


Analysis of Current Screens
Targeted Users
-
Internal Users
-
Managers
-
Clients using the software (CITI Group)
What data do users want to see?

Current Chart Types
-
Bar
-
Stacked Bar
-
Line
-
Staked line
-
Area
-
Stacked Area
-
Pie
-
Map
-
Donut
-
Scatter

Problems of Current Screens
-
Technical Constrain
-
Wrong Chart Type / Use Treemap in the wrong way
-
Unclear Data Visualization
-
Dated layout
-
Unnecessary visualization items

Method Enhancement
Correct wrong old method
Aiming at enhancing the visualization method, we pull out the raw data and compare it with the current visualization method. These are our findings:
-
The goal of this visualization is to compare the usage of the top 10 functions.
-
The current visualization is using treemap in the wrong way. Treemap is using to show hierarchy instead of comparing the amount.
-
New Method uses a bar chart, to showcase the numbers in a concise way.


With the reorganization and the methods redesign, the dashboard now has a new look and a new layout.
Enhance new methods.
As the new methods got positive feedback, the goal for the second step is to enhance accessibility and readability.



Visual Enhancement
After getting great feedback for the enhanced chart, we started to design the final look of the visualization. As there's no exact visual guide for this visualization in the design system, our goals are:
-
Design a modern look.
-
The design should be matched with the colors in the design system.
-
The design should show consistency with the design system and the other screens of NetX360®️.
-
The look should not harm the readability and accessibility of the chart if not helping it.

Preview Tiles enhancement
Butterfly chart enhancement
Bar chart enhancement
Apply real data to the enhanced design to adjust the detail.



Final Looks
Conclusion
Designing/redesigning a data visualization project is not only about the visual look.
To think about which Data Viz method would be the best to interpret the raw data can be much more important.
Accessibility and readability should never be sacrificed.
Never forget the visual consistency of the Data Viz and the whole product.
bottom of page