Home » Developing a Mental Health Application for Families wellhealthorganic.com: An Analysis of UI Design

Developing a Mental Health Application for Families wellhealthorganic.com: An Analysis of UI Design

by Iceman
0 comment

The market for mental health apps is predicted to grow from $6.22 billion in 2023 to $7.18 billion globally in 2024. Unfortunately, research indicates that users of mental health apps frequently run into usability issues, such as uneven user experiences, complicated or confusing interfaces, and a lack of individualized support, intervention, or resources. To put it briefly, shoddy design has the power to make even the most useful programs useless and alienate users.

This implies that there is a big chance for new players in the mental health app market to enhance the UI design of current apps and facilitate user adoption. For instance, I was hired in 2022 by a San Francisco-based firm that was creating a mental health app for families to produce an interesting, user-friendly, and family-friendly prototype that they could show to potential investors.

The concept was successful; in 2022, the company was began after receiving $22 million in finance. However, there were numerous design obstacles in the way. Here, I go over the challenges my team encountered during the early design phase and how we overcome them, such as a laborious onboarding procedure, a perplexing navigation flow, and an unwelcoming app UI.

Prioritizing User Experience in the Design Process

The company’s research team had already conducted user research wellhealthorganic.com/easily-remove-dark-spots-lemon-juice, identified common user categories, and created user personas to help them narrow down on the app audience before I joined the project. The three characters were kids with mental health issues like anxiety, depression, ADHD, and behavioral issues; they were also family members and primary caregivers trying to help these kids; and they were medical professionals taking care of the kids and their families.


My design team started by figuring out which features would satisfy the requirements of the user personas and sketching up user flows. We assembled where users would begin their trip, how they would navigate to subsequent pages, and the crucial actions they would need to perform to finish a task using low-fidelity wireframes of the app’s screens that we made using Figma. We decided that the app would have four main sections:

  • An outline of the features of the app, which would provide families with useful information including resource recommendations and appointment reminders
  • A platform for communication where kids might have video and chat meetings with medical professionals
  • An information center with articles, white papers, downloads, and toolkits for families and caregivers
  • A place where families and caregivers could get reports and related materials to monitor the development of their children

After that, we worked with internal stakeholders to test our early wireframes for usability in order to evaluate our presumptions on the user flow. Above all, we were interested in finding the number of steps needed to accomplish particular objectives, such finishing the onboarding procedure and finding an appropriate article in the resource hub. We were able to identify areas for workflow simplification and the creation of more user-friendly navigation flows thanks to this exercise.

Starting the Process: Orientation

The onboarding process for therapy apps should provide a welcoming environment for users who may be in upsetting circumstances when they first access the app. Due to the nature of the app, we were sadly forced to collect a lot of data during the onboarding process in order to provide relevant treatment plans. As a result, our initial onboarding flow consisted of multiple lengthy forms and a lengthy list of questions that families had to complete before accessing the app’s main features.

To provide consumers with a clear understanding of their current situation and the upcoming steps, we first dissected the onboarding process step by step. We incorporated specific progress markers to assist users in visualizing the remaining actions needed to finish the task. Users could change inaccurate information by going back to a previous stage with the “Back” call-to-action button, and they could go through the rectified steps by using the “Next” button. In order to prevent users from losing their work in the event of unforeseen interruptions, like inadvertent app termination, we have implemented an autosave option.

The onboarding flow was further enhanced by the addition of unambiguous visual cues. Research indicates that when information is hard to visualize, it can be overwhelming to process. Users can be alerted to necessary activities, future steps, or important information by using strong visual orientation (icons, arrows, progress indicators, tooltips, animations, etc.).

Additionally, we enhanced the way the multiple-choice questions were presented by establishing a distinct visual hierarchy wellhealthorganic.com/easily-remove-dark-spots-lemon-juice that used variations in font size, weight, and color to set each question apart from the possible responses. Every conceivable answer was listed separately in an easily observable box that could be clicked. To further encourage user participation, reduce errors, and make it obvious that these were single-select questions, the selected answer was also highlighted in a darker color.

Encouraging Resource Discovery Through Intelligent Navigation

The user resource center of the app provided an incredible amount of useful information, however we discovered that the initial design of that section of the app lacked a clear hierarchy and logical categorization, giving the impression that it was disorganized and overwhelming. Instead of just selecting an appropriate category, a parent looking for information on separation anxiety would need to browse the whole resource hub.

Personalized recommendations based on users’ past reading patterns inside the program; saved resources; and reading categories (e.g., Worries and Anxiety, Sleep and Bedtime, Anger and Aggression) comprised the first three sections of our welcome page. We included a horizontal scrolling feature—often seen in content segmentation—in the reading categories section so that readers could swiftly peruse various topics without having to scroll vertically too much. Additionally, readers might browse its articles by choosing a reading category wellhealthorganic.com/easily-remove-dark-spots-lemon-juice.

The article cards were then created by us wellhealthorganic.com/easily-remove-dark-spots-lemon-juice. Each article was presented in preview form on a huge card so that users could quickly determine its relevancy and level of engagement before devoting time to it. The cards had the title of the article, a picture of the hero, the expected reading time, the appropriate age range, and category tags for related subjects. (In order to make it simple for people to go to additional relevant articles,

We also made an effort to enhance each article’s reading experience wellhealthorganic.com/easily-remove-dark-spots-lemon-juice and added elements that would make the resource hub more useful for working parents and caregivers. We included a vertical progress bar to make it easier for visitors to navigate the text. In addition, a text highlighter was provided to help you save passages, themes, and ideas for subsequent review. In order to allow readers to revisit articles, we also included a “Save for later” button.

Establishing a Welcome Environment

Our last task was to employ visual design to encourage a friendly and helpful user experience. The business already had a style guide that specified fonts, iconography, and color schemes. Now, we had to balance these design components such that users traversing potentially delicate or upsetting subjects felt welcomed and encouraged.

The cool greens, soft blues, and subdued pinks and purples of the coastal Pacific Northwest served as the basis for the brand’s primary color scheme. These hues are frequently associated with feelings of calmness. While we largely used those colors, we added splashes of a few warmer hues, including orange and yellow, to the resource category tags to add additional vitality and promise.

We used lots of whitespace in between UI elements like buttons, form fields, and photos to produce a neat, balanced, and orderly structure. To ensure that the call-to-action buttons were visible and large enough to tap on the fly, we also raised the padding around the text of the buttons. To make the content easier to read about wellhealthorganic.com/easily-remove-dark-spots-lemon-juice, we also raised the resource hub article’s line height.

Lastly, we added serene animal artwork—in particular, a sociable otter that is prominently displayed throughout the app—inspired by research suggesting natural imagery may assist enhance mood.

A caring and practical approach is necessary to create a successful mental health app, and there is a market need for apps with superior user interfaces (UI) to beat the competition. I was reminded by the design process of the importance of using user personas to obtain important insights into the particular needs and preferences of users. We wouldn’t have been able to develop a customized app experience that speaks to real-life issues and connects with the kids and families that use it without this crucial data.


You may also like