Capstone

Mobile Health and Wellness Program
Researchers Portal.

Course
CS-24-304 Capstone

Client
VCU School of Nursing

Team
Edson Decker, Alex Davidkov, Haley Vivian, William Meredith

Role
Front-End Developer / UI/UX Designer

Advisor
John Leonard

Sponsor
Lana Sargent

Problem Statement

The Mobile Health and Wellness Program (MHWP) at VCU collects large-scale health data from underserved communities in Richmond using RedCap. However, researchers struggle to efficiently filter and organize this data to find participants that meet specific criteria, causing delays in health studies and limiting research effectiveness.

Project Description

The project aims to support MHWP researchers and clinicians by developing a prototype API and webpage application that streamlines participant identification based on demographics, test results, and health trends. Current tools lack the customization and ease-of-use needed for this kind of community-based health research.

This project addresses a critical gap in health informatics, improving data access and participant recruitment while promoting better outcomes for vulnerable populations. It also offers a scalable model for other public health research programs.

Landing Page

This is the landing page for the Mobile Health and Wellness Program researchers portal. It features a secure Researcher Login form to ensure data access is restricted to authorized users only. Alongside the login form, dynamic charts provide an at-a-glance overview of the dataset’s key metrics

Main Page

This interface allows researchers to apply multiple custom filters across demographic, clinical, and biomaterial data points. Users can search for participants based on:

Age, Gender, Race, Location
Insurance, Program, Education, Language
Blood Pressure (Systolic/Diastolic), Glucose Levels

By enabling, multi-criteria queries, the system streamlines participant identification, improving both research speed and data precision. Real-time query results are displayed below the search panel, giving immediate feedback on the number of matching participants.

Detailed Query Results & Participant Visualization

These screens display the final output of a participant search, showing both detailed data and a visual summary. Researchers can review all matching participants, including:

Full Name and Contact Info
Demographic Data: Age, Race
Insurance Type and Notes

Below the table, a dynamic pie chart shows the ratio of selected participants to the total database. Providing a clear visual cue of how narrow or broad the filter criteria are. The tooltip on hover adds context by showing the exact count and percentage of selected participants.

Additionally, a “Download Results (CSV)” button.

CSV

Researchers can download participant query results in CSV format for offline use.

Programming Languages Used

HTML

Used to build the structure of the site—forms, tables, buttons, dropdowns, and chart containers.

CSS

Handled layout, colors, fonts, and responsiveness to match VCU Health’s branding.

JavaScript

Powered the charts, search/filter logic, dynamic table updates, and CSV export functionality.

Figma Prototype