Designing a new mental health app

Overview

The Challenge

I took on a self-directed project to design the UX/UI and branding for a new mental health app that would empower users to manage, improve, and monitor their mental wellness over time.

The Solution

Kai is an iOS app idea designed to empower users to manage and improve their mental wellness through daily mood entries, journal notes, and self care activities. Users can also monitor changes over time with the progress calendar, which visualizes all entries and activities.

My Roles: UX Researcher & Product Designer
Tools: Sketch, Marvel, Illustrator, Whimsical, Milanote
Duration: 1 month (Spring 2019)

Research & Insights

First, I conducted secondary research to familiarize myself with the subject area so that I'd have a baseline understanding of the product’s target market and the problems that persist. Through market research I gathered definitions and resources related to mental health, and analyzed competitor apps to identify themes and patterns.

First, I conducted secondary research to familiarize myself with the subject area so that I'd have a baseline understanding of the product’s target market and the problems that persist. Through market research I gathered definitions and resources related to mental health, and analyzed competitor apps to identify themes and patterns.

What I learned is that technology has opened a new frontier in mental health support and data collection, and mental health support through digital products can be simple yet effective. Professional researchers across the country are studying mental health support through digital products every day! I found countless scientific research articles detailing studies involving people struggling with their mental health and digital products seeking to help them on their journey, so I added a literature review to my research plan to gather insights from studies done on a scale I could not achieve by myself.

What I learned is that technology has opened a new frontier in mental health support and data collection, and mental health support through digital products can be simple yet effective. Professional researchers across the country are studying mental health support through digital products every day! I found countless scientific research articles detailing studies involving people struggling with their mental health and digital products seeking to help them on their journey, so I added a literature review to my research plan to gather insights from studies done on a scale I could not achieve by myself.

Additional primary research was done via survey and interviews to better understand user motivations, expectations, needs, and pain points regarding mental health support and apps. My goal was to identify opportunities to create a mobile app experience that would bring value to individuals seeking to improve their mental wellness.

Primary research was done via survey and interviews to better understand user motivations, expectations, needs, and pain points regarding mental health support and apps. My goal was to identify opportunities to create a mobile app experience that would bring value to individuals seeking to improve their mental wellness.

SURVEY SUMMARY

42 responses (mostly women in their 20s and 30s)
Medium to high level of knowledge and understanding of mental health
74% think technology can play a role in improving mental health
50% use one or more physical and/or mental health apps
Medium to high level of comfort using a mental health app
High-interest features include mood tracking (74%), changing negative/self-critical thinking (67%), mental health education (60%), meditation & mindfulness (60%)

42 responses (mostly women in their 20s and 30s)
Medium to high level of knowledge and understanding of mental health
74% think technology can play a role in improving mental health and wellness
50% use one or more physical and/or mental health apps
Medium to high level of comfort using a mental health app
High-interest features include mood tracking (74%), changing negative/self-critical thinking (67%), mental health education (60%), meditation & mindfulness (60%)

KEY INTERVIEW FINDINGS

Two women in their mid-20s living in the US and Canada
Experience with panic disorder, stress, anxiety and depression, counseling and therapy
Value self-reflection, self check-ins, stepping outside oneself, reframing situations, and looking at things from another perspective
Strongly believe tech can help to improve mental wellness
Value simplicity in a mental health app
Strive to appreciate the small things in life, value self-care and gratitude

Two women in their mid-20s living in the US and Canada
Experience with panic disorder, stress, anxiety, and/or depression, counseling and therapy
Value self-reflection, self check-ins, stepping outside oneself, reframing situations, and looking at things from another perspective
Strongly believe tech can help to improve mental wellness
Value simplicity in a mental health app
Strive to appreciate the small things in life, value self-care and gratitude

Next, I synthesized my research findings to define the core target users and problems the product would ideally solve. First, I made an empathy map to help me synthesize my interview findings. This helped me better understand user contexts and experiences.

Evelyn is one of the user personas representing common traits, goals, needs, wants, and pain points among users that I identified through user research. As I got farther in the process, it helped to have a tangible reminder of the people I was designing for. I also made a user journey map to empathize with Evelyn's various contexts and experiences over time.

