Product design & front-end
Little Roots
A pediatric environmental-health app that turns local air, UV, and pollen data into personalized, plain-language guidance for the caregivers of young children.
Children breathe more air per pound of body weight than adults, absorb more of what's around them, and can't advocate for themselves. Yet the environmental data that affects them most lives in technical dashboards built for experts.
Little Roots closes that gap. It takes the same air-quality, UV, and pollen signals a scientist would read and translates them into calm, specific guidance tuned to one particular child's age and health profile. I researched, designed, and built the working prototype end to end.
The problem
Environmental exposure is one of the most under-communicated risks in early childhood. The critical window for lung and neurological development runs from roughly ages three to ten, and reducing exposure during that period carries lifelong benefits. But caregivers face three barriers at once:
- The data is fragmented and technical. AQI, UV index, and pollen counts live in separate apps written for a general adult audience, not for a parent making a decision about a four-year-old.
- Standard readings under-report child-specific risk. A "moderate" AQI can still mean meaningful exposure for a child near a highway, a nuance no consumer weather app surfaces.
- Health literacy is uneven. Guidance that assumes fluency in environmental science excludes exactly the families who are often most exposed. This is a health-equity problem, not just a UX one.
How do you take data built for experts and make it safe, calm, and actionable for a tired parent at 7am?
The design question at the center of the projectPrinciples I designed against
Because this is health information for a vulnerable group, I set constraints before I set pixels. Every screen had to answer to four rules.
1 Trust before data
The app opens with a plain-language consent screen stating that it's a prototype, not medical advice, and to always consult a pediatrician. Nothing loads until the caregiver agrees. All personal data stays on the device, which promotes a privacy-first default.
2 Personalized to one child
A short onboarding captures the child's name, age, and any health considerations. Toggling Asthma / Respiratory tightens the air-quality alert threshold to AQI > 30; Skin Sensitivity lowers the UV alert to index > 3; Seasonal Allergies switches on pollen nudges. The same conditions produce different guidance for different children.
3 Live, but never broken
The app pulls real AQI and UV for the user's location, then derives a plain-language status. When location or data isn't available, it falls back gracefully to clearly-labelled demo conditions.
4 Calm, accessible, plain
A soft, natural palette and generous type keep an anxiety-adjacent topic feeling grounded. Guidance is written at a low reading level with concrete actions, and the whole interface is built for legibility and screen-reader structure.
The product
Three connected surfaces do the work: a dashboard that answers "Is today okay?", a checklist that answers "so what do I do?", and a knowledge center that answers "Why does this matter?".
Good morning. Today for Leo, 4
Today's Checklist
Knowledge Center
Dashboard, daily checklist, and knowledge center.
A health score, not a data dump
The dashboard leads with a single number and a three-state verdict: All Clear, Use Caution, or Action Required , colour-coded from sage to amber to coral. The underlying AQI, UV, and pollen figures sit below for anyone who wants them, but the decision is made at a glance. A contextual nudge translates today's conditions into one concrete action.
Guidance that fits the day
The checklist converts abstract risk into small, doable tasks tied to the child's profile and the live weather, such as closing car windows near traffic, timing sunscreen, and rinsing off pollen. Checking items off builds the daily habit the whole product depends on.
Evidence, in plain language
A searchable knowledge center covers ten topics: highway air, nursery VOCs, mold, wildfire smoke, lawn chemicals, water filtration and more! Each article is written in short, practical language with clear "what to do" steps rather than clinical jargon.
Building with AI: Research into code
To move quickly from behavioral research to a working prototype, I engineered an AI-assisted build pipeline. My focus was on defining clinical logic, interface constraints, and precise prompt structures.
- Translating research into prompts: Using pediatric exposure studies, I mapped clinical thresholds to conditional logic (e.g., triggering respiratory alerts at AQI > 30). I used Claude to generate the initial React PWA structure, state models, and custom health-scoring algorithms based on these parameters.
- Code refinement with Codex: I used Codex to iteratively refine the components, smooth out edge cases in live API responses, and ensure clean accessibility hooks and tab indexing.
- Live deployment: The application was versioned and hosted on Netlify, creating a fast, shareable prototype to begin testing directly with caregivers.
Try the working prototype
Little Roots is a functional React PWA, with consent, onboarding, live data with fallback, and all three surfaces. Built with Claude and Codex, hosted on Netlify.
Reflection & What's Next
Little Roots let me carry a project the full distance. I took a public-health question, thought through research and interface design, and put that into a build I could actually put in someone's hands. The hardest and most rewarding work was restraint: deciding what not to show so that a caregiver gets a decision, not a dashboard.
The prototype is built to be validated. My next step is moderated usability testing with caregivers across a range of health-literacy levels, focused on two questions: does the health score read as trustworthy, and does the checklist actually change day-to-day behaviour? Those findings would drive the threshold tuning and content edits for a v2.