Kai: Mental wellness iOS application design

Kai: Mental wellness iOS application design

How might we design an app that allows users to manage and improve their mental wellness, and monitor changes over time?

How might we design an app that allows users to manage and improve their mental wellness, and monitor changes over time?

From research to UI design, I designed an iOS app that enables 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 by checking the progress calendar, which aggregates all entries and activities.

From research to UI design, I designed an iOS app that enables 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 by checking the progress calendar, which aggregates all entries and activities.

Role: UX/UI Designer
Tools: Sketch, Marvel, Illustrator, Whimsical, Milanote
Timeline: 4 weeks (Apr 2019)

Role: UX/UI Designer
Tools: Sketch, Marvel, Illustrator, Whimsical, Milanote
Timeline: 4 weeks (Apr 2019)

Research & Synthesis / Information Architecture / Interaction Design / Prototyping & Testing / Iteration / Branding & UI Design

1. Research & Synthesis
2. Information Architecture
3. Interaction Design
4. Prototyping & Testing
5. Iteration & Implementation
6. Branding & UI Design

To kick off this project, I did some secondary research to become more familiar with the subject area so that I'd have a baseline understanding of the product’s target market, and the problems the product could solve, before diving into design. I conducted market research to gather definitions and resources on mental health and related issues. I also did a competitor analysis to examine 12 existing mental health and wellness apps in the marketplace.

To kick off this project, I did some secondary research to become more familiar with the subject area so that I'd have a baseline understanding of the product’s target market, and the problems the product could solve, before diving into design. I conducted market research to gather definitions and resources on mental health and related issues. I also did a competitor analysis to examine 12 existing mental health and wellness apps in the marketplace.

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. What's more, professional researchers across the country are studying mental health support through digital products right this second. I discovered countless scientific research articles detailing studies involving people struggling with their mental health, and digital products seeking to help them on their journey. This lead me to add a literature review to my research plan, because I realized many of my own questions around mental health apps are currently being investigated on a scale I could not achieve by myself.

After reviewing the literature and identifying some knowledge gaps and remaining questions, I conducted primary research with my own 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.

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. What's more, professional researchers across the country are studying mental health support through digital products right this second. I discovered countless scientific research articles detailing studies involving people struggling with their mental health, and digital products seeking to help them on their journey. This lead me to add a literature review to my research plan, because I realized many of my own questions around mental health apps are currently being investigated on a scale I could not achieve by myself.

After reviewing the literature and identifying some knowledge gaps and remaining questions, I conducted primary research with my own 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.

• 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%)

• 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%)

• 2 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 on a daily basis; value self-care and being grateful

• 2 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 on a daily basis; value self-care and being grateful

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.

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.

Say hello to Evelyn! She's the user persona who represents the common trait, goals, needs, wants, and pain points among users that I identified through user research. As I got deeper in the process, it helped to have a visual reminder of the people I was designing for. I also created a user journey map to empathize with Evelyn's various contexts and experiences over time. The questions, happy moments, and pain points helped me identify some opportunities, which I understood might represent some of the app's features.

Say hello to Evelyn! She's the user persona who represents the common trait, goals, needs, wants, and pain points among users that I identified through user research. As I got deeper in the process, it helped to have a visual reminder of the people I was designing for. I also created a user journey map to empathize with Evelyn's various contexts and experiences over time. The questions, happy moments, and pain points helped me identify some opportunities, which I understood might represent some of the app's features.

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 some or 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.

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 some or 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.

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.

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.

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.

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. 

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 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 as well as design patterns in competitor apps.

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 as well as design patterns in competitor apps.

With my initial wireframes, I created a low-fidelity Marvel 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.

With my initial wireframes, I created a low-fidelity Marvel 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.

• 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

• 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

1. Check-ins: Complete new user onboarding and submit first check-in

2. Self Care: Add new self care activities and complete first activity
3. Reframe: Learn more about one of the cognitive distortions
4. Account: Save account by entering email and password

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

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.

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.

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.

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.

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.

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!

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!

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.

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 (Inter UI) 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 that would help guide UI design.

Eventually, I chose a simple, lightweight font well-suited for interfaces (Inter UI) 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 that would help guide UI design.

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.

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.

• 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

• 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

• 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 in Principle

• 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

   
  

• 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