Evelyn is one of the personas representing common traits, goals, needs, wants, and pain points among users that I identified through user research. As I got farther in the process, it helped to have a tangible reminder of the people I was designing for. I also made a user journey map to empathize with Evelyn's various contexts and experiences over time.

By reviewing key insights from user research, I was able to identify key business & user goals. Design decisions from that point onward needed to be made with these in mind. My question at this time was, "How might we design an app that meets most of these goals?" Next, to compile a list of potential product features in the feature roadmap, I reviewed these goals, the competitor analysis, opportunities from the journey map, and what the research suggested were high-interest features. I prioritized the list by potential impact and potential ease of implementation.

By reviewing all my research and returning to the project brief, I was able to identify key business & user goals. Design decisions from that point onward needed to be made with these in mind. My question at this time was, "How might we design an app that meets most of these goals?" Next, to compile a list of potential product features in the feature roadmap, I reviewed these goals, the competitor analysis, opportunities from the journey map, and what the research suggested were high-interest features. I prioritized the list by potential impact and relative ease of implementation.

Information Architecture

As I began to define the nature of the app, I identified some basic tasks and the actions my user persona would take to complete each task, resulting in task flows. These flows were pretty high-level and expanded to create the initial users flows.

After that, I made a high-level app map (or application sitemap) to illustrate the proposed information architecture. When trying to determine the structure and organization of the app, particularly what the bottom tabs (navigation) should be, I considered the main user tasks and goals, and thought about how the most important content and interactions could be logically organized.

Interaction Design

With the information architecture laid out, I grabbed pen and paper to sketch ideas. I explored a few common UI patterns and layouts, such as circular vs horizontal sliders for mood entry.

With the information architecture laid out, I grabbed pen and paper for some wireframe sketching. I explored a few different patterns and layouts, such as circular vs horizontal sliders for mood entry.

After some initial wireframing in Sketch, I decided to deprioritize account creation and to simplify the check-ins feature. I went back to sketching and eventually landed on some wireframes I could test with users. Throughout this stage, I referenced Apple's Human Interface Guidelines for iOS.

After some initial wireframing on my computer based on the sketches and user flows, I decided not to prioritize account creation, and to simplify the check-ins feature. I went back to sketching and eventually landed on these iterations. Throughout the wireframing process, I referenced Apple's Human Interface Guidelines for iOS.

Prototyping & Testing

With my initial wireframes, I created a low-fidelity prototype for usability testing. To accompany this, I created a test plan defining the objectives, methods (in-person and remote moderated sessions), and tasks for users to complete.

With my initial wireframes, I created a low-fidelity prototype for usability testing. To accompany this, I created a test plan document defining the objectives, methods (in-person and remote moderated sessions), and tasks for users to complete.

OBJECTIVES

Assess the overall usability of the lo-fi prototype
Observe how efficiently users can complete core tasks
Identify sources of confusion or frustration
Identify happy moments and gauge relative interest in the app

Assess the overall usability of the lo-fi prototype
Observe how efficiently users can complete tasks related to the app’s core features
Identify sources of confusion or frustration when users attempt to complete each task
Identify positive moments and gauge relative interest in the app’s features

TASKS

Check-ins: Complete new user onboarding and first check-in
Self Care: Add new self care activities and complete first activity
Reframe: Learn more about one of the cognitive distortions
Account: Save account by entering email and password

Check-ins: Complete new user onboarding and submit first check-in
Self Care: Add new self care activities and complete first activity
Reframe: Learn more about one of the cognitive distortions
Account: Save account by entering email and password

QUANTITATIVE RESULTS

A total of 5 participants tested the prototype (2 in-person and 3 remote). All 4 tasks had a 100% completion rate, and the error-free rates for tasks 1 through 4 were 80%, 60%, 100%, and 100%, respectively. Most people struggled with the self care task, which meant I needed to iterate on those screens to improve usability.

A total of 5 participants tested the prototype (2 in-person and 3 remote). All 4 tasks had a 100% completion rate, and the error-free rates for tasks 1 through 4 were 80%, 60%, 100%, and 100%, respectively. In other words, most people struggled with the self care task, which meant I needed to iterate on those screens to improve usability.

QUALITATIVE RESULTS

