Designing a vision & hearing screening that children think is a game

A child can't tell you what they've never seen

Children don't report vision or hearing problems, not because they hide them, but because they have no baseline. The problem is silent by nature, and the cost of silence is permanent: conditions like amblyopia (lazy eye) are highly treatable in early childhood, but the treatment window largely closes around age seven.

Children in India live with visual impairment

19M

School-age children live with hearing loss

26M

Age the treatment window largely closes

~7 yrs

India has no universal childhood screening program (unlike the USA, UK, Singapore or Australia). A screening today means a specialist visit: a cost, a journey, often a city. So for millions of families, the first "test" a child gets is failing to read the blackboard, years too late. The design question: could a screening reach a child before the system does, at home, free, on whatever phone the family already owns, run by a parent with no training?

The children this is for

Research: clinical methods, two users, three insights

I studied how professionals actually screen young children: the cover test for amblyopia, Hirschberg-style fixation checks for strabismus, Ishihara plates for colour vision, convergence testing for focus, and the principles of paediatric audiometry. Each has a behavioural core (a stimulus and an observable response), which meant each could be reframed as a game mechanic without inventing new science. Maa has two users with opposite needs: the child (2 to 8) is the player, pre-literate and motivated only by fun; the parent is the operator, anxious and terrified of the word "diagnosis."

• Behaviour, not questions

  A four-year-old can't self-report blur. But they can tap a lion, follow a star, and point at what they hear. Play isn't a coating on the test. Play is the test.

• Parents fear verdicts, not information

  The real barrier was emotional: "what if it says something is wrong with my child?" The product had to promise a screening, never a diagnosis. This became a hard language rule on every screen.

• Hardware inequality corrupts camera-based results

  Existing "eye-test apps" lean on front cameras, but camera quality varies wildly across devices. A screening whose accuracy depends on the price of the phone would systematically fail the families Maa exists for.

Killing the camera: the constraint that became the product

The first concept used the front camera to track eye movement. Testing across devices made the flaw obvious: the same child, the same test, different phones, different results. That's not a screening; that's a lottery weighted by income.

"A test must work the same on a ₹6,000 phone and a ₹60,000 phone. If it doesn't, it isn't screening children; it's screening their parents' wallets."

The pivot: the camera is used only for presence detection (confirming a child is in front of the screen), never for measurement. Every clinical signal comes from interactions that behave identically on any device: tap accuracy, tap position, response time, drag-to-follow paths, and responses to channel-isolated audio. This decision cascaded through the whole system. It set the equity principle, simplified the privacy story (no video is stored or analysed), and became the story the community responded to most.

Design principles that followed

• Play is the interface: if a child feels tested, the data dies.
• Screen, never diagnose: the word "diagnose" appears nowhere in the product.
• Equal on every device: no measurement a cheap phone can't make.
• Parent in the loop: the adult verifies each step.
• Trust through honesty: say what Maa is, and loudly say what it isn't.

Five games, one adventure map

The screening is framed as an adventure: five levels, five animal guides, five brand colours. The flow: choose language → tell us about your child → pre-flight checks → adventure map → five levels → results → doctor's report. A parent sets up in under a minute; the child only ever sees the game.

Your adventure map

Before any level begins, a pre-flight checklist confirms the environment: parent seated beside the child, device 35 to 50 cm from the face, and a quiet room. The parent must actively toggle all three, a deliberate friction that puts an adult in the loop before data collection starts.

Let's get ready!

The hardest level to make honest was hearing: phones can't produce calibrated decibels, so absolute thresholds would be fake precision. The design sidesteps this using the Web Audio StereoPannerNode: sounds play to one ear at a time through headphones, fading softer each round, and Maa scores asymmetry between ears rather than absolute loudness, a comparison that's valid on any headphones.

Designing for trust: the layer nobody sees

A children's health product lives or dies on trust, and most of that design work is invisible. Maa's trust layer answers one question at every step: how do we avoid telling a family something false? A false red frightens a family; a false green silences a real problem. Both are design failures, so validity was treated as a UX surface of its own.

• Calibration rounds

  Every level opens with a task any child passes: a huge, slow, obvious target. Failing it means a do-over, never a false verdict.

• Random-tap detection

  Statistically random tap patterns downgrade the result to a low-confidence "worth re-checking". Maa refuses to over-read noise from a distracted child.

• Parent-as-verifier

  Steps a sensor can't confirm (is the eye actually covered?) are confirmed by the parent through deliberate hold-to-confirm interactions.

• Age-calibrated thresholds

  A 3-year-old's motor control isn't a 7-year-old's. Thresholds relax ~15% for ages 2 to 3 and tighten ~10% for ages 6 to 8.

Results that inform without diagnosing

Results arrive in three tiers with strict language rules. Every tier links to what was observed, never to what the child "has." The word diagnose does not exist in the product.

• Green

  "We didn't notice anything; screen again in six months. This is not a diagnosis."

• Yellow

  "Worth mentioning at your next check-up."

• Red

  "We recommend seeing a specialist."

The doctor's report: where a screening becomes an action

A screening that ends at a coloured card changes nothing. Maa's endpoint is a doctor-ready report designed for two readers at once. For the parent: plain-language findings per level, and a "What to Ask Your Doctor" list that scripts the conversation, including exact sentences like "My child responded much better in one ear than the other in a home hearing screen." For the doctor: a Measurement Data section with raw numbers against normal ranges, so a professional can judge signal quality themselves. The header states it plainly: "This is a screening document, not a medical diagnosis."

Testing with real children: where theory met a 4-year-old

The product was tested end-to-end with real children aged 3 to 7 in a real home, on a real tablet, with a parent operating, exactly as designed. The pirate framing worked immediately: role-play beat instruction, and children kept the eye covered without being told twice. Animal-tap answering needed zero explanation across ages, and children asked to play again, the strongest possible signal for a screening that depends on periodic re-testing.

Real runs also caught what a happy-path demo never would: a data-recording defect in the hearing level, where one ear's rounds could record as "0 of 0" while the summary still interpreted asymmetry. It reshaped my view: for a health product, data integrity is a UX property. A beautiful report with a hollow number is worse than no report.

Built entirely in Figma: one connected pipeline

Maa was an experiment in how much product one designer can ship alone with an AI-native workflow. Figma Agents turned the concept into first screens and a coherent design system. Figma AI generated the illustration world: the bear mascot, forest environments and level art in one consistent style. Figma Make assembled the working product (game logic, scoring, the Web Audio hearing engine and the report generator) and hosts the live build. Claude supported clinical research synthesis, threshold logic and report language.

The design system carried the emotional architecture: a five-colour level palette mapped to five animal guides, a warm cream base so no screen ever reads clinical, rounded type and oversized touch targets tuned for small fingers.

Design system

Inside the Figma workspace

What shipped, what it earned, and what's next

Maa is live on the web: five working screening levels, four languages, the trust layer, and a generated doctor's report, completed by real children in real sessions. For a three-week solo build, shipping complete was the outcome I protected above all others. It was submitted to Config Makeathon 2026 and hand-picked as a Contra Featured project.

Impressions on the Contra Featured post

3.2K

Likes on the launch post

60

Replies from the design community

13

Competitions entered: Config '26, Design Pitch '26

2

Featured on Contra, and the community weighed in

"This will be so helpful to so many."

Dylan Siegel

"A thoughtful and impactful project that makes an important thing simple, and child-friendly."

Abhiram RG

"Amazing work. I love how you've taken a complex healthcare need into a simple, engaging experience for children and parents. Awareness and early intervention is especially powerful."

Janaina Oliveira

The honest part: Maa did not place at Config Makeathon 2026. Studying the winners taught me something worth more than the prize: Config rewarded tools for designers, visually arresting and instantly shareable within the design community, while Maa is a product for parents, strongest on impact criteria. Same product, wrong room. It's now being refined for UX India's Design Pitch 2026, where problem/solution and human-centred design carry 45% of the score.

What I learned

1. A named constraint is a design superpower. "No camera measurement" did more work than any feature: it set the equity principle, simplified privacy, focused the mechanics, and became the one line everyone remembered.
2. For health products, data integrity is UX. A "0 of 0" recording bug in the hearing level only surfaced under real, messy usage. Test with real users before you trust your own demo.
3. Trust is designed in language, not disclaimers. The green/yellow/red rules and the banished word "diagnose" did more for parent trust than any visual choice. Copy was the highest-leverage design surface in the product.
4. Know which room your product is standing in. Losing Config against designer-audience tools clarified positioning: the same product reads differently to different judges.
5. Shipping alone is a trainable muscle. Three weeks, one designer, a complete product with a trust layer and a report engine. The AI-native workflow didn't replace design judgement. It removed everything standing between judgement and a shipped thing.

"Maa is a screening, not a diagnosis. But often, a beginning. If even one child gets through the right door in time, every design decision in this document did its job."

Lukhman P, Product Designer, Kochi, Kerala

Play the live product →