← All work
DESIGNDEVELOPMENT

Study tracker PWA

A progressive web app for participants to track study progress, designed and built 0 → 1.

ROLE
Designer & developer
TEAM
Backend engineers, research staff
TIMELINE
May 2026 – present
STACK
React, Python (Django), PostgreSQL
Study tracker PWA cover
0 → 1designed and shipped
2user groups researched: participants and study staff
01

Context

ISR runs longitudinal studies where participants complete surveys over days or weeks, sometimes while wearing a device like a Fitbit or Samsung Galaxy Watch. Surveys arrived as separate links, so participants had no single place to see what was due, how far along they were, or what they had earned.

02

Discovery

I interviewed both participants and researchers to understand needs and pain points in tracking study progress. Participants needed to know what to do next and when they would get paid. Researchers needed fewer drop-offs and fewer support requests.

03

Getting in without an app store

Participants join from an SMS invite and land in the browser. A PWA meant no download: they sign up once and can add the app to their home screen for quick access.

SMS invite
SMS invite
Sign in
Sign in
Sign up
Sign up
04

One place for every study

Home lists every study a participant is enrolled in, with progress and the next task due. Inside a study, tabs separate progress, surveys, payment, and device.

My studies
My studies
Study progress
Study progress
Surveys
Surveys
05

Surveys stay in context

Surveys still run in Qualtrics, the tool researchers already use. The app opens each one in an overlay, so participants return to their progress when they finish.

Qualtrics survey overlay
Qualtrics survey overlay
06

Clear payment rules

Earnings update as surveys are completed. Redeem stays disabled until the participant meets the study requirement, with a message saying what is left, then walks them through choosing a payout method.

Not yet eligible
Not yet eligible
Eligible to redeem
Eligible to redeem
Choose payout
Choose payout
Confirmation
Confirmation
After redeeming
After redeeming
07

Keeping devices connected

Studies can use different wearables, such as Fitbit or Samsung Galaxy Watch. A setup checklist gets the participant's device connected early. Once it is synced, the Device tab shows wear streaks, earnings for wearing it, and a personal pattern from their own data, giving them a reason to keep wearing it.

Connect device (Fitbit example)
Connect device (Fitbit example)
Connected device
Connected device
08

Design & build

I designed the interface and worked across frontend and backend development with the engineering team, using AI tools across research, design, and development.

Screen-to-API map used to coordinate frontend and backend work
Screen-to-API map used to coordinate frontend and backend work