For the pages of qualitative feedback and observations I gathered, I leveraged affinity mapping to help me see recurring themes. I was then able to identify key insights and recommend revisions.

For the pages of qualitative feedback and observations I gathered, I made an affinity map to help me pull out the common threads and recurring themes. I was then able to identify key insights and recommend revisions to address each one.

Iteration & Prioritization

My next task was to iterate and implement revisions. Initial changes to the wireframes included rewriting the onboarding copy, communicating to users that they must create an account to save their progress, renaming Check-ins to Entries to avoid confusion, iterating on the self care activity panels, and writing copy to motivate users to complete self care activities.

Through affinity mapping, I noticed a common thread was some confusion and frustration around the Reframe tab and its focus on text-heavy, technical content. It was purely educational, with professional terminology (like "catastrophizing" and "overgeneralization") that wasn't approachable to users. One participant said it looked like homework.

I had previously thought users would respond well to the educational part of the app about cognitive distortions. However, this purely educational tab did not really align in users’ minds with the more interactive Entries and Self Care features. I started to think the Reframe tab might make more sense to include, and be more approachable and beneficial to users, if it were fully interactive as well, with worksheets, exercises, quizzes, and surveys (a couple testers specifically mentioned an interest in these things).

However, since it was not likely I’d be able to achieve this vision for the minimum viable product (MVP) due to time constraints, I decided to put this feature on hold and focus on Entries and Self Care. In the updated wireframes, Reframe was replaced with Progress, a tab dedicated entirely to tracking and progress monitoring, which was important to users during both the research and testing phases.

My next task was to iterate and implement revisions. Initial changes to the wireframes included rewriting the onboarding copy, communicating to users that they must create an account to save their progress, renaming Check-ins to Entries to avoid confusion, iterating on the self care activity panels, and writing copy to motivate users to complete self care activities.

Through affinity mapping, I noticed a common thread was some confusion and frustration around the Reframe tab and its focus on text-heavy, technical content. It was purely educational, with professional terminology (like "catastrophizing" and "overgeneralization") that wasn't approachable to users. One participant said it looked like homework.

I had previously thought users would respond well to the educational part of the app about cognitive distortions. However, this purely educational tab did not really align in users’ minds with the more interactive Entries and Self Care features. I started to think the Reframe tab might make more sense to include, and be more approachable and beneficial to users, if it were fully interactive as well, with worksheets, exercises, quizzes, and surveys (a couple testers specifically mentioned an interest in these things).

However, since it was not likely I’d be able to achieve this vision for the minimum viable product (MVP) due to time constraints, I decided to put this feature on hold and focus on Entries and Self Care. In the updated wireframes, Reframe was replaced with Progress, a tab dedicated entirely to tracking and progress monitoring, which was important to users during both the research and testing phases.

Branding & UI Design

One of high-level design goals for this project was to name the product and choose a visual design direction. Up to this point, I wasn't sure what to call the app! To avoid using a random name generator, I took a methodical approach to naming and branding. First, I sketched a mindmap of brand adjectives that align with the brief and project goals (minimal, clean, light, calming, gentle, unimposing, uplifting, inviting).

Then, I gathered examples from around the web I thought convey these concepts and feelings. I created a mood board to collect visual design inspiration for the app and to convey the overall look & feel I decided to go for. I made the color palettes by first sampling base colors (marine blue, sea foam green) from some of the images, and then using Adobe Color CC to expand, modify, and refine the analogous color palette. Many of the brand adjectives I associate with the sea and sky, hence the marine-inspired theme. Also, water symbolizes emotions, which I thought was quite appropriate for a mood tracking app!

Before jumping into logo design, it was time to name the app. Going off the brand adjectives and mood board, I did some word association (in English and other languages) and landed on “kai”. This one-syllable word is easy to read, say, and remember. Among other things, it means ocean, shell, restoration, and recovery in Japanese. It also means sea in Hawaiian! Thus, I thought “kai” was an ideal name for this product, which I intended to have a refreshing, calming marine look and feel, and which is ultimately designed to help people move toward mental restoration and recovery.

With the name “kai” chosen, I did some logo sketches exploring various marine symbols, like whales, seashells, and waves. But upon reviewing these ideas, I thought the whales and shells were taking the marine idea a little too far. After all, this was not supposed to be a product about the ocean! So, I decided to go with simple waves for the logomark, a subtle nod to the marine theme and the idea of moods and emotions that come and go in waves.

Eventually, I chose a simple, lightweight font well-suited for interfaces and then combined the logo with the wordmark. After some refinement, I now had a final logo design for the app! I then utilized the mood board and typography explorations to define the brand styles.

One of high-level design goals for this project was to name the product and choose a visual design direction. Up to this point, I wasn't sure what to call the app! To avoid using a random name generator, I took a methodical approach to naming and branding. First, I sketched a mindmap of brand adjectives that align with the brief and project goals, including minimal, clean, light, calming, gentle, unimposing, uplifting, inviting.

Then, I gathered examples from around the web I thought convey these concepts and feelings. I created a mood board to collect visual design inspiration for the app and to convey the overall look & feel I decided to go for. I made the color palettes by first sampling base colors (marine blue, sea foam green) from some of the images, and then using Adobe Color CC to expand, modify, and refine the analogous color palette. Many of the brand adjectives I associate with the sea and sky, hence the marine-inspired theme. Also, water symbolizes emotions, which I thought was quite appropriate for a mood tracking app!

Next, I applied this visual design direction to the latest wireframes, resulting in high-fidelity UI designs. Inspired by photographs of the sea from the mood board, I created fully immersive color experience on a number of key screens, like the mood entry UI. I also made sure to exercise restraint where it didn't seem necessary or appear to add to the user experience. Finally, I gathered all UI elements in a kit to facilitate engineering handoff.

Next, I applied this visual design direction to the latest wireframes, resulting in high-fidelity UI designs. Inspired by photographs of the sea from the mood board, I created fully immersive color experience on a number of key screens, like the mood entry UI. I also made sure to exercise restraint where it didn't seem necessary or appear to add to the user experience. Finally, I gathered all the current UI elements in one place to make hand-off easier. There are two main types: those used on white backgrounds, and those used on darker, color backgrounds. At this point, I changed the app icon from the style tile to match the final UI direction.

Conclusion

WHAT I DID

Primary & secondary research
Feature identification & prioritization
Information architecture
Sketching & interaction design
Lo-fi prototyping & testing
Affinity mapping & iteration
Branding & UI design
Hi-fi prototyping

Primary & secondary research
Feature identification & prioritization
Information architecture
Sketching & interaction design
Lo-fi prototyping & testing
Affinity mapping & iteration
Branding & UI design
Hi-fi prototyping

WHAT I DIDN'T DO

Incorporate educational content on cognitive distortions
Design and prototype every feature in the roadmap
Address every issue or suggestion revealed during testing
Test the hi-fi prototype

Incorporate educational content on cognitive distortions
Design and prototype every feature in the roadmap
Address every issue or suggestion revealed during testing
Test the hi-fi prototype

NEXT STEPS

More usability testing and iteration
Figure out how to include educational content in a way that's interactive and engaging for users
Expand the Progress tab with more in-depth and customizable data visualization options
Prototype the mood slider and key animations in Principle

More usability testing and iteration
Figure out how to include educational content in a way that's interactive and engaging for users
Expand the Progress tab with more in-depth and customizable data visualization options
Prototype the mood slider and key animations

KEY LEARNINGS

Evolving roles of technology and digital products in mental health support
Extensive professional research being done on digital products in the mental health space
UX writing skills and the importance of microcopy, especially during onboarding flows
Challenges presenting educational content (especially around mental health) in a mobile application
Differences between native & web design, specifically when it comes to interaction design
Prioritization skills & strategies, and how to pin down the MVP amidst various constraints

Evolving roles of technology and digital products in mental health support
Extensive professional research being done on digital products in the mental health space
UX writing skills and the importance of microcopy, especially during onboarding flows
Challenges presenting educational content (especially around mental health) in a mobile application
Differences between native & web design, specifically when it comes to interaction design
Prioritization skills & strategies, and how to pin down the minimum viable product (MVP) amidst various constraints

More Projects

Find me on

Instagram

Email me at

Contact me at

hello@yumimorii.com