UX/UI Case Study for Helping Hand

Francesca Tambini

tambinifrancesca@gmail.com

Project Overview

Helping Hand is an app that aims to make resources for those struggling with mental health to be more accessible. It also aims to help destigmatize mental illness and educate those that want to learn more. I created this app because I felt that there is a lot of stigma surrounding mental health, and in some cases, there is also stigma surrounding those who seek help. It can also be extremely expensive, without many free options out there. This app is completely free, and will try its hardest to give every user the help that they deserve.

The target audience is aimed at teenagers and adults, who need relief from their struggles, whether they’re stressed out about work or school, or struggling with a mental disorder. However, those that wish to learn more about mental health can also use this app, since it also serves as a way to educate people.

The app allows the user to look through resources such as articles. They can take a short questionnaire about how they’re feeling, in order to get more specialized help. They can also choose to chat with a professional. There is an option to choose between talking to someone right away, or selecting the professional that you wish to talk to, and waiting for their response.

Project Research

I downloaded three similar apps for research. They were MyPossibleSelf, Tochi Diary, and Evolve. These apps are all dedicated to helping with mental health and mindfulness. They all have different approaches to what they do, and each of them had elements that would help me with my prototype. Overall, though, the sites kept their layouts simple and easy to read. They used inviting visuals and colors, to help draw the user in. I took this in mind while creating my prototype, keeping things relatively simple and inviting.

Evolve had a page on their app dedicated to experts. They would give a brief bio of each expert, and at the bottom of the page, include a button where you could schedule an appointment with them. I kept this in mind while developing the “talk to someone” section of my app.Tochi diary had a section of the app where you could fill out your mood. The visuals were a bit too complex for what I wanted to include in my app, but it was a nice reference point for the general idea of what I would do. MyPossibleSelf provided a lot of resources, as well as ways to filter them. If I had more time, I would have included a similar filter to their app, though that did not make it to the finished product. Going through each of these helped me understand this style of app better. I wasn’t quite sure where to start, so it gave me a jumping off point. I did intend to make things more simple than what was in the apps I researched, but it still helped me when it came to understanding the general layout and content that these kinds of apps provide.

App Design

I tried to create an app with a simple layout. I wanted the app to feel welcoming, so I felt that using a warm and muted color palette would be the best option. As my design progressed, I got feedback from my classmates. I was told that it would be better if I made the CTA buttons stand out more, since they were the same color as other links and buttons in the app. I changed them to be a more saturated and darker orange. It kept the CTA buttons within the color scheme, while still helping them stand out.

Another thing that I changed within the design was the text. I was told in both feedback sessions that it was a bit hard to read. I tried to make the text less cramped and bigger, hoping that would make it easier to read.

Tasks For Users

There are a few different tasks that can be completed in this app. When you first start up the app, you can either choose to create an account or log in. After that, you are taken to a home page, which introduces you to the main three tasks: complete the “how are you feeling?” questionnaire, read an article, or talk to someone.

To read an article, you click on the button that says “Find an Article.” There, it gives you a preview of the different articles that it has to offer. You can read these articles by clicking the title or read more button. It then takes you to a full page, where you can read the article in full. You can exit by clicking the x button in the top right corner.

You can select your mood by pressing the “How are you feeling?” button. From there, you are given a list of emotions, where you can select all that apply. Once submitted, you can go back to your home page or be taken to a newly filtered list of articles. If you go back to your home page, your articles will remain filtered to the mood that you set.

You can get in contact with someone by pressing the “Talk to someone” button. There are steps you follow after that.

  1. Select "Chat Now" or "Chat Later"
  2. If you pick "Chat Later," scroll through the many different professionals that you can talk to
  3. Go to a professional's profile and clikc "Send a message"
  4. Once you are in contact with someone, send them a message.

Usability Testing & Further Development

Unfortunately, I did not have many people that could test my app, so I only got feedback from one person. The usability issues that I discovered through this testing was that the CTA buttons weren’t obvious enough, and that the text was hard to read. I fixed this in future edits of the prototype, to make it more usable. I also added navigation to the app, so the user could easily switch between different parts of the app, without having to return to the main menu and without getting stuck on a screen.

If I were to further develop this app, I would probably change the layout of the articles and article page to be a bit more legible, since I’m still not sure if it’s there yet. I would also add more to the navigation, such as a way to filter the articles without having to go through the “How are you doing” section of the site to do so.

Summary

I learned a lot about the process of prototyping, which is something that I haven’t done before. It was a bit confusing at first, but now I feel like I can move on to other prototyping projects easily with the knowledge I got through this project.

I also learned a lot more about making my site usable for mobile devices. I think that was a big obstacle for me, since the way I designed things didn’t always translate over to mobile devices. This is something that I will keep in mind for future projects.

It also taught me how much went into planning every little interaction in the app. The amount of interactions my app has is very small compared to most apps, but even then, the prototype has so many different pages that went into it just to cover the small amount of interactions that are in it.