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:
visualizing data to supplement teaching outside the classroom
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.