MAJOR QUALIFYING PROJECT
IQP Data Collection Tool
Unite all data methods into one platform
The IQP Data Collection Tool is tailored for WPI undergrads to collect and analyze their data across the globe, competing against current industry applications.
In this PERN stack app, I led the design and development of the responsive UI and conducted user research and testing.
Product
Fullstack Web Application
Skills
Product Design
Interactive Prototyping
Front-End Development
User Research & Testing
Tech Stack
React, Node.js, Express.js, TypeORM, AssemblyAI, Docker, AWS, Figma, Shadcn, OpenLayersMap, PostgreSQL
My Role
UI/UX Designer/Researcher
Lead Front-End Developer
Timeline
May - October, 2024
Team
Hunter Poulin, James Walden, Nate Schneider, Gus Montana
What's IQP DCT?
A personalized data tool for WPI undergrads
Worcester Polytechnic Institute undergraduates participate in a humanitarian project known as the Interactive Qualifying Project (IQP) in any part of the globe. Our tool serves as an application that helps students collect interviews and qualitative/quantitative data, along with services such as geotagging, transcriptions, and team management.Some numbers for context
1,200
students travel per year
50+
project sites
8
weeks of community work
Some numbers for context
1,200
students travel per year
50+
project sites
8
weeks of community work
Defining the Problem
From Chaos to Clarity
For many projects, teams must gather large volumes of diverse data, those being qualitative/quantitative inputs, surveys, and interviews. With this information logged and scattered across multiple platforms and applications, the process can quickly become disorganized and inefficient, making it harder to develop cohesive solutions.
In 2023, the IQP Iceland Team began addressing this challenge by creating an app to reduce the overhead of data management. However, their solution remained confined to its project archive. Building on their vision, we aim to establish a standardized workflow that empowers future teams to spend less time on logistics and more time on meaningful analysis.
Project Goal
Design and build a fullstack app that will methodically standardize data collection for efficient project workflow.
Key Features
IQP teams can create and manage a unique project dashboard for their needs and add in team members or faculty.
Every time a member logs data, it will be geotagged where it was taken onto the interactive map.
Many IQP data sites may not have service or wifi. Students can store data in local storage until syncing at a later time.
After collecting respective data, a student should be able to export the data onto a .csv for further analysis.
UXR
Student Needs & Competitive Analysis
Three main research pillars
Prioritization
We analyzed 20 unique IQP project papers to find common metrics in the way students collected data. To minimize error, all team members took part in reviewing another peer's overview to check for any mistakes. We prioritized the highest percentages as our first sprints and progressed from there. Out of those 20, 90% had interviews, 90% qualitative data, 70% surveys, and 50% quantitative data.
Viability
Existing applications such as Fastfield and Jotfield allow form building, geotagging data, and exportation, but what disadvantages to they have? Not free, complicated UI, and is intended for the electrical industries. Our application will be tailored to WPI students as a university service for free and aim to have a simple UI.
Revitalization
With current WPI pages such as the university site, planner.wpi.edu, and courselistings.wpi.edu, we will revitalize the current color palette and component structures so users can recognize similar layouts. Using shadcn UI, our interface brings a new level to the frontier.
User Flows
Building on those insights, we designed the following user flows to directly address the challenges. Below, the first flow on the left details the onboarding process for a student, guiding users from SSO login to project selection. Students can create a new project, join with a PIN provided by a team, or view an existing project. Role-based permissions ensures that project leads maintain oversight while the members collaborate efficiently.
The second flow on the right focuses on how users engage with the forms, starting from the project dashboard and branching into options such as creating, reusing, editing, and adding data. Through the mapping page, we can visualize the geotagged data over time. Forms are accessible through both pages.
Design System
The design system of the IQP DCT serves as a visual bridge between WPI's existing interfaces and a refreshed, modern aesthetic from shadcn. By blending in familiarity with modern minimalist principles, we ensure consistency across the platform while introducing a cleaner and more intuitive student experience.
Design Iterations
After defining the design system, we began to explore how the core flows would look in practice. The initial mockups helped visualize basic layouts for forms, dashboards, and project onboarding. These early drawings focused on functionality, making sure all the required steps were represented.
As a note, all of us were unfamiliar with Figma and the fact that shadcn has their own Figma design system in place. As a result, our early mockups were limited by the initial learning curve, but never the less this provided a valuable learning experience on how to format our application.
Iterative User Testing
With our starting full-stack prototype reflecting our first iteration mockups, we began conducting iterative user testing to uncover usability issues and validate design decisions. This phase allowed us to directly compare different interface variations, helping us identify which layouts, navigation patterns, and UI best aligned with student expectations.
Our user testing was done over three weeks with a goal of completing 10 tests in each week, for a total of 30 sessions. Most of our feedback came from the first two weeks.
Student & Faculty Feedback
1
Form Tiles & Sections
Our previous designs on the Form Page relied on a table of forms, filterable through the top filters and organized by category in a side navigation bar. However, this structure created unnecessary click depth and pages, forcing users to navigate through multiple layers before reaching the form they needed. As a result, quick access to specific forms was limited, and it became harder for users to distinguish forms and conduct the necessary functions.
In the new design, each category of forms is organized into collapsible accordions, allowing teams to expand only the sections most relevant to their project. Previously, the sidebar had Qualitative, Quantitative, Interviews, Surveys, and QR codes as separate pages, with a sub-page to the tables and graphs of the respective data. Based on feedback about the unnecessary click depth, we realized that instead of thinking for each category, we needed to think for each form.
By restructuring around forms rather than the distinct categories, users access the resource using fewer steps. This shift also allows used to unify form types (qualitative, quantitative, and survey) under "Data Form". Instead of sending users across multiple pages for similar tasks, each form now serves as a hub where its respective data entry, tables, and graphs are immediately accessible.
2
Dashboard Info
The project dashboard contains relevant card statistics, recent team activity, and a data map. However, the data map takes up valuable real estate away from potential components for team project management. With a map page already dedicated, duplicating it on the dashboard added little value.
Based on user feedback, students expressed a stronger need for real-time project updates over repetitive visualizations. The revised dashboard prioritizes team-focused elements, replacing the data map with member contributions. It now becomes a true project hub where IQP team members immediately understand their progress and steps.
3
Interview Form
The mockup for the interview form collection demonstrates a lack of clear IA and visual hierarchy. The form fields for context, questions, and notes appear identical, offering no indication of their relative importance or what should be filled out. With no prioritization, it makes it difficult for students to quickly understand where to begin. Additionally, the placement and function of the recording button are unclear.
Compared to the earlier mockup, this updated design delivers a far more organized and functional layout. The screen is now divided into two distinct sections: the left side dedicated to structured form fields and the right side reserved for audio recording and AI transcription. This split not only helps users stay focused on data entry but also enables multitasking by allowing interviews to be recorded while documentation is completed. By aligning the processes of documentation and recording side by side rather than forcing them to compete for the same visual space, the design creates a smoother, more intuitive workflow that better supports how teams actually conduct interviews.
Final Design Thoughts
After a successful user testing session, we asked the last testing session to fill out an experience survey of the application. Below are the final screenshots of the application and stats of the Likert scale survey.
Students rated 8 or higher on these metrics on a scale of 1-10
88%
Overall Satisfaction
100%
Aesthetics
87%
Navigation
81%
Performance
Functionality
Logging into your team dashboard
Create your own account and login to your team's dashboard. If you do not have a team, you can create/join one. The first part of the process is meant to be through WPI SSO.
Create your own forms
Create data or interview forms with custom questions, along with attaching relevant links to your project. Using AssemblyAI, you can conduct your interviews, record, and transcribe your audio for further use.
Geotag your form data
With the power of OpenLayersMap and Nominatim API, you can locate your logged data entries, or search it up. You can also filter out data through a time frame slider.
Manage Your Team
View Project Details
Help Page for Ease of Access
Help Icon Dialog
Project management and ease of access
Manage your team and view their contributions, so you make sure everyone does their part. To help you out with this application, there is a help page and various help icon popup dialogs on specific pages needed.
Impact
Our overarching goal was to create a concept application backed by the use case needs of students and we have done exactly that. The WPI President Grace Wang & the Global Studies Dean have shown significant interest in our developments, and currently this project is hosted by WPI servers. Additionally, we were featured on the WPI Computer Science department in a newsletter for our efforts.
In April 2025, we presented our application in our MQP showcase to drive attention, and this will be continued as another MQP for the future.
Next project
