The Ray- A mental health app case study

Nikita Chaudhary
13 min readJul 2, 2021

UX Techniques Used

Empathy Map, User Research, User Personas, User Flows, Wireframing, Prototyping, Usability Testing

ROLES AND RESPONSIBILITIES

UX/UI Designer

User Research

Visual Design

Prototyping & Testing

June 2021 (About 9 days)

OVERVIEW

THE RAY (the ray of hope) is one of a kind mental health communication app that allows the users to interact with various communities of people and professional therapists with whom he/she can share his/her stories and have a heart-to-heart chat with full privacy and security. It provides a platform of communication to those who seek mental health support.

PROBLEM STATEMENT

Sometimes strangers who have gone through similar situations can give the best advice when we’re going through rough times in our lives. How can you design an environment where people who are seeking help feel safe to connect and support each other?

INITIAL IDEA

When I first started planning for this self-project, I had just the basic ideas about what the app should contain. Thus I just randomly jotted down all the ideas for the app that kept popping into my head in my diary.

So, the initial idea for the app was:

  1. To have a communication platform that can be fully trusted by the users.
  2. To have various communities (LGBTQIA+, Relationship Advisors, Family Gurus, etc) built in the app where different users can communicate with various other users and share their feelings without having the fear of being judged.
  3. To have full privacy while using the app.
  4. Age-restricted app.
  5. Users can be able to share all kinds of community-relevant personal experiences of depression, trauma, etc, and the ways they dealt with them through posts.
  6. Use of unique nicknames instead of real names to maintain privacy.
  7. Premium feature of Professional Therapist Online Sessions.
  8. Private chats with other users or the therapists.
  9. Sharing of views, opinions, suggestions, etc in the comment section of relevant posts.

Hypothesis:

I made few assumptions before starting to work on this app. They were:

  1. THE RAY is fully funded by the government of Nepal.
  2. This is an initiative taken by the government of Nepal to help the youths as well as those who need mental support so that instances of suicide and cases of clinical depression can be reduced in the country.

UNDERSTANDING THE USER

STORYTIME:

Gujiya is a 22-year-old girl who is suffering from anxiety and depression because of the recent breakup that she had with her long-term boyfriend. He apparently cheated on her during the first lockdown in 2020. She trusted him with all her heart and was shattered completely when she came to know about him cheating on her and thus slowly started getting anxiety and depression.

She thinks that being heard would be a great help for her but she has a very conservative family who has always put various restrictions upon her. She isn’t quite close with them. That’s the reason why she had never shared anything about her relationship with her parents or even her siblings and now she was scared thinking about what they might say or do if she told them about it now. She was confused if they would even understand her situation and could empathize with her.

She has fewer friends who are unable to help her due to their lack of empathy. She doesn’t have anyone in her circle who has gone through a similar experience as hers. So she has nobody to talk to and share what is going on with her mentally and emotionally after the break-up. She has tried all the possible methods to get rid of the anxiety and depression but nothing seemed to help.

So, finally, she turned to the newly launched and highly talked about mental health app (THE RAY). She had heard a lot about the app and knew that it was an initiative of the government of Nepal for reducing mental health problems that had arisen during the first lockdown period. So, she decided to take a leap of faith and give THE RAY a try.

EMPATHY MAP

Gujiya’s Empathy Map

I made an Empathy Map for understanding Gujiya’s mindset more. For building the empathy map, I made 4 categories namely; ‘Says’, ‘Thinks’, ‘Does’, and ‘Feels’.

It helped me gain insights about:

  • What would Gujiya be thinking and/or feeling about the app and while using it?
  • What are her worries and aspirations?
  • What Gujiya might be saying and/or doing while using the app?
  • What Gujiya might feel while and after using the app?

Gujiya’s priorities are:

  1. To have someone to talk to about her problems and mental state.
  2. To have people around her who would gladly offer help for her situation.
  3. To have a network of people who have similar stories as hers or at least empathize with her.
  4. Wants a secure place where she can open up.

Gujiya’s pain points are:

  1. Unable to find people who could help her with depression.
  2. Hesitant of opening up to friends and families.
  3. Unable to find people who could empathize with her situation.
  4. Not knowing what her mental state is.
  5. Confused if she even needs to seek mental health support or not.

USER RESEARCH

I knew that there were a lot of others like Gujiya who needed mental help. Thus, to understand the needs and wants of my target users better, I conducted a small survey with about 6–7 relevant users whom I knew had suffered from depression and other mental issues at some point in their lives.

Also, because I wanted to get insights for both users (general and therapist) so I decided to create two surveys.

So, I not only surveyed the general users but also took my time to interview a therapist (fresher) and a second-year Psychology student to get their insights about the app.

General Users Survey

The survey questions (survey done via audio messages):

  1. List the first few things you do when you are having anxiety and are stressed out?
  2. How would you describe your coping mechanism?
  3. One behavior of people that makes you more anxious or triggers your anxiety?
  4. Do you have faith in online therapy? (Why?)
  5. Would you be confident enough to give your private details such as your citizenship number, mobile number in a government app if it is to maintain your privacy online and help you with your mental state?
  6. Would you be comfortable sharing your stories with unknown people if your identity is anonymous?

General User Survey Responses

Here’s the summary of the responses that I received for the survey questions asked to the general users.

Therapist/Psychology Student Survey

The survey questions (Survey done via call):

  1. Do you think that you would have been able to give counseling to people online successfully if you were asked to give counseling for anxiety and depression?
  2. Do you think that sharing one's stories of depression, anxiety, fears, etc online anonymously could help the individual with his/her mental instability?
  3. What advice would you like to give to the government if it were to bring an app for solving the mental issues of our youths?

Therapist Survey Responses

Here’s the summary of the responses that I received for the survey questions asked to the therapist and the Psychology student.

USER PERSONAS

INSIGHTS

From the responses I gathered from the two surveys, it was clear that both sides thought:

  1. that online therapy is a good solution for people who suffer from mental health issues.
  2. people need somebody in front of whom they can rant their stories and seek opinions and suggestions.
  3. people feel comfortable sharing their problems anonymously with strangers in the hope of not being judged.
  4. people are able to open up in front of people who have gone through similar experiences or someone who can empathize.

USER JOURNEY

After having a list of the pain points of the users, I made a User Journey map to illustrate the possible ways a user would be interacting with the app.

It gave an insight into how a user could be directed to the app and then how the user would probably use the app to mitigate his/her pain points.

User Journey Map

INFORMATION ARCHITECTURE

After analyzing the data gathered from my user research, I wanted to create a mobile app that could help mitigate the users’ pain points and helps to solve the users’ problems effectively. I wanted to build a platform where people with mental health issues could come together to help each other heal mentally and emotionally.

An IA was created to help me figure out all the different functions/features needed in the app.

General User Workflow
Therapist Workflow

LOW-FIDELITY WIREFRAMES

Once I had a clear idea of the information architecture of the app, I went ahead and created lo-fi wireframes for both users (client and therapist). There were 3 main functions I wanted to focus on to solve the problem: finding, contacting or booking, and chatting.

FINAL DESIGN

Note: Due to the time crunch I was unable to prepare the final UI for the Therapist side of the app and as for now I only have the general user flow design but I will try to complete the therapist one as well and post about it in my upcoming articles.

The Onboarding and sign up pages:

So right after the splash screen, three onboarding pages are displayed on scroll where the new user can learn about what’s in the app for him/her.

After the onboarding is done, the sign-up page appears. It consists of two choices whether to sign up as a general user or a therapist. For the general user sign up the user needs to type in his real name, email address, or mobile number to get the verification OTP, a unique nickname which will be their identity in the app and they must give their citizenship number to verify their age being 16+. They also need to upload a scanned copy of their citizenship card. These were done so that the app can be a secure place for the users and they could have a nickname as their identity which will help them to chat with people without having to reveal their real identity.

After they type in the OTP their account is verified and now they are good to go with the app.

Post sign up pages:

I designed a category selection page where the user needs to select the categories that he she might need help with. It will help the app show the relevant posts, articles, stories to the user.

After that, they will see a welcome message card post which they would be directed to the main homepage of the app.

Landing Page:

I put a menu button at the upper left corner, a search bar in the middle, and ‘Add Post’ and ‘Notification’ icons at the upper right corner along with the main tab menu at the bottom containing ‘Home’, ‘Chats’, ‘People’, ‘Therapists’ and ‘Profile’ features.

The feed contains the posts, articles, and anything posted by the users and the therapists. The user can filter out the posts community-wise.

The menu list includes a list of things that the user might need such as:

Saved posts, Liked Posts, Moodmeter, Games, etc. We will talk about the mood meter further in the article and for the games, it would include about 5 mobile games which are proven scientifically to be helpful for calming the mind and improving the mood.

Chat Page:

The users can have a conversation either through text messages or through text messages or through audio messages with other users or professional therapists and seek mental support. The user can see the chats he/she has had with other users and the therapists (if any).

People Page:

Users can explore the profile of different users on this page. They can connect with other users and start chats with them or simply just follow them to see their future posts.

Therapist Page:

Users can find a whole list of therapists available on the app and visit their profile and know about them. This is a premium feature of the app and hence in order to book an online appointment with the therapists and seek help from them, the users need to pay a certain charge.

Profile:

Here the user can see his/her profile and see the reviews and ratings given to him/her by other users for their behavior and helpfulness. Users can also edit the profile details and also see all the posts made by them.

Mood meter:

The mood meter is another feature of the app. It is activated twice a day on the users' phone and it asks the user how he/she is feeling at the moment and then shows a list of friends, therapists (paid), and posts relevant to the user to help him/her get rid of the mental issue he/she is facing at the moment. It helps the app and the therapist (if any) to keep track of the general user’s mental state and help him/her accordingly.

Click on the link below to see the prototype of the app (general user flow).

The Ray App Prototype

DESIGN SYSTEM

While starting to create the hi-fi design of the app I knew what colors and font I wanted to use for the app.

Shades of Blue:

I had previously researched the colors and their connection to various human moods. Thus, I knew that shades of blue had a calming and peaceful effect on the mind. Blue is the color of the mind and is essentially soothing. So, I went ahead and tried out few shades of blue in my design and finalized the ‘Pacific Blue Color’ (#05AEB5) as my primary color. Then I used different values of this shade as my accent colors.

Font

Poppins has always been my go-to font whenever I want to design a post that is friendly. Poppins have round edges which makes the mind believe that it’s a friendly font due to the absence of sharp edges.

And since, our product is all about friendship, calmness, and security thus, I decided to go with this font to make the app more friendly and easily trustable.

Buttons/Textboxes

While designing the buttons and the text boxes for placeholder values I made sure that they had curved edges. Again the logic is the same as the font selection; curves make the mind feel at ease and gives a friendly vibe. Thus, for this reason, I gave about a 5px border-radius to the buttons and the text boxes.

USER TESTING

After I had designed the final app, I made the prototype and sent it to the users who I had interviewed earlier and asked them for their feedback about it.

The feedbacks were as such:

  1. The feed area could be improved to make it more engaging.
  2. The game feature could be brought to the limelight instead of putting it in the menu list.
  3. A lighter shade of blue could be used.

Future Goals For The Project:

Many necessary and crucial changes, as well as new features, could be implemented in the second phase of the app. They are:

  1. Work on the feedback given by the users during testing.
  2. Send a push notification to the friends of the user in the app about the current mood of the user so that his/her friends can do something to help them.
  3. Make the option available through which the general users can be able to book offline appointments with the therapists through the app.
  4. The meditation feature can be added to the app to help the users do the much-needed breathing exercise.
  5. Inbuilt 24*7 user helpline service can be implemented.

The Take-Away

I learned a lot of things from this project. Some of the learnings are:

a. It takes a lot more than just designing an app to make it user-friendly and helpful.

b. Having a clear understanding of the pain points and priorities of the target users makes it easier to reach the goal of the project sooner.

C. Having a solid understanding and the importance of the case study and its structure is very crucial in the UX process.

D. Designing is a very smaller part of the huge system of UX. So more focus should be given to the discovery, research, and ideation part to make a project successful.

My social links:

Dribbble

Instagram

Linkedin

Wattpad

--

--