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.
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.
Common Pain Points
Workflow of Wireframes
Interactive Prototype (Programmed)
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.
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.