Goal
The goal of this project is to redesign the whole web app to make it more informative, delightful, and clear to our users.
Informative: we need to let the report itself deliver as much useful information as possible to users.  Users should quickly and precisely figure out the desired information from the report.
Delightful: the interaction of workflow should be smooth and interesting, rather than being confusing and boring.
Clear: that the whole interaction should be as simple as possible, and easy for users to interpret and learn in a short time.
Problem

Old Site UI

Tediousness: The original table is too long and too complicated for users to digest.
Complexity: Users don't know what to do and what these terms mean until they receive a relatively long instruction course from customer service.
Inconsistency: The fact that there are two different views for one report often confuses users.
User Research
User Interview

Sample questions

User Interview Summary

Common Pain Points
Ideation
Workflow of Wireframes
Interactive Prototype (Programmed)
Prototype Overview
In order to testing the design, I decided to create an interactive prototype. Initially I used Axure. However, I started to realize that Axure cannot show me what the UI will look like with real data. In data visualization area, it is extremely significant to make sure the accuracy of data. Therefore, instead of creating UI prototypes with "fake" data, I decided to code the prototype out with real data. 
It took me about 4 weeks to finish this prototype. I created the prototype using HTML, Javascript, CSS, as well as the data visualization library from NVD3. Fortunately, this prototype works!
Videos
Final Visual Design
By taking usability tests on the interactive prototype, I got more user feedback on data and visualizations, and eventually redesigned the UI based on those feedback. 

You may also like

Back to Top