Interactive Data Portal

#React #Figma #User Research & Test

An interactive portal for flexible, real-time data visualization for historical research for Humanities Research Lab at NYU.

Timeline

2021 - 2022 (Weekly Meeting)

Project Type

Part-time Internship

Team

Heather Ruth Lee (mentor), Sarah Tahir (front-end), Yufeng Zhao (full-stack developer), Yuchen Wang (back-end), Tim Wu (data analysis)

Tools

Figma, Illustrator, Github, React, Tailwind, Next.js, MongoDB, Google slides, Excel sheet

My Contribution

UX Research, Design & Test: user interview; user tests; design clickable wireframes; build UI components

Development: program the front-end framework, implement styling and functionality

Background

Problem

Humanities Research Lab is a multi-campus NYU project to research the significance of New York City immigrants. The lab and project were started in 2020, however, there isn't a web portal integrating the project creating and showcasing, which increases the difficulty of further development.

Therefore, our team aimed to build an original data visualization portal from scratch, based on the need of main user: the professors and students who will use the portal for academic teaching and learning.

Challenge

Problem Statement

How might we create an interactive portal to help students reach the learning goal of developing original arguments through visualizing historical data?

User research process

User Research 01: Methodology

My team focused on our main target users, professor and students, and developed two main research areas: user and data research. We aim to build a data portal that can logically visualize large size data while easy to learn and use. It is vital that the portal we built serves two needs:

  1. visualizing data to supplement teaching outside the classroom

  2. assisting students to learn data and build their own narrative

User Research 02: User Interviews

Our data portal needs to be widely used within the NYU network for teaching purposes. The main user will be students who will take a history class and use the data portal to complete assignments. The secondary user will be professors who add the data portal as a tool in the syllabus to assist students analyze data. There is a potential group of guest users who can view the data portal page online but have limited access.

User Research 03: User Journey

After interviewing future student users, we identified the journey process as 5 steps: from getting to know the data in class to using the visualization tool and developing data insights independently.

Data research process

Data Research 01: Methodology

To build a data visualization portal, our team conducted in-depth research into the dataset used. We studied the meaning behind the data, the academic potentials and limitations in order to create a user-friendly portal that at the same time fulfills the vision of the curriculum.

Data Research 02: Graph & Variable Type

To begin with, we started to study the types of graph, histogram, box plot, correlation matrix, scatter plot, bar graph and Line graph. By understanding what constitute the graph, for example the shapes and trend, the team tailored the visualization to follow the data structure as well as appear coherently and attractively.

Data Research 03: Functional Features

We chose Plotly as our data visualization tool. It is a powerful library that enables many customizable functions, shown as below. Based on our previous research on the potentials and limitations, we chose a list of universal functions to employ in all the graphs in our portal in order to increase the functionality.

Competitor research

Competitor Analysis

After knowing the user and the data, the team jumped into a quick competitor analysis process where we looked into similar projects from other university. We summarized the style, content, user flow in these websites, and helped ourselves to better imagine what our project could look like.

Reference 01: MIT

Reference 02: Yale

Reference 03: Stanford

Ideate 01: Compare Graphs at the Same Time

Ideate & test process

The first design focused on the functionality. One major task for students to accomplish is to compare and summarize different graph types. We created a multi-panel visualization wireframe, empathizing on the prominent functionality and data visualization logic.

Test 01: Clickable Wireframe

We created a clickable wireframe of this design on Marvelapp.com and we conducted 7 in-depth user tests where users will think out loud as they go through the wireframe. We documented their reactions and confusion, and concluded that this design seemed to be over-complicated, which also added difficulty to the back-end workload.

Ideate 02: Simplify Activities

The second design focused on smooth workflow. We eliminated unnecessary windows and tabs, centering only one active graph on the screen. This design contains a side-by-side panel with clear distinction between the data input and output. We considered this step as a big progress from the last version.

Test 02: Clickable Wireframe & Slide Walkthrough

Similarly, we first observed users to go through the clickable wireframes and documented their feedback. Then we quickly made adjustments based on the feedback and conducted the third round of user tests with the same users through a slide deck walkthrough for immediate responses.

Design

Final Design

The team synthesized the research and user test findings, designed the final wireframe for a neat and smooth workflow. We utilized the use of shapes, chose a soft background color to stand out high contrast visualizations. Last but not the least, we developed prototype with functional front and back end.

Final product

Final Outcome

The interaction data portal is an on-going project that aims to host on NYU network server for first-year core curriculum. Our work of user research, data analysis, UX design and development serve as the foundation for further iteration and updates.

Previous
Previous

Design for human connection

Next
Next

Design for interactive art