top of page
analytics-skeleton.png
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
compare2.png
final.png
Analysis of Current Screens
Targeted Users

  • Internal Users

  • Managers

  • Clients using the software (CITI Group)

What data do users want to see?

Interview the users to get the most wanted data.

questions.png
Current Chart Types

  • Bar

  • Stacked Bar

  • Line

  • Staked line

  • Area

  • Stacked Area

  • Pie

  • Map

  • Donut

  • Scatter

current2.png
Problems of Current Screens

  • Technical Constrain

  • Wrong Chart Type / Use Treemap in the wrong way

  • Unclear Data Visualization

  • Dated layout

  • Unnecessary visualization items

current.png
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.

compare.png
compare2.png

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. 

iteration1.png
iteration2.png
compare3.png
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.

iteration3.png
Preview Tiles enhancement
Butterfly chart enhancement
Bar chart enhancement
Apply real data to the enhanced design to adjust the detail.
bar chart.png
pie.png
final.png
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