Case Study / Mobile App
Health + Wellness
-
Design a mental relaxation mobile app for The Daily Health Conference, a non-profit organization dedicated to promoting health and wellbeing
-
Figma
FigJam
Photoshop
Trello
Slack
Google Forms
Google Meet
-
Gabriel James Johnson, UX/UI Designer
Victoria Díez Lamas, UX/UI Designer
-
6 weeks to delivery of high fidelity prototype
-
User Experience
Competitive Analysis
User Interviews
User Survey
Affinity Diagram
Empathy Map
User Persona
User Journey Map
Problem Statement, MoSCoW Map
MVP Statement
User Flow
Low and Mid Fidelity Wireframe and Prototype
User Testing
User Interface
Visual Competitive Analysis
Style Tile
Design System
High Fidelity Prototype
Challenge
The Daily Health Conference is a comprehensive platform covering various health-related topics in over 100 languages. Their existing membership offers access to live webinars, an archive of past sessions, social networking, educational content, and online training. Faced with a drop in memberships, they aimed to:
• Develop mobile apps to augment their membership value
• Revamp their image with a fresh design system
Goal
Our objective was to create a prototype motivating users to take action towards a healthier lifestyle, focusing on mental wellness and anxiety management. The user interface should reflect a new, fresh, updated image aligned with the Daily Health Conference values, and should feature:
• User profile setup and goal management
• Progress tracking and motivation for a healthier lifestyle
• GDPR-compliant user data control
• A user-friendly interface reflecting modernised aesthetics and wellness values
• An educational component to inform users about the benefits of a health routine
UX / Secondary Research
Anxiety is a widespread mental health concern affecting a substantial portion of the global population. According to data from the World Health Organization (WHO), approximately 3.6% of the global population suffers from anxiety disorders, making it one of the most prevalent mental health conditions worldwide. The use of mobile apps for anxiety relief has grown significantly in recent years, with millions of people turning to digital tools for support.
While precise statistics may vary, it’s estimated that over 10% of smartphone users have downloaded and actively use apps designed to alleviate anxiety and promote mental wellness.
UX / Competitive Analysis
In our exploration of mental wellness apps, we conducted a competitive analysis of four notable players: BetterHelp, Calm, Muse, and Noom.
These apps offer various approaches to improving mental health, from meditation and mindfulness to therapy and holistic wellness.
We then consolidated our findings into a simple strengths and weaknesses diagram, which allowed us to understand what users expect, identify gaps in the market, and to strategically position our app.
UX / Surveys
Most notably, survey data analysis revealed a high rate of anxiety (62.4% of responses), followed by lack of sleep and depression (both at 43.4%).
Potential users also noted that direct professional support and breathing exercises for relaxation would be their most desired resources (36.9% and 37.7%, respectively).
UX / Interviews
Survey data helped guide our interview questions. During the course of interviews with five users, additional insights were revealed.
We extracted interview data according to motivation, painpoint and behavior––and then further organised the data into six major themes using an affinity diagram.
UX / User Persona + User Journey
Our findings were humanised by creating a user persona, Gwendolyn Foster. She personifies the app’s audience as a mid-thirties tech professional suffering from work-related anxiety/burnout, who is searching for a flexible online resource to improve her mental health.
From there, we developed a user journey map to help illuminate the pain points in her search and potential opportunities to enhance engagement.
Click to enlarge.
UX / MoSCoW + Statements
Utilizing the MoSCoW method, we prioritized features by breaking them up into Must Have, Could Have, Should Have and Won’t Have categories. This paved the way to help define our hypothesis, problem and MVP statements.
UX / Site Map + User Flows
At this point, we were able to move forward into information architecture. The site map visualised the website’s structure; the user flow and happy path mapped the user’s journey from discovering relaxation exercises to reaching out to a therapist.
Click to enlarge.
UI / Concept Sketches + Medium-Fidelity Prototype
Our journey continued with concept sketches, which laid the foundation for user testing.
Insights gathered from user testing refined the designs, leading to a medium-fidelity prototype.
Feedback gathered from usability testing the prototype was noted, analyzed and later incorporated into the high fidelity prototype.
UI / Visual Competitor Analysis + Mood Board
A visual competitor analysis then ensured our design aesthetics aligned with industry trends while not mimicking competitors. This exploration of brand attributes culminated in a mood board that captured our desired identity—relaxing, liquid, cool and inviting.
UI / Style Tile + Design System
The style tile defined typography, color palettes, and UI elements, fostering a consistent visual language. Components and design system were created that carried this vibe over into the high fidelity prototype.
UI / High-Fidelity Prototype
UI / Interactive Prototype
For full functionality, view at fullscreen on desktop.
Next Steps
“Resources” feature to integrate The Daily Health Conference’s catalogue of educational resources (articles, public talks, workshops and professional training programs)
Link these resources to relevant relaxation exercises as “Recommended Resources”
Continued user testing and desirability testing
Iterate and Refine: based on the insights gained from testing, make necessary adjustments and refinements to the prototype
Repeat Testing and Iteration: continue iterating, testing and refining until the prototype performs well