Interactive Data Portal

Humanities Research Lab is a multi-campus NYU project researching the significance of New York City immigrants. The lab had no web portal to integrate project creation and showcasing, making further development difficult. Our team set out to build an original data visualization portal from scratch — designed for the professors and students who would use it for academic teaching and learning.

The lab and project were started in 2020, however, there wasn't a web portal integrating the project creating and showcasing, which increased the difficulty of further development.

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

My team focused on our main target users — professors and students — and conducted interviews to understand how they teach and learn with data.

The main user will be students who take a history class and use the data portal to complete assignments. The secondary user will be professors who add the portal as a tool in the syllabus. After interviewing future student users, we identified the user journey as 5 steps: from getting to know the data in class to using the visualization tool and developing data insights independently.

We aim to build a data portal that serves two needs:

1. Visualizing data to supplement teaching outside the classroom
2. Assisting students to learn data and build their own narrative

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 fulfills the vision of the curriculum.

We studied graph types — histogram, box plot, correlation matrix, scatter plot, bar graph and line graph — and chose Plotly as our visualization library. It is a powerful library that enables many customizable functions, and we selected a list of universal features to employ across all graphs to increase functionality.

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

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

We created a clickable wireframe on Marvelapp.com and conducted 7 in-depth user tests. Users thought out loud as they went through the wireframe. We concluded this design was over-complicated, which also added difficulty to the back-end workload.

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 data input and output.

Similarly, we observed users go through clickable wireframes and documented their feedback. We then made quick adjustments and conducted a third round of user tests through a slide deck walkthrough for immediate responses.

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

The interactive data portal is an on-going project that aims to host on the 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.