top of page

Web User Study Case:
Data Visualization Tools Browser for All

Timeline

2021.02-03: User Interview

2021.03-05: Web Redesign

2021.06-08: Evaluation + Write up

Role

Solo Supervised Project

Methodology

Mixed research methods:

Interview, Think-aloud; Personas, Mental Modeling; Survey, Usability Evaluation;

Project Background and Questions

VisBrowser (See the figure on the right) is an online collection of data visualization tools, Data visualization is becoming an indispensable process in industry and academia, and data visualization tools are emerging and developing rapidly. Data visualization tools help users to understand and analyze data. These tools have various characteristics and are designed for different data visualization tasks, so choosing an appropriate tool is essential. 

主页1.png

The original version of VisBrowser

主页1.png

Are users (i.e., people using this website) satisfied with the search features? (= 1. Can they find the tools they need efficiently? + 2. Do they like the design aesthetically? 3. If not, how can we redesign it?)

Research

1. Survey: 30 participants (university students who used the web before) responded to the web UX questionnaire. https://docs.google.com/forms/d/e/1FAIpQLSekliZhL5Bg_lrfMGQUHAcCn2P0JvhEx4bXPCYynAUDZ-3IaA/viewform?usp=sf_link. Questions covered usability, perceptions, and expectations.

 

2. Interview (Think-aloud Protocol): 6 participated (from survey responses) in semi-structured interviews. User research was carried out remotely due to the COVID-19 crisis. An online concurrent think-aloud (CTA) method was used in remote interviews. 

User Modeling

From the survey responses, I analyzed why users come to a visualization tool website. Then I generated users' mental models and personas based on one-on-one in-depth interviews. The interviews were conducted online via Zoom (30-45 minutes each).  I used the think-aloud technique to let users explain their behaviors and perceptions.

3.3.png

Think-aloud protocol

mental model.png

Users' Mental Models: Search a Tool + Browse Tools

personas.png

Personas

Re-Design

3. Design decisions were made based on brainstorming.

The new design can be found: https://vistools-browser.webflow.io/

a. list searching filter options vertically on the left to show all items clearly.
b. make searching box supports flexible searching because the user may not remember the exact name of tools.
c. keep UI simple because the image of tools is already colorful.

Final Design - homepage

Conclusion and Reflection

This is my master's project, and when I am viewing it now can find tons of flaws and limitations, though it got a Distinction back then. 

Overall, the project did produce a nice-looking and easier-use (probably) website. However, as a research project, I would challenge several things:

1. Why is there no usability test for the re-designed version? This makes the project incomplete.

2. Why are the aesthetical improvements part of the redesign goal? Though I understand the original version looks gross, the color change is not a high priority. The time should be used on user testing.

3. The method choice can be more intelligent; it would be a good chance to use A/B testing.

bottom of page