The mascot is the interface.
Uppy had to feel emotionally safe for teenagers: not medical, not judgmental, not a boring tracker. The mascot carries instruction, encouragement, reward, and accountability.
The first screen gives the mascot a voice before asking for data. It makes setup feel like a pact, not paperwork.
Microcopy is playful and specific, so sensitive inputs like age and height feel less awkward.
The pledge moment turns commitment into a tactile ritual with press-and-hold, haptics, and a clear promise.
Design thinking, tuned for a teen habit loop.
I used a design thinking process, then carried the decisions all the way into a working React Native app.
Empathize
Make the experience reassuring for teens who care about growth but do not want to feel judged.
Define
Frame Uppy as a daily growth coach: simple routines, measurable progress, and emotional support.
Ideate
Use the mascot as a voice layer for onboarding, reminders, pledge moments, and in-session cues.
Prototype
Design the real flows: height ruler, commitment picker, plan reveal, home, quests, and workout timer.
Build
Implement the app myself in React Native, preserving the playful motion, sound, and haptic intent.
Onboarding that feels like a quest.
The first-run experience asks for sensitive data, but every step is softened with mascot guidance, chunky controls, and a strong green action rhythm.
Teen-first tone
The copy avoids clinical pressure. It sounds like a supportive buddy: specific, direct, slightly playful, and never shaming.
Trust through ritual
The pledge, plan reveal, daily quests, and buddy level make habit formation feel like progress instead of homework.
Guided precision
Controls like the height ruler ask for accurate inputs while keeping the interaction fun and easy to correct.
Sound and haptics became product features.
The sensory layer makes the app feel alive: soft taps for selection, stronger confirmation feedback, voice-like mascot prompts, and reward moments that land.
Mascot voice
Instructional copy is written as Uppy speaking, so guidance feels personal across onboarding, quests, and workouts.
Haptic pacing
Selections, press-and-hold pledge, timer states, and completion moments get distinct tactile feedback.
Reward rhythm
Progress bars, XP, streaks, levels, and buddy growth reinforce daily return behavior without visual clutter.
From plan to daily product.
The shipped app moves from onboarding into a daily dashboard: protocol, height tracking, quests, buddy care, progress history, and session timers.
Built by the designer who drew it.
I built Uppy myself with React Native, which kept the product language intact: rounded controls, mascot prompts, session states, and the sensory feedback that makes the app feel responsive.
What made the UI work.
The system is deliberately simple: cream canvas, dark green type, thick soft borders, high-confidence green CTAs, playful icon tiles, and one mascot voice across the app.
Ready to grow with Uppy?
A mascot-led height growth coach for teenagers, designed end-to-end and built in React Native by SJ Patra.