Overview
Research
Design
Ideation
Result
Testing & Iteration
Desktop App
Mental Wellness
Healthcare
AI
Case Study
2023
Sketch
AE
Protopie
Tools
UI/UX Designer
Role
Year
Overview
Goal
My Role
Design an MVP mindfulness platform enabling people with mild-to-moderate distress to achieve daily emotion awareness, self-regulated psychological adaptation, and sustainable mental fitness habits.
1. Destroy stigma barriers, create stigma-free mood tracking with clinical validity
2. Make therapy easier to get for people to reduce the treatment accessibility gap
3. Transform crisis into strength to built habit-forming exercises for daily use
As the sole designer and project owner, I led the entire end-to-end process of this project, including problem framing, user research, product strategy, UX flows, UI design, prototyping, and usability testing.
I applied evidence-based design approaches to validate assumptions and iterated the solution based on both user feedback and clinical insights.
This project reflects my ability to independently drive a complex mental health product from idea to functional prototype.
Problem
Highlights
Background
How might we empower individuals experiencing emotional distress to proactively manage mental health without stigma, cost barriers, or dependency on crisis-only tools while transforming self-care into an engaging daily practice?
Tranqo is a Mindfulness app and mental health companion. Conduct personal development, journal, daily mental check, spirit building, thought exercise and obstacle breakdown.
Why Mental Health Needs Proactive Care？
The silent struggle of modern mental wellness
WHO data reveals 1 billion people worldwide are affected by mental health disorders, yet >50% of sufferers lack access to effective support.
Post-pandemic, anxiety and depression rates surged by 25%, while traditional therapy faces three major barriers: high cost, geographic limitations, and stigma.
Insights
Interviews
Initial Findings and Potential Opportunities
Opportunities
Understanding Users
Selected four representative user archetypes: two early-career professionals in their 20s, one senior developer in his 30s, and one retiree with a corporate background. Analyzed their challenges, needs, and pain points to drive more effective solutions.
An AI-powered mindfulness counselor offering both adaptive mindfulness practice and real-time crisis support guided by your biometrics signals.
Generates adaptive mindfulness task flows integrated with the user's physical environment & contest.
A growth archive that visualize users evolution by tracking emotional resilience, cognitive patterns, and biometrics.
Automatic emotion tracking via phone usage analytics + wearables.
A therapeutic community with engagement tasks & challenges.
Adaptive onboarding system that tailors mindfulness methods through user input and behavioral analysis.
Multi-dimensional mood tracking (intensity × triggers × somatic symptoms).
Dynamic mindfulness visualization with multimodal interaction.
Scenario-based guided journaling.
Playful habit-building daily challenges.
An adaptive achievement dashboard (visual styles evolve with usage intensity).
Provide phase-based badge as reward.
People need clinical-grade crisis support without human interaction stigma.
Users want data insights but find manual entry too labor-intensive.
2 AM anxiety creates critical intervention gaps when traditional support is inaccessible.
People drown in online noise and can't quickly find mindfulness help that actually fits them.
Generic psychological advice feels irrelevant without personal context.
Users demand personalization Qualitative self-reflection outweighs quantitative metrics for emotional awareness.
Users need guided practices yet resist rigid systems.
Creative expression (music/art) unlocks deeper emotional access than talk therapy.
People want connection but fear exposing mental vulnerabilities.
Qualitative Interviews
Synthesized Insight Clusters
“I feel uncomfortable seeking therapy — I’d rather handle things myself.”
I feel something's wrong, but I'm afraid to be labeled.
As an introvert person, I tend to confide in few close friends.
Psychologist is limited to juding some emotional levels.
Prefer to practice time management techniques, prioritize tasks and spending time in nature rather than seek support from colleagues since bad emotion will contaminate.
“Most online mental health advice feels too generic.”
When anxiety hits at 2 AM, I have nowhere to turn.
They often ask a lot of questions and only provide some constructive suggestions that are not very helpful.
Googling ‘stress help’ shows 100 contradicting tips makes me feel overwhelming.
I’d only watch a stress-management video if it popped up while I’m tracking a panic attack—I won’t search for it myself.
“I prefer guided meditation — it helps me stay focused.”
I actively reflect on feelings and practice mindfulness.
Some guided counselors or videos and activities can be more inspiring.
I like to listen to some relaxing music, so I also hope to explore new channels that can bring different experiences.
Without voice guidance, my mind wanders to work; phone vibrations on exhale instantly refocus me.
“I want mental health tips tailored to how I actually feel.”
Would appreciate if you could address the integration of personalized experiences and user customization within the mindfulness app.
It’s exhausting seeing ‘mindfulness’ pushed at me when what I actually need is anger management tools. (mismatched solutions deepening user alienation)
When every recommendation starts with ‘try meditation’, I stop trusting the product.
“I’d attend group workshops if I felt emotionally safe.”
Attend mental health workshops and webinars since they facilitated connections with like-minded individuals, fostering a sense of community and support.
Enrolled in workshops - it relaxes my mind and inspires design work.
“I track my mood but don’t know how to make sense of the data.”
Regular reflections and self-check-ins help me stay attuned to any changes or signs of mental distress.
I manually log stress levels because my Fitbit can't capture emotional context. (Need for qualitative-quantitative data integration).
Ones could view the difference between current mental state and past self, because one’s experiences constantly reshape them.
Persona
Kenji Olivia
Olivia is a fintech engineer battling chronic anxiety from tech crises. Her breaking point came when a 3 AM server outage triggered paralyzing panic attacks，which leaving her scrolling through ineffective meditation apps that ignored her tech-specific stress while alarms flashed. Recently, she's proactively adopted emotional calibration tools to reclaim command over her spiraling work-life rhythms.
Bio
Frustrations
Hard to find effective methods solving instant mental problem, lack of sense of identity.
Thinks some platforms provide only generic advice, resulting in low user engagement, high cognitive load, and limited effectiveness in addressing emotional challenges.
Manual mood tracking feels like unnecessary context-switching during coding sprints, reducing productivity.
Most mental health apps or online institutions are lack of personalisation and tailored recommendations based on individual needs.
No clear metrics to prove her emotional resilience is improving despite therapy efforts.
Behavioral Considerations
She evaluates wellness tools like code libraries—demanding clinical validation and seamless tech integration—rejecting "fluffy" apps that ignore workplace realities.
During critical deployments, she tends to engage in concise mindfulness practices and short-cycle interventions to maintain psychological equilibrium.
As someone who mentors junior engineers, she uses encrypted note apps for private journaling.
Prefers step-by-step meditation guidance over abstract notions, with a distinct inclination toward actionable frameworks.
She pays close attention to data and regularly tracks how she feels physically and emotionally during different work periods.
She likes decompressing through online chats with strangers, as it allows her to lower psychological barriers more effectively.
Core Needs
Requires accessible on-demand pathways for emotional stress resilience.
Require programmatic meditation sequences with expert narration.
To get personalised mindfulness scripts adapting to both physical context and emotional state.
Manual logging proves cumbersome—need intuitive status metrics tracking.
Wellness tools should integrate like VS Code plugins - invisible but essential.
Mindfulness engagement requires demonstrable well-being improvements and validated progression metrics.
Achieve stigma-free emotional decompression.
Persona generated from the interview and background analysis.
Age: 29
Fintech Innovator
Work: Senior frontend engineer
Location: Tokyo, Japan
I debug complex systems daily, but my 3 AM anxiety crashes have no error logs.
”
„
User Journey
I have crafted a user journey that maps Olivia's struggle with work-related stress. Visualize users' awareness and coping responses to their emotional states to help identify pain points and areas for improvement.
Personalized guidance relevant to her work and life
Understand her stress patterns without tedious works
Need immediate, clinical-grade crisis & emotional support
Expectations
Olivia needs to find ways to handle her frequent work stress before it spins out of control, while also building up her ability to handle pressure over time.
Scenario
Quick-access mood logging and home screen widgets for instant tracking.
Add quick access to recent and favorite practices.
Multimodal mood logging with AI analysis and auto-generated journal entries.
Sync with wearables to collect physiological data.
Opportunities
Conduct an interactive onboarding assessment to enable personalized coping strategies.
Enable more granular mood logging to power highly tailored recommendations.
Dynamically tailors mindfulness recommendations and tasks via user data & patterns.
A dynamic daily plan that turns data into micro-tasks and playful challenges for consistent mental habits.
Dynamic mindfulness visualization with guidedance.
Provide scenario-based guided journaling.
Phase-based visualized achievement badges.
Integrate a natural language AI wellness companion that supports multimodal (text, voice, visual, somatic) interactions.
AI analyzes data insights with one-click.
Personalized Mindfulness Pathways
Guided Interactive Engagement
Intelligent Wellness Companion
Frictionless Data Capture
Recognize & React
Seek Solutions
Experiment
Reflecting & Adapting
"Not now. I'm on a deadline. I can't afford to panic."
"This is a mess. Is this medical advice or a blog? That one looks like an ad."
"This is a textbook. I don't have time to get a psychology degree."
"Okay, so meetings are a trigger. Let me search for 'how to reduce meeting anxiety'."
"I blocked time to prepare. I feel more in control. Let's see if it works."
"It's validating to see the pattern, but I wish it could tell me why and what exactly to do about it."
"I should write this down... but it feels like a chore.
"Maybe if I track this, I can finally see a pattern.“
"Okay, maybe this one. I'll save it... to a folder I'll never open again."
"Okay, focusing... is that 5 minutes? (Notification dings) Ugh, I lost focus."
"Sometimes I feel pressure to input words."
"Breathe... what was it? 4-7-8? I can't remember. It feels silly."
"Maybe caffeine will override the anxiety. Just push through."
Feels her heart pounding during a difficult debugging session.
Recall breathing techniques to ease immediate anxiety.
Gets up to make another coffee to power through.
Searches Google for: "how to stop anxiety attack coding".
Scrolls through mixed results: articles, blogs, ads.
Identify and save coping methods for trial.
Try a recommended coping technique："5-minute breathing exercise" on YouTube.
View a lengthy article on "Cognitive Behavioral Therapy for Anxiety". Skims it but finds it too academic and hard to apply.
Feeling positive feedback from these attempts.
Try logging shifts in her state phone for easy tracking.
Review status insights through health app or recorded logs.
Documenting reflections from this period.
Researches and plans new coping strategies based on her analysis.
Implements and tests the new strategy in her daily routine.
Ideation
Preliminary hand-drawn sketches explored the feasibility of opportunity points and informed user flows to streamline interactions into more intuitive processes.
Wireframe Sketch
User Flow
The IA demonstrates four core modules: Crisis support, mindfulness training, passive tracking, daily resilience, and growth insights, forming a seamless support loop.
Information Architecture
Low Fidelity Prototype
Mood Check-in
Choose current mood
Choose words
Choose factors
Success page
Write down feelings
Wellness activities
Insights
Mindfulness
Support & crisis toolkit
Explore
Explore
Explore
Preview screen
Set ambient sounds
Starter setup
Setup&brief intro
Mindful journey screen
Warm-up countdown
Breath catergories
Preview screen
Breath
Meditation catergories
Success page
Feedback & discovery hub
Mindfulness
Meditation
Browse&choose
Scenario description
Brief intro
Choose your feeling
Scenario analysis
List key terms to clarify
Re-evaluate your thought
Self-reflection
Challenge recap
Journal catergories
Wellness
Journals
Challenges
Home page
Mood trend
Daily tasks
&challanges
Daily quotes
Featured
Home
Daily engagement
Interactive reflections hub
Community
Community
Me
Milestones overview
Analytics Report-overview
Preferences
Settings
Support
Analytics Report-mood
Analytics Report-health
Badges
Me
Stats & badges
Insight & analysis
User profile & settings
Lock screen Integration
Holistic wellness dashboard widgets
Somatosensory data collection
Notice & Insights
Prototype
Check energy level
Choose daily focus
Daily prepare
Daily warm-up
Success page
Feedback & discovery hub
Daily Tasks
Morning Prepare
Immersive carousel
Quote catergories
Quotes
Onboarding Set-up
Onboarding welcome
User’s job framing
Onbording survey
Status analysis
Status check
Status check
Status check
Mood check-in trial
Greeting & starter prompts
Predictive response options
Status assessment
Smart local activities
Counselling & advice
Counselling & advice
Multimodal interaction
Event reservation
Dynamic emotive responses
Smart Chat
#4F34D7
#3496D7
Visual Standards
Design
Brand colors
Brand colors
Neutral colors
#323233
#E1E3E6
#646566
#EBEBED
#BBBDBF
Typography
Aa
Clarika Pro
A
a
1
K
k
?
F
f
6
P
p
V
v
B
b
2
L
l
G
g
7
Q
q
W
w
C
c
3
M
m
H
h
8
R
r
X
x
D
d
4
N
n
I
i
9
S
s
Y
y
E
e
5
O
o
U
u
J
j
0
T
t
Z
z
High Fidelity Prototype & Key Features
Onboarding Set-up
Personalized
Exclusive
Intuituve
From instant mood check-ins to personalized daily content, real-time emotional insights shape a more engaging and self-aware daily experience.
1
2
3
Welcome
Stress Level Assessment
Onboarding Mood-checkin
Well-being Overview
Goal Selection
Self-Efficiency Rating
Personalized Entry
We begin by identifying the user’s primary wellness goal — whether it’s boosting mood, reducing anxiety, or managing stress.
This segmentation ensures that every subsequent experience is meaningfully tailored.
Interactive Self-Assessment
A tactile slider allows users to rate their daily efficiency intuitively. This encourages emotional awareness without feeling clinical or judgmental.
👉 This fosters early emotional relevance and user trust.
👉 Reduces friction while increasing perceived empathy.
👉 Turns abstract self-reflection into a lightweight, engaging task.
👉 A small action that drives long-term engagement and mindfulness.
👉 Transforms onboarding into a rewarding, self-reflective moment.
Shared Moments & Emotional Connections
By sharing personal stories, emotional statuses, and mindfulness reflections, users find resonance and support from others going through similar experiences. Hashtag filtering offers emotional tagging and contextual relevance.
Interactive Self-Assessment
A tactile slider allows users to rate their daily efficiency intuitively. This encourages emotional awareness without feeling clinical or judgmental.
Habit-Forming Check-in
Users select an emotion using expressive icons. This marks the start of a daily self-awareness ritual and lays the foundation for habit formation.
Personalized Insights Dashboard
We summarize the user’s input into a radar chart across key wellness dimensions like energy, contentment, and relationships. This provides an immediate sense of insight and agency.
Emotion-Aware Daily Flow
Data-driven
Diverse
Interactive
Tailored onboarding adapts to users’ goals, feelings, and behaviors to boost engagement and personalization from the first touchpoint.
1
2
3
4
5
Mood Check-in
Emotion Word Selection
Emotion Reflection Input
Mood Archives
Mood Overview
Mood Trend & Daily Tasks
Featured & Quote Card
Emotion Cause Selection
Expressing Emotions Instantly
Users start their daily flow by selecting an emotion icon that reflects how they feel, followed by choosing emotion-related words. This intuitive, lightweight interaction reduces friction and encourages emotional expression.
Guided Daily Actions for Emotional Well-being
Users are recommended interactive daily tasks like Morning Prepare based on their emotional data. This flow walks users through step-by-step intention setting, energy scanning, and affirmation building.
It begins with prompts for users to set focus and reflect on expectations for the day.
The task concludes with a Deep Breath session, reinforcing calmness and completing the morning preparation.
This very breathing exercise also appears as a recommended challenge on the homepage — forming a complete emotional feedback loop.
👉 Builds emotional awareness and lowers the barrier for self-reflection.
👉 Helps users develop deeper emotional insight and track recurring patterns.
👉 Turns raw emotion into meaningful data for long-term self-understanding.
👉 Turns emotion tracking into tangible support and self-care nudges.
👉 Translates emotional insights into small, meaningful daily rituals.
Understanding the Root Cause
Users identify the source of their emotions using categorized icons, then have the option to elaborate via text. This step encourages users to contextualize their feelings.
Visualizing Emotional Trends
All mood check-ins are stored and visualized in an overview dashboard and daily archive. Users can review emotional scores, tags, and reflections from past entries.
Homepage Personalization
The homepage adapts dynamically based on the user’s emotional state and habits, offering daily focus, tasks, mindfulness modules, and encouraging content.
Explore: Turning Insight Into Action
An adaptive emotional toolbox that transforms users' reflections into personalized coping strategies. Each tool is tailored to the user's emotional context, helping them take meaningful actions to regulate, recover, and grow.
Guiding
Diverse
Immersive
Incremental
1
2
3
Explore Homepage
Tool Category Tabs
Mindfulness Session Details
Coping Session Details
Archives
Challenge Collections
Challenge Details
Journal Home
Guided Prompts
Scenario Analysis
Reflection page
Choose Section
Heath Summarize
Explore-Tools
Heath Detail-Heart Rate
Emergency Helplines
Sounds
Heath Detail-Heart Rate
Motivational Quotes
Tests
Heath Detail-Fatigue
Choose Section
Choose Section
Choose Section
Mindfulness Setting
Meditation Exercise
Guided Breathing Exercise
Yoga Exercise
Interactive Mindfulness Tools
This set of tools offers guided breathing, meditation, and light movement practices designed to help users regain emotional balance.
Each session provides step-by-step audio or visual instruction, allowing users to focus, calm their nervous system, and ground themselves in the present moment.
Coping Strategy Modules
These modular sessions guide users through coping strategies tailored to specific emotional challenges, such as anxiety, grief, or panic.
Each topic is broken into short, digestible lessons combining psychoeducation, reflection, and actionable techniques — empowering users to better understand and manage their emotional responses.
Track Progress & Understand Yourself
Explore integrates personal records and health data to help users track their progress.
Mood archives and wellness logs make it easy to review past reflections, while physiological metrics—like sleep, heart rate, and fatigue—offer deeper insight into mind-body dynamics.
Supporting Daily Growth with Smart Tools
A set of lightweight yet powerful tools—such as motivational quotes, playlists, self-assessment questionnaires, and emergency contacts—supports users’ everyday mental well-being.
Guided Journals
These writing-based modules invite users to process emotions through structured prompts.
Each journal offers a progressive flow that helps users name their feelings, explore underlying causes, and shift perspectives.
👉 Guiding users to actions aligned with their emotional needs.
👉 Ideal for immediate emotional regulation and daily mindfulness habits.
👉 Helps transform emotional struggles into opportunities for insight and growth.
👉 Supported by wearable data and daily activities, it turns emotional patterns into measurable wellbeing improvements.
👉 These tools enhance self-regulation, emotional awareness, and daily motivation.
👉 Practice encourages self-awareness, emotional release, and long-term resilience.
👉 They bridge emotional insight with behavioral change, reinforcing healthy habits over time.
4
5
Emotional Challenges
Emotionally adaptive challenges guide users to take mindful actions aligned with their mood.
These bite-sized tasks — such as reframing negative thoughts or expressing gratitude — are dynamically suggested based on the user’s check-in data.
Personalized Entry Point to Emotional Support
The Explore homepage offers a diverse set of emotional coping tools — dynamically recommended based on user check-ins and preferences. It becomes a bridge between emotional awareness and action.
Smart Chat AI Assistant
Personalized
Perceptive
The Smart Chat feature provides a highly intelligent and user-friendly experience through data-driven personalized recommendations and guidance, multi-channel input support, context awareness, comprehensive content suggestions, and enhanced visual design for increased affinity.
1
2
Data-driven
Smart Chat Entry
Emotion-Aware Suggestions
Follow-up Conversation
Well-being Reflection Survey
Audio Recommendation
Nearby Activities Suggestion
Schedule Confirmation
Session Summary & Farewell
Everyday Conversations for Emotional Support
Smart Chat offers a low‑barrier, conversational entry point for daily emotional support. Users can start with preset prompts or freely express what they’re feeling, allowing the AI to quickly understand their current mental state.
Based on real-time input and personal context, the assistant suggests short mindfulness exercises, breathing practices, or reflective prompts—ideal for quick stress relief. When needed, users can also dive deeper into structured analysis to better understand emotional patterns and triggers.
Multimodal Guidance Beyond the Chat
Beyond text-based conversations, Smart Chat expands into a multimodal experience. The AI can recommend playable audio content, calming visuals, and interactive exercises to support different emotional needs.
By integrating with other applications and location data, the assistant understands users’ real-world context and can suggest nearby mindfulness spaces, offline classes, or guided sessions—complete with scheduling and booking support in one seamless flow.
👉 Designed for fast relief, continuous support, and deeper self-understanding through natural dialogue.
👉 Bridges digital guidance with real-world action, turning emotional insight into contextual, actionable care.
Wearable Devices & Smart Notifications
Personalized
Efficient
Integrated Health Insights through Wearables & Smart Alerts.
1
2
Apple Watch Data
👉 Builds emotional awareness and lowers the barrier for self-reflection.
👉 Bridges physical and emotional tracking, turning data into proactive self-care actions.
Perceptive
Guided Prompt & Notifications
Vitals Alert — Elevated State Monitoring
Widget Dashboard
Vitals Alert — Elevated State Monitoring
Context-Aware Nudges for Proactive Self-Care
Provide instant access to mood check-ins, breathing tasks, and activity summaries.
Adapt content based on user context (e.g. time of day, emotion trends).
Serve as nudges to sustain engagement and reinforce habits.
Real-Time Physiological Signals for Holistic Well-being
By integrating with smartwatches (e.g. Apple Watch), users gain access to real-time physiological data (heart rate, activity, fatigue levels), which are visualized within the app to inform mental and physical state.
Community
Interactive
A safe space where users connect, reflect, and grow together through collective empathy. Fostering Belonging through Sharing & Daily Engagement
Engaging
Community Main Screen
👉 Serve as emotional touchpoints, building habits of reflection and kindness.
👉 Cultivating a sense of belonging, enhance retention, and improve emotional well-being through peer validation.
Daily Questions to Spark Reflection
AI-generated daily questions prompt users to reflect on small emotional acts and intentions. These lightweight prompts lower participation barriers and encourage mindful engagement without pressure.
Shared Moments & Emotional Connections
By sharing personal stories, emotional statuses, and mindfulness reflections, users find resonance and support from others going through similar experiences. Hashtag filtering offers emotional tagging and contextual relevance.
Me: Insightful Tracking & Motivational Feedback
A personal hub that empowers users with self-awareness, progress tracking, and habit reinforcement.
Comparative
Intuitive
Comprehensive
Detailed
1
2
3
Me Main Screen
Me Main Screen
Me Main Screen
Activity Analysis
Status
Settings
Support
Membership
Emotional Trends
Badges
Preferences
Health Overview
Achievement Badges & Habit Reinforcement
The badge system visualizes users’ achievements based on consistency, duration, and task completion.
By celebrating progress with gamified rewards, the system enhances user motivation, promotes daily engagement, and builds a sense of long-term purpose.
Personalized Tools & Settings
This section centralizes key user tools and customization options, offering flexibility to personalize experiences based on usage habits and preferences.
Subscription access and account controls are easily accessible, ensuring intuitive navigation and professional-grade usability.
Personal Emotional & Health Insights
Through visualized data summaries, this section offers users a comprehensive understanding of their mental and physical wellbeing.
Emotional trends, activity engagement, and health metrics are tracked over time to help users identify patterns, recognize triggers, and make informed decisions for improvement.
👉 Transforms progress into positive reinforcement through intuitive gamification.
👉 Supports user autonomy and long-term app sustainability.
👉 Empowers users to reflect on their progress and take informed actions.
Testing & Iteration
🧪 Validating Whether the Prototype Meets Real User Needs and Contexts
After developing a clickable high‑fidelity prototype, I conducted testing with five target users to evaluate the experience from an end‑user perspective. Based on their feedback, I iterated on the layout of task entry points, interaction flow, and information hierarchy to improve usability and perceived value.
Iteration
1st Hi-Fi
2nd Hi-Fi
3rd Hi-Fi
Home
Evolving Toward a Clearer, More Actionable Daily Experience.
Limitations-1st Hi-Fi
The screen felt visually dense, increasing cognitive load.
Emotional feedback was momentary rather than contextual.
Too many sections competed for user attention, weakening daily focus.
Key Improvements-2nd Hi-Fi
Replaced the static mood face with a mood trend visualization, helping users understand emotional fluctuations over time.
Removed Current Session to declutter the interface and reduce pressure.
Merged Daily Challenge and Daily Reflection into a unified Daily Tasks module with clearer progress tracking.
Simplified the Home feed by refining Featured content and removing New & Worth Mentioning.
Key Enhancements-3rd Hi-Fi
Added a current mood indicator at the top-left, enabling instant access to quick mood check-in without leaving Home.
Introduced a task customization control, allowing users to adjust Daily Tasks based on personal preference.
Enhanced Daily Quotes with a comment feature, transforming passive inspiration into social reflection and interaction.
1st Hi-Fi
2nd Hi-Fi
3rd Hi-Fi
Explore
Refining Content Structure for Better Discoverability and Mental Models.
Limitations-1st Hi-Fi
The structure was flat and ambiguous, with all features grouped under "Activities" and "Tools", making it difficult for users to distinguish between action-based practices and data-driven insights.
Visual inconsistency across modules (image cards vs. icon blocks) weakened the page's overall hierarchy and broke coherence with the app’s main visual system.
No clear mental model guiding user exploration—users had to interpret each tile individually.
Key Improvements-2nd Hi-Fi
Introduced three clearly defined sections: Wellness, Mindfulness and Insights.
Added a Tools section at the bottom, including Quotes, Sounds, Tests, and an Emergency hotline—supportive features now have their own space.
Adopted a unified visual style with iconography and background colors to improve clarity, cohesion, and alignment with the app’s design system.
Key Enhancements-3rd Hi-Fi
Replaced the top-right favorite button with a badge/achievement shortcut, encouraging long-term engagement and personal goal tracking.
Refined the color scheme and icon weights in the Insights section to visually distinguish it from practice-based areas, clarifying intent and user expectations.
1st Hi-Fi
2nd Hi-Fi
3rd Hi-Fi
Smart Chat
Refining an AI Chat Interface for Immediate Emotional Support and Continuity.
Limitations-1st Hi-Fi
The interface displayed too many elements upfront, including trending topics and fixed quick replies, which could overwhelm users in emotional distress.
The “New Chat” button at the bottom conflicted with core interaction flow and lacked contextual clarity.
Absence of conversational framing (e.g., no welcoming message) made the AI feel less humanized or emotionally aware.
Key Improvements-2nd Hi-Fi
Removed trending topics to reduce cognitive load and allow users to focus on initiating conversation.
Relocated the “New Chat” action to the top-right corner, aligning with standard mental models and improving discoverability.
Introduced a clear greeting message and starter prompt to humanize the AI and lower the entry barrier.
Switched to a minimalist background to encourage calmness and focus during emotional reflection.
Key Enhancements-3rd Hi-Fi
Added a chat history icon to the top-right for quick access to previous conversations, supporting continuity and emotional tracking.
Visually enhanced the greeting bubble and prompt, using a gradient and emoji for warmth and personality.
Reintroduced 3 recent chats for immediate context and quick re-engagement, balancing clarity and memory.
Simplified the message input bar by consolidating files and image tools into a single "+" button, minimizing distractions while keeping functionality accessible.
Result
During several rounds of informal usability testing with peers and domain-relevant users, participants were able to easily navigate through core flows, such as mood check-in, exploring wellness tools, and initiating a Smart Chat session.
Users commented that the interface felt “emotionally soothing yet actionable,” with particular appreciation for the clear hierarchy, personalized guidance, and the conversational tone of the Smart Chat.
The project established a component-based design structure, ensuring visual and functional consistency across sections like Homepage, Explore, and Smart Chat.
Key screens were annotated and shared in organized flows, enabling potential future collaboration with developers or therapists.
Design Verification & Anticipated Impact
Usability Test Feedback
Design Asset Documentation
Takeaways
A clear emotional tone and consistent system feedback help users feel supported—especially in sensitive contexts like mental health.
Even in solo projects, testing with peers and domain-relevant users provides invaluable insights for prioritizing clarity and care.
Thoughtful interaction design doesn't just simplify tasks—it can guide emotional experiences and build trust over time.
Designing for psychological wellness benefits from calm visual language, soft transitions, and modular, non-linear user journeys.