UIUX Mental Health App for Adolescents

Rajeev Choudhary
10 min readSep 4, 2023

--

About Project

Designing a mental health app tailored specifically for adolescents providing resources and support for common mental health concerns such as anxiety, depression stress, and self-esteem issues.

The app should be safe, private, engaging, and easy to use and should offer a variety of tools such as mood tracking, exercise, and direct messaging with certified mental health professionals and more.

My Role, Timeline, Mentor

This was a solo/personal project (UX challenge), so from research to wireframing to prototype everything was handled by me, including the illustrations.

The timeline for this project was 4 Weeks.

The mentor for this project was Mr. Tony Moura( Senior UX Designer at IBM).

Week 1

In the first week, I started working on defining a target audience, and user flows, and creating visual direction.

Defining User Base/ Target Audience

Defining Target Audience, Characteristics, and Needs.

The images which are shared above can read all the details, but the purpose of creating a target audience was to understand our customers/ user base and on that basis, it allows us to make some decisions like what users need, and what their motivations more.

It can also help in creating a visual direction example let's suppose our target audience is above 20+ in that case visual direction can’t be funky, kiddish instead it must be clear, but when it comes to adolescents language can be kiddish, the purpose was to identify the user base and what visual language will suit them.

User Flows

These were the install user flows for the app, the purpose was to understand how users would use the app/ interact with the app.

User Flows

Visual Direction Research

Here is the visual language that I decided to go with, see The purpose was not to just finalize the visual language in one go but to have some idea of what we want to achieve and what our target is in terms of visual language, definitely some things like colors, style those i was trying to fix.

Week 2

In the second week, I did competitor analysis and user surveys to understand the actual thoughts of users/ market and also researched best practices to create an engaging application.

Competitor Analysis

Did competitor analysis of 2+ Apps (Thapa and Evolve). the purpose of competitor analysis was to identify the strengths and weaknesses of this application by identifying these we can find opportunities for improvements.

Thapa and Evolve App

User Survey/ User Research

I did an online survey, and a total of 8 people participated in this.

Survey

Insights from Survey

Insights from Survey

Best practices for engaging applications.

best practices for engaging app

It's kind rough but during research, these were the points I was able to find to create an engaging application.

Week 3

Wireframing the application and exploring the user experience design. instead of creating digital flows I worked on paper screens It was really fun.

Navigation Screens

Here we have different variations for the navigations(up to 5 variations) Each variation is different from the other and focuses on different tasks Navigation is really crucial because it can make some items primary and secondary so to have good navigation for this certain application we have to understand the user requirements and feature of application the main feature which we wanted to promote in-app was 1:1 consultancy with experts and mental health exercise + the mood tracking is a daily base task so these things were required for sure.

In this we selected variation 5 because it has all the necessary things upfront:

  • Home
  • Mood tracking
  • Activities
  • Consultancy
  • Rewards
  • Music (to allow users to change the music according to their preference)
Home Screen

In the case of the home screen, the idea was to showcase all the necessary information which would make users keep engaging with the app so on top we were giving Mood-tracking so whenever users visit the app for a new day he/she will be able to add the Mood of the day.

Activities like sleep, and anxiety other we kept front so users can access them quickly.

we also introduced today's tasks so it will keep users engaged the purpose of the section was to showcase today's task along with rewards so users would love to engage with the app.

Consultancy Flow
Consultancy Flow

The purpose of the consultancy feature was to discover the health experts and book them for the consultancy.

In the case of the consultancy listing screen, we provided the video section so users can know how a consultancy can really help children/ people the purpose of introducing was to spread awareness because sometimes it is difficult for people to understand how therapy or consultancy helps.

Added the filter over the listing so users can filter out experts according to their needs/ requirements.

After clicking on the expert, the consultant detail page appears which showcases all the details of the expert including education, background, about, rating, and experience so users can know more about the expert and select the best fit for them.

After this booking screen appears the purpose of the booking screen is to book a consultant for a session. (Explored multiple session booking as well as single session booking for this MVP we kept the single session booking there is no specific reason for this)

Music Controller Screens

Allows users to change music according to their preference, The idea behind this control is to provide a personalised experience as much as possible and music is really crucial part when it comes to meditation applications

Activities Screens
Activities Screens

The purpose of activity screens was to perform certain exercises that were good for health including mind exercises, sleeping exercises more.

Inside the activity we allowed users to make it more personalised by introducing certain features like:

  • Changing music inside the activity
  • Changing Voice variation for stories between (female, and male Voices)
  • Changing duration and keeping certain things in the loop.
Profile

Allow users to view the overall performance from the profile screen and to control overall app features like:

  • Changing Voice
  • UI Change
  • Help Center
Mood-Tracking Screens

The purpose of mood-tracking was to track whether the overall day in short was happy, okay, or sad. users were able to view all the days and overall performances.

Rewards Screens
Rewards Screens

We introduced the reward system so users would engage more, The purpose was not just engagement if seen it was seen as a way to encourage users to improve their health.

reward system encourages users to maintain a daily streak and shows them daily rewards on the basis of the task they did. In exchange for rewards, users can get 15% off on consultancy fees and also can buy goodies from the Internal App store.

Onboarding

During onboarding take all the necessary health and habit details so the home page and content inside the app can be personalized for users.

Feedback on wireframes

Feedback from Mr Tony

I received feedback from Mr. Tony on wireframes what were queries were raised in these feedbacks I worked on those.

Query: The point that Tony added is what if 10 10-year-old by mistake tries to hire a consultant?

Solution: there are various ways to resolve this here are some ways:

  1. Can have a locked consultant page to open the page users must do face verification example — Users have to take 180 degree video selfie which will be approved by our AI system.
  2. Can have OTP verification along with face dedication/180-degree video verification. (The user has to speak during the video that code and the system will check it)
  3. If allowed in the country some official documentation verification.

I will recommend going with way 2 because there will be less manual work required.

Week 4

During the fourth week, the purpose was to create visuals during week 1 we already created visual direction but it didn’t mean we had to follow that 100% that was just to take ideas on the basis of the user base.

I kept the same visual direction. (but focused also adding some new elements on the basis of competitor analysis and user research) example most of the users were having sleep issues so through this we can assume for now most traffic in the App will during the night time so having a dark theme can give that extra edge to the App along with characters/ illustrations.

For Illustration I picked a monster illustration library this was developed by me

Iteration 1 for Visual

Screens — 1
Screens — 2
Screens — 3

Feedback for Iteration 1 Designs from Mr. Tony

Iteration 2 After feedback from Mr. Tony I worked on the designs again and refined them designs

Final Designs

Thanks for Reading

Behind the scene, Just adding this section for fun

Process of making paper screens

It was really fun to create all these screens.

--

--

Rajeev Choudhary

UIUX Designer at @Feelpixel Design Studio | 3D illustrator | Content Creator | Dribbble - https://dribbble.com/reecry