DESIGN A COMPLETE HIGH-FIDELITY MOBILE APP PROTOTYPE
Product name:
[Choose a modern, calming mental-health brand name]
Platform:
MOBILE APP ONLY
Primary frame:
390 × 844 px
Design for:
iOS and Android smartphones
DO NOT CREATE:
- Desktop website
- Desktop dashboard
- Web landing page
- Desktop therapist portal
- Tablet layouts
- Wide-screen layouts
Every primary screen must be designed as a smartphone screen.
==================================================
PRODUCT
==================================================
Create a multipurpose AI-powered mental health and wellbeing mobile application.
The app combines:
1. AI wellbeing chatbot
2. Adaptive daily emotional check-in
3. CBT-inspired tools
4. Breathing exercises
5. Mini-games
6. Guided Discovery
7. White noise and relaxing sounds
8. Journaling
9. AI-powered thought reflection
10. Weekly wellbeing insights
11. Mood, Energy, Stress, Anxiety and Motivation tracking
12. Habit tracking
13. Daily introspection exercises
14. Optional psychiatrist/therapist sessions
15. Local community Events Hub within a 50 km radius
16. Privacy and consent controls
17. Longitudinal AI personalization
The app should feel like a combination of:
- Intelligent AI companion
- Personal wellbeing journal
- CBT/wellbeing toolkit
- Habit and mood tracker
- Optional professional support platform
- Local mental-health/community discovery platform
It must NOT look like a generic chatbot.
==================================================
CORE PRODUCT IDEA
==================================================
The central experience is:
USER CHECKS IN
↓
AI UNDERSTANDS CURRENT CONTEXT
↓
AI ASKS PERSONALIZED QUESTIONS
↓
USER REFLECTS / JOURNALS
↓
AI IDENTIFIES POSSIBLE EMOTIONS AND PATTERNS
↓
USER USES WELLBEING TOOLS
↓
ACTIVITY IS TRACKED
↓
WEEKLY INSIGHTS ARE GENERATED
↓
USER CAN OPTIONALLY CONNECT WITH A THERAPIST
↓
USER CONTROLS WHAT DATA IS SHARED
↓
AI CAN PERSONALIZE FUTURE INTERACTIONS WITH CONSENT
Make this journey visually obvious throughout the app.
==================================================
MOBILE DESIGN SYSTEM
==================================================
Use a premium, calm, modern mobile UI.
Primary characteristics:
- Calm
- Minimal
- Warm
- Human
- Intelligent
- Trustworthy
- Non-clinical
- Accessible
- Spacious
- Emotionally reassuring
Use:
- Soft blue
- Muted teal
- Lavender
- Warm off-white
- Dark charcoal typography
- Subtle gradients
- Soft shadows
- Rounded cards
- Rounded buttons
- Large touch targets
- Bottom sheets
- Progress indicators
- Simple charts
- Friendly illustrations
- Minimal icons
Avoid:
- Excessively medical-looking UI
- Bright saturated colors
- Childish graphics
- Excessive glassmorphism
- Excessive gradients
- Crowded screens
- Complex dashboards
- Tiny text
Typography:
Use Inter, SF Pro, or another highly readable modern sans-serif.
==================================================
MOBILE NAVIGATION
==================================================
Use a fixed bottom navigation bar with exactly 5 primary destinations:
HOME
CHECK-IN
TOOLS
INSIGHTS
PROFILE
Navigation should be optimized for one-handed mobile use.
The AI chatbot should be accessible from Home and contextually throughout the app.
Secondary areas:
- Journal
- Events
- Therapy
- Privacy
- AI Memory
- Settings
These can be accessed through Home cards, Tools, Profile, or contextual buttons.
==================================================
SCREEN 1 — SPLASH
==================================================
Create a minimal branded splash screen.
Logo.
App name.
Tagline:
“Understand yourself. One day at a time.”
Use a calm background and subtle animation.
==================================================
SCREEN 2 — ONBOARDING
==================================================
Create a swipeable onboarding experience.
Page 1:
“Your wellbeing, understood.”
“An AI-powered companion to help you reflect, understand your patterns and take small steps forward.”
CTA:
Get Started
Page 2:
“What's on your mind?”
Selectable goals:
- Understand my emotions
- Manage stress
- Improve motivation
- Build healthier habits
- Reflect on my thoughts
- Feel more balanced
Allow multiple selections.
Page 3:
“Your privacy stays in your hands.”
Explain that the user controls:
- What AI remembers
- Whether journal entries are used
- Whether information is shared with therapists
CTA:
Continue
==================================================
SCREEN 3 — HOME
==================================================
This is the most important screen.
Header:
“Good morning, Alex”
“Take a moment for yourself today.”
Avatar and notification icon.
Large hero card:
“How are you feeling today?”
CTA:
Check in
Then:
“Your week at a glance”
Show compact cards:
Mood
Feeling brighter
Energy
Steady
Stress
More balanced
Anxiety
Improving
Motivation
Steady
Use small trend indicators.
Then:
“Today”
Daily exercise card:
“2 minutes to reset”
“Take a moment to notice what is happening within you.”
CTA:
Start
Habit widget:
“Today's habits”
✓ Breathing
✓ Journal
○ Walk
○ Hydration
Quote:
“Small steps still move you forward.”
Quick actions:
Talk to AI
Journal
Relax
Check-in
Tool usage:
“This week”
Breathing — 5
Journaling — 4
Guided Discovery — 3
Use vertically stacked cards suitable for mobile scrolling.
==================================================
SCREEN 4 — DAILY CHECK-IN
==================================================
Full-screen focused experience.
Header:
Daily Check-in
Progress indicator:
1 / 13
Question:
“How is your mood today?”
Create a large interactive mood selector.
Use friendly labels rather than clinical language.
Then questions:
1. Mood
2. Energy
3. Stress
4. Anxiety
5. Motivation
6. Sleep
7. Social connection
8. Overall wellbeing
Use:
- Sliders
- Emoji/icon scales
- Large touch targets
- Cards
One question per screen or a very clean vertically scrollable layout.
CTA:
Next
==================================================
SCREEN 5 — AI PERSONALIZED QUESTIONS
==================================================
After the 8 standard questions:
“Let's explore a little deeper.”
“Based on what you shared, I have a few questions that may help you reflect.”
Show 5 personalized AI questions.
Example:
“You mentioned that motivation has felt lower this week. What feels hardest to get started on?”
Options:
Work / studies
Personal tasks
Social activities
Taking care of myself
Something else
Next:
“You also mentioned feeling more stressed recently. When does that feeling usually show up?”
Next:
“What usually helps you feel a little more grounded?”
Next:
“Has anything changed recently that might be affecting how you feel?”
Next:
“If today could feel 10% better, what would that look like?”
Include:
“Why am I seeing this question?”
with an info icon.
==================================================
SCREEN 6 — CHECK-IN SUMMARY
==================================================
Title:
“Thanks for checking in.”
“Here's what you shared today.”
Cards:
Mood
Good
Energy
Moderate
Stress
Elevated
Anxiety
Moderate
Motivation
Lower than usual
Section:
“What might be worth noticing”
“You may be experiencing a mix of lower motivation and increased stress today.”
Section:
“A small step for today”
“Try a 3-minute breathing exercise before your next task.”
Buttons:
Try suggested activity
Talk to AI
==================================================
SCREEN 7 — AI CHAT
==================================================
Create a premium mobile AI conversation screen.
Header:
AI Companion
Status:
Personalization enabled
Chat:
User:
“I feel overwhelmed today.”
AI:
“That sounds like a lot to carry. Would you like to explore what's making today feel overwhelming?”
Suggested actions:
Help me understand what I'm feeling
Help me calm down
Help me think through a problem
Give me a small exercise
Input:
“Tell me what's on your mind…”
Voice icon
Send button
Include a privacy indicator:
“Recent check-ins may be used to personalize this conversation.”
==================================================
SCREEN 8 — AI CONSENT
==================================================
Bottom sheet:
“Use your journal to personalize this conversation?”
Explanation:
“You decide what information the AI can use. You can change this anytime.”
Buttons:
Allow
Not now
Make this visually trustworthy.
==================================================
SCREEN 9 — TOOLS HOME
==================================================
Title:
“Tools for your wellbeing”
Categories:
CBT
Breathing
Reflection
Relaxation
Focus
Games
Cards:
Breathing Exercise
3 min
Guided Discovery
5 min
Thought Reframing
7 min
Focus Mini-game
3 min
Relaxing Sounds
10–60 min
Show:
“12 activities completed this month”
==================================================
SCREEN 10 — BREATHING
==================================================
Create a highly immersive mobile breathing screen.
Minimal UI.
Large animated breathing circle.
Text:
INHALE
HOLD
EXHALE
Timer:
02:14
Progress ring.
Buttons:
Pause
End
After completion:
“Well done.”
“You gave yourself a few quiet minutes today.”
Show:
Activity completed ✓
==================================================
SCREEN 11 — GUIDED DISCOVERY
==================================================
Title:
“Guided Discovery”
Step-based mobile experience.
“What happened?”
Text input.
“What thought came up?”
Text input.
“How did that thought make you feel?”
Emotion selector.
“What evidence supports this thought?”
Text input.
“What might be another way to look at it?”
AI reflection:
“You may be putting a lot of pressure on yourself.”
“Could there be another way to interpret the situation?”
Final:
“One thought to carry forward”
“I can take this one step at a time.”
CTA:
Finish
==================================================
SCREEN 12 — RELAXING SOUNDS
==================================================
Title:
“Relax”
Sound categories:
Rain
Ocean
Forest
White Noise
Fireplace
Night
Large player.
Example:
Rain Sounds
24:18
Controls:
Play
Pause
Volume
Timer
Timer choices:
10 min
20 min
30 min
60 min
==================================================
SCREEN 13 — JOURNAL HOME
==================================================
Title:
“My Journal”
Subtitle:
“A private space for your thoughts.”
Large CTA:
+ Write something
Entries:
Today
“Feeling overwhelmed…”
Yesterday
“A good conversation…”
Aug 18
“Things I'm grateful for…”
Show offline status:
“Saved offline”
When connected:
“Synced just now”
==================================================
SCREEN 14 — WRITE JOURNAL
==================================================
Full-screen writing interface.
Header:
New Entry
Placeholder:
“What's on your mind?”
Optional prompts:
“What happened today?”
“What are you feeling?”
“What has been taking up your thoughts?”
“What are you grateful for?”
Bottom:
Save
After save:
“Would you like AI to use this entry to personalize future conversations?”
Toggle.
Explanation:
“You stay in control.”
==================================================
SCREEN 15 — UNDERSTAND MY THOUGHTS
==================================================
Title:
“Understand My Thoughts”
Show journal text.
AI-generated reflection:
Possible emotions:
Frustration
Pressure
Uncertainty
Things you may be noticing:
“You seem to be thinking a lot about unfinished responsibilities.”
Questions to explore:
“What feels most important to resolve first?”
Small steps:
Break one task into a smaller action
Take a short pause
Write down what is within your control
Buttons:
Reflect further
Talk to AI
Small disclaimer:
“This is a reflection tool, not a diagnosis.”
==================================================
SCREEN 16 — WEEKLY INSIGHTS
==================================================
Title:
“Your Week”
Date range.
Hero:
“You showed up for yourself this week.”
Mood graph.
Energy graph.
Stress graph.
Anxiety graph.
Motivation graph.
Use compact mobile-friendly charts.
Positive summaries:
“Your mood became more consistent.”
“You had several calmer days.”
“You maintained your wellbeing routine.”
Tool usage:
Breathing
Journaling
Guided Discovery
Relaxing Sounds
Mini-games
Daily exercise:
5 / 7 days
Quote:
“Consistency matters more than perfection.”
CTA:
View full report
==================================================
SCREEN 17 — HABITS
==================================================
Title:
“Your habits”
Weekly calendar.
Habits:
Morning walk
Breathing
Journal
Hydration
Sleep routine
Progress:
5 / 7 days
Message:
“You're building momentum.”
Buttons:
Add habit
Edit
==================================================
SCREEN 18 — DAILY EXERCISE
==================================================
Title:
“Today's Exercise”
Example:
“Notice without judging.”
Instructions:
“For the next 2 minutes, notice one thought that keeps returning. You don't need to change it — simply observe it.”
Timer.
After:
“How did that feel?”
Helpful
Neutral
Difficult
Try again
==================================================
SCREEN 19 — EVENTS HUB
==================================================
Title:
“Events Near You”
Location:
“Within 50 km”
Top toggle:
List | Map
Categories:
Mental Health
Community
Cultural
Religious
Anti-Narcotics
Wellness
Support Groups
Event cards:
Mental Wellness Community Meetup
2.4 km
Today • 5:30 PM
World Mental Health Awareness Walk
8.1 km
Saturday • 7:00 AM
Anti-Narcotics Awareness Program
12 km
Sunday • 10:00 AM
Cards include:
Category
Distance
Date
Time
Venue
CTA:
View Event
==================================================
SCREEN 20 — EVENT DETAILS
==================================================
Show:
Event title
Image
Category
Distance
Date
Time
Venue
Description
Buttons:
Register
Save Event
Share
Map preview.
==================================================
SCREEN 21 — THERAPY
==================================================
Title:
“Professional Support”
Copy:
“Connect with a psychiatrist or therapist when you want additional professional support.”
Important:
“Sessions are completely optional.”
Cards:
Find a professional
My sessions
Shared reports
CTA:
Find a professional
==================================================
SCREEN 22 — THERAPIST LIST
==================================================
Mobile therapist cards.
Each card:
Photo
Name
Qualification
Specialization
Experience
Languages
Rating
Price
Availability
Example:
Dr. Ananya Rao
Psychiatrist
Stress & wellbeing
12 years experience
Dr. Arjun Mehta
Clinical Psychologist
CBT & behavioral wellbeing
8 years experience
Filters:
Specialization
Language
Availability
==================================================
SCREEN 23 — THERAPIST PROFILE
==================================================
Profile photo.
Name.
Qualification.
About.
Specializations.
Experience.
Languages.
Approach.
Available slots.
CTA:
Book Session
==================================================
SCREEN 24 — BOOK SESSION
==================================================
Mobile calendar.
Available dates.
Available time slots.
Session duration:
30 min
45 min
60 min
Consent section:
Share weekly wellbeing report?
ON/OFF
Share journal insights?
ON/OFF
Share AI-generated insights?
ON/OFF
CTA:
Confirm Booking
==================================================
SCREEN 25 — SESSION CONFIRMATION
==================================================
“Session booked”
Therapist name.
Date.
Time.
Duration.
Buttons:
Add reminder
View session
Message:
“You can choose whether to continue with another session after this appointment.”
==================================================
SCREEN 26 — THERAPIST SHARED REPORT
==================================================
Mobile therapist-facing report screen.
Title:
“Shared Wellbeing Report”
Show only information explicitly approved by the user.
Mood trend
Energy
Stress
Anxiety
Motivation
Recent check-in summary.
Tools used.
User remarks:
“I've been finding it difficult to stay motivated.”
Therapist remarks:
Text field.
Permission:
“Use therapist remarks to personalize AI?”
YES / NO
==================================================
SCREEN 27 — PRIVACY & CONSENT
==================================================
Title:
“Your Data, Your Choice”
Settings:
AI Personalization
ON
Use journal for AI
OFF
Use check-in history
ON
Share weekly report with therapist
OFF
Share therapist remarks with AI
OFF
Use location for nearby events
ON
Each setting should have a simple explanation.
Actions:
View my data
Export my data
Delete journal history
Manage permissions
==================================================
SCREEN 28 — AI MEMORY
==================================================
Title:
“What AI remembers about you”
Cards:
Preferences
Goals
Helpful activities
Patterns you've chosen to remember
Examples:
“You prefer short exercises.”
“You often use breathing exercises in the evening.”
“You want to improve consistency with exercise.”
Each memory:
Edit
Delete
CTA:
Clear AI memory
==================================================
SCREEN 29 — SAFETY SUPPORT
==================================================
Create a calm safety-support screen for situations where the user indicates they may be in immediate danger.
Title:
“You don't have to handle this alone.”
Copy:
“It sounds like you may be going through something very difficult right now.”
Options:
Contact local emergency services
Contact a trusted person
Find immediate professional support
Continue talking to AI
Clearly state:
“AI support is not emergency or professional medical care.”
Do not make the AI appear capable of emergency intervention.
==================================================
SCREEN 30 — PROFILE
==================================================
Title:
“Profile”
Show:
Name
Goals
Preferences
Menu:
My Journal
My Insights
AI Personalization
AI Memory
Privacy & Consent
Notifications
Location
Language
Help & Support
About
Logout.
==================================================
MOBILE INTERACTION REQUIREMENTS
==================================================
Every screen should be connected through a realistic mobile prototype flow.
Create interactions for:
Onboarding
→ Home
Home
→ Check-in
Check-in
→ Standard questions
→ Personalized AI questions
→ Summary
→ Suggested activity
Home
→ AI Chat
→ Consent
→ Personalized conversation
Home
→ Journal
→ New Entry
→ AI consent
→ Understand My Thoughts
Home
→ Tools
→ Breathing
→ Completion
→ Dashboard
Tools
→ Guided Discovery
→ Completion
Home
→ Insights
Home
→ Events
→ Event details
Home/Profile
→ Therapy
→ Therapist
→ Booking
→ Consent
→ Confirmation
Profile
→ Privacy
→ AI Memory
==================================================
MOBILE UX REQUIREMENTS
==================================================
Use:
- Bottom navigation
- Sticky CTAs where appropriate
- Bottom sheets
- Swipe interactions where useful
- Horizontal cards
- Vertical scrolling
- Large touch targets
- Pull-to-refresh style where appropriate
- Mobile-friendly charts
- Full-screen focused exercises
- Native-feeling transitions
Use realistic mobile gestures:
- Tap
- Swipe
- Scroll
- Toggle
- Select
- Expand/collapse
- Bottom-sheet interaction
Do not overcrowd screens.
Prioritize one primary action per screen.
==================================================
EMPTY STATES
==================================================
Create mobile empty states for:
Journal:
“Your journal is waiting for your first thought.”
Insights:
“Complete a few check-ins to start seeing your patterns.”
Habits:
“Start with one small habit.”
Events:
“No events found within 50 km right now.”
Therapy:
“You haven't booked a session yet.”
==================================================
OFFLINE EXPERIENCE
==================================================
Journaling must support offline use.
Show:
Offline mode:
“Saved on your device”
When internet returns:
“Synced just now”
Include a small sync indicator.
The user should be able to create and save journal entries without internet.
==================================================
ACCESSIBILITY
==================================================
Design for accessibility.
Use:
- High text contrast
- Large readable typography
- Minimum comfortable touch targets
- Clear labels
- Do not rely only on color
- Accessible chart labels
- Clear selected/unselected states
==================================================
IMPORTANT CONTENT RULES
==================================================
Use supportive language.
Never diagnose.
Do not say:
“You have depression.”
“You have an anxiety disorder.”
“You are mentally unhealthy.”
Instead use:
“You may be experiencing increased stress.”
“You may be noticing changes in your mood.”
“Would you like to explore this further?”
Use positive but authentic wording.
Do not make unrealistic claims about AI.
==================================================
FINAL FIGMA STRUCTURE
==================================================
Organize the Figma file into:
01 — Design System
02 — Components
03 — Onboarding
04 — Home
05 — Check-in
06 — AI Chat
07 — Tools
08 — Journal
09 — Insights
10 — Events
11 — Therapy
12 — Privacy & AI Memory
13 — Safety
14 — Prototype Flow
Use clear section names.
Create reusable components using Auto Layout and variants.
Ensure visual consistency across every screen.
FINAL RESULT:
A polished, realistic, high-fidelity MOBILE mental-health application prototype.
The application should feel like a real product ready to demonstrate to investors, hackathon judges, university evaluators, UX reviewers, and mental-health professionals.
The most important user journey is:
CHECK IN
→ AI UNDERSTANDS CONTEXT
→ PERSONALIZED QUESTIONS
→ JOURNAL / REFLECTION
→ WELLBEING TOOL
→ WEEKLY INSIGHTS
→ OPTIONAL PROFESSIONAL SUPPORT
→ USER-CONTROLLED DATA SHARING
→ PERSONALIZED AI
Make this journey the heart of the mobile experience.