Digital Unicron
Yoopee is a mobile application designed to help children, elderly users, and individuals undergoing bladder training develop healthy and consistent urination habits. The app combines relaxing sounds, gentle vibrations, personalized reminders, progress tracking, and a rewarding achievement system to support users throughout their daily routines.
My Role
UIUX, Branding, Animations
Timeline
2 Weeks
Tools
Figma, Claude, Kling, Adobe AE
Market
🇫🇷 France
✅ Encourage users to follow regular bathroom routines with reminders
✅ Provide a calming experience using relaxing sounds and gentle vibrations.
✅ Motivate users through gamification, rewards, and achievement badges.
✅ Track users’ progress with statistics, calendars, and streaks.
✅ Deliver an simple and accessible interface suitable for children, elderly users, and caregivers.
✅ Duck mascot on the Splash Screen
✅ Yoopee brand logo
✅ Duck mascot animations
✅ Hexagon Launch button
✅ Reminder & Alarm system
✅ Progress tracking with Calendar & Statistics
✅ Confetti + star rewards for achievements
I conducted desk research with AI assistance to understand user needs and bladder-training behaviors.
Analyzed competitor applications, including Potty Time and Waterllama, to identify UX patterns, strengths, and design opportunities.
Visual Exploration
Collected visual references to explore the project's visual direction, illustration style, and interaction design.
👥 Who
Target Users
Children learning healthy toilet habits
Elderly users undergoing bladder training
Caregivers supporting daily routines and progress
🎯 What
User Goals
Establish healthy urination habits
Receive timely reminders and guidance
Track progress through rewards and statistics
Access calming sounds and vibration support
🕒 When
Usage Context
Multiple times throughout the day
During scheduled reminder sessions
As part of daily bladder training routines
📍 Where
Environment
Primarily at home
Bathrooms, bedrooms, and caregiving environments
Mobile-first experience on iOS and Android devices
💡 Why
Motivation & Needs
Build consistent bladder habits
Reduce anxiety through positive reinforcement
Improve accessibility with a simple interface
Support caregivers with reminders and progress tracking
Findings
Children respond better to playful and interactive experiences.
Simple navigation and visual rewards increase engagement.
Design Decision
Introduced a friendly duck mascot, water animations, and a reward system to encourage routine building.
Findings
Elderly users require a simple interface with clear navigation and timely reminders.
Accessibility is essential for independent use.
Design Decision
Used large buttons, readable typography, gentle colors, and a straightforward navigation structure.
Findings
Caregivers need an easy way to schedule reminders and monitor progress without adding extra workload.
Design Decision
Included reminder scheduling, calendar tracking, and progress statistics.
After completing the research phase, I created the initial Information Architecture (IA) to organize core features and define the app’s navigation. I then reviewed it with the PM (Chris), refining the user flow, feature priorities, and content structure through feedback to simplify navigation and better align with user and business goals.
01 Initial Client Sketch
The project began with an initial sketch provided by the client, outlining the core concept and feature ideas. This served as the starting point for discussions.
From Sketch to Interactive Prototype — with Claude
Through several rounds of discussion and feedback with the Product Manager and the client, we iterated on the layout and navigation before moving into the final UI design.
The client provided an initial logo sketch and branding mood board as the foundation for the logo
After several iterations, we finalized the logo with the client. I then established the app’s blue and yellow color system in Figma to align with the brand identity.
I then created the app’s color and typography system in Figma using the brand’s blue and yellow colors.
After several mascot iterations, we selected this final design. Its softer, warmer, and more approachable style better reflects Yoopee's friendly and welcoming brand personality. Here are the different mascot expressions and emotional states we developed to support various moments throughout the app,
We explored splash screen concepts aligned with Yoopee's hydration theme, starting with sketch layouts. Using the Kling AI model, we rapidly prototyped multiple animation ideas and refined them through several rounds of iteration based on client feedback to make the mascot feel calmer and more approachable, with subtle waddling, gentle splash effects, and delicate facial expressions.
✅ This is the final approved splash screen after several rounds of client feedback and iteration. The animation includes gentle palm swaying, subtle water movement, floating bubbles, and the duck blinking and opening its eyes.
Constraints
Limited AI credits, requiring careful planning for each generation.
Prompt refinement was needed to achieve consistent character style and animation.
Maintaining visual consistency across different AI-generated outputs.
Balancing quality and generation cost through selective iterations.
The onboarding flow allows users to create or access their account, recover their password, and personalize their profile with age-appropriate avatars. I broke account creation into smaller steps instead of presenting all fields at once.This reduces cognitive load and makes the onboarding process easier to complete, especially for users who may need a simpler, more guided experience. Personalization makes the experience feel more welcoming while allowing the interface to better reflect different user groups.
I separated the bottom navigation into three clear areas: Home, Alarms, and Progress(Calendar), keeping secondary features easy to access without competing with the main action.
The hexagon button acts as the primary action for starting and stopping a pee session. When users tap Start, the other Home elements are hidden to create a focused session experience. The selected or default sound begins playing alongside vibration, while the duck mascot animation responds to the active session. A timer provides clear feedback on the session duration.
When users tap Stop, the session ends and the interface returns to the initial Home state with the Launch button ready for the next session.
The reminder UI was the most iterative and discussed part of the design process.
1. We decided to keep the delete button visible instead of hiding it, making the experience easier and more accessible for elderly users and children.
2. We iteratively refined the reminder setup and simplified it into three clear options: Once (a specific date), Daily (every day), and Custom Days (selected days each week).
This created a more flexible reminder flow, allowing users to create, manage, edit, enable, or disable reminders based on their individual routines.
The calendar tracks users’ pee sessions and visualizes their progress through different levels. Each completed session earns a star, while users can also manually record their pee frequency for more accurate tracking.
I designed the progress view to make daily activity and long-term improvement easy to understand at a glance. The side menu keeps profile and account management separate from the core tracking experience, while still making these settings easy to access.
Problem
The animation JSON files were causing issues in Flutter, including invalid MIME type and Base64 errors. After investigating the issue with the developers, we found that some image assets were embedded as Base64 data rather than being fully vector-based.
Solution
After testing several approaches, we separated the embedded image assets from the animation JSON and optimized the files for Flutter. This resolved the errors and allowed the animations to work correctly in the final product.
1. Design for Different Users
I learned that a simple interaction can feel very different for children, elderly users, and caregivers. This pushed me to prioritize clear navigation, readable information, and simple actions throughout the experience.
2. Iteration Is Part of the Process
The reminder, vibration, and home experiences went through several iterations based on feedback. I learned that the first solution is rarely the final one, and each iteration helped make the experience more intuitive and refined.
3. Collaboration Improves the Final Product
Working closely with developers throughout and after the design phase taught me to consider technical constraints earlier and solve implementation problems together rather than treating design and development as separate stages.
4. Exploring AI as a Design Tool
I learned how to use AI to quickly explore visual directions, animation concepts, and design variations while being mindful of credit usage. Managing prompts carefully and refining them through iterations helped me use AI more efficiently, avoid unnecessary generations, and get better results within limited credits.
