Overview
DIK DEA ("Deteksi Dini Diabetes", Early Detection Instrument for Diabetes Mellitus in Adolescents) started as a paper questionnaire. As a freelance project, I turned it into a web app teenagers can take on their own phone, get scored on the spot and come back to later.
The challenge
Diabetes in adolescents often goes unnoticed because the early signs are easy to miss. A screening instrument only helps if two things happen: people finish it, and they understand the result.
Paper fails on both. It does not reach teenagers, gives no feedback and keeps no history. The instrument itself was sound. The delivery was the problem.
Approach
My main design decision was one question per screen. A long form on a phone looks like homework, and teenagers close it. One question, a big Yes or No, and a progress counter like "Question 19/19" turn the same instrument into something that feels short.
It also solved a practical problem. Some questions depend on a reference photo, such as what darkened skin folds on the neck look like. On a single screen the photo gets the full width and is actually readable on mobile, instead of shrinking next to a wall of text.
The second decision was accounts. A one-off score is a number. Saved results become a record, which matches the instrument's own advice to re-screen after a year.
What I built
- Landing page with a single call to action, "Check Now", and an About page explaining the instrument.
- Sign up and sign in, so every user's results are stored.
- Step-by-step questionnaire with a progress indicator, Back and Finish navigation, Yes/No answers and reference images where a question needs one.
- Result page with the test score, the average across attempts and a plain-language risk conclusion such as "Low Risk". It follows with next steps: balanced nutrition, activity and rest, stress management and re-screening in a year.
- Test history listing every attempt with its score and timestamp, with the option to delete one.
- Indonesian and English, switchable from the header.
Why Next.js
The app is a multi-step form, an auth layer and a handful of result pages. Next.js handles all three in one codebase, with built-in support for the two languages. For a freelance build with a clear scope, fewer moving parts meant more time on the questionnaire flow itself.
Outcome
The instrument moved from paper to a phone. A teenager can now finish the screening in one sitting, read what the score means without a professional in the room, and track it over time. The scoring and advice stay faithful to the original instrument; what changed is that it is now something people will complete.