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.
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.
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.
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)
My Roles: UX Researcher & Product Designer
Tools: Sketch, Marvel, Illustrator, Whimsical, Milanote
Duration: 1 month (Spring 2019)
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.
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.
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.
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 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.
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.
Check-ins: Complete new user onboarding and first check-in
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.
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.
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 (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.
Primary & secondary research
Feature identification & prioritization
Information architecture
Sketching & interaction design
Lo-fi prototyping & testing
Branding & UI design
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
Evolving roles of technology and digital products in mental health support
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
Increasing Location Opt-InsUX/UI design | Kinsa
Revamping RemindersUX/UI design | Kinsa
Airbnb FlightsUX/UI design | Speculative
Email me at
Contact me at
© 2022 yumi morii
© 2022 yumi morii