
HopeChat
May 2024
Overview
HopeChat is a mobile app prototype designed to connect users with virtual mental health support groups.
This prototype is the result of a semester-long capstone project at Penn State University, where I utilized UX & UI design principles to create a seamless user-centered mobile app interface.
The project was completely self-led with invaluable insight from my mentor, a lead service designer at a digital innovation and engineering consultancy.
Background
More than 1 in 5 U.S. adults are estimated to live with mental illness (Mental Illness, 2023). It is an issue that is becoming more prevalent every year and is something I am personally very passionate about. There does not seem to be any definite solution to this widespread problem, but there are some things that individuals can do to cope with their struggles. One important strategy is to reach out to others and get support, which is the entire inspiration behind the HopeChat app concept.
Understanding the primary challenges and struggles faced by those dealing with mental health issues was key. Exploring issues such as feelings of isolation, lack of support, difficulty accessing resources, and stigma surrounding mental health helped shape the app’s features and functionalities. Recognizing the importance of community and peer support in mental health recovery, I focused on creating a sense of belonging and connection among users. Ideas such as virtual support groups, chat forums, and shared experiences were explored to promote safe interaction and mutual support within the app’s community.
The concept of an online support group is not new, but many of the groups available seem to be either unmoderated, behind a paywall, or poorly designed. My goal was to provide a free, easily accessible app with groups led by professional facilitators and with an intuitive and user-friendly interface.

HopeChat is featured on an exhibition site
Labeled “Mental Health Support Groups Mobile App Prototype”, my project was displayed along with other outstanding projects on Penn State’s Digital Multimedia Design exhibition website.
Identifying the Problem
I began the process by creating a user survey and sharing it with several mental health support Facebook groups and Reddit forums. The survey contained 18 questions, all of which were open-ended to gain more valuable responses. The questions ranged from, “What problems do you face when you try to find peer support for your mental health online?” to “How would your ideal online peer support group be structured?”
After receiving the survey results, I organized key points and derived the most important takeaways.

As you can see from above, the main insights I gained were that users wanted to feel supported and understood in a safe environment and have real-time conversations to feel more connected to others. The next step was to begin in-depth market research in order to figure out my target audience.
I found out a lot of information about mental illness in the U.S., the positives and negatives of in-person and online support groups, and everyday struggles that people with anxiety and depression face.
I found that:
- The most common mental illness in the U.S. is anxiety
- Women are more than twice as likely than men to experience an anxiety disorder
- The most common age range to have anxiety is 18-24, followed by 25-39 year olds.
- Anxiety disorders almost never occur in isolation, as they often have comorbidities with mood disorders such as depression.
Based on this statistical information, I created a persona to better understand my target audience.



Ideation
To begin the design process for the prototype, I started by generating a sitemap and user flow diagram.
Sitemap

User Flow Diagram

To get a better understanding of the challenges my persona might face when navigating the app, I created a detailed user journey analysis.

I was able to gather many helpful insights from this analysis to help with the design of the user interface.
Key Opportunities:
- Include a mini-tutorial to help the user understand how to navigate the interface
- Make relevant and concise filtering options available to search for support groups
- Support group forums should have professional facilitators and peer moderators to help keep the chatroom safe
- Remind users to respect community guidelines before posting
- Create functionality for real-time meetings
To further brainstorm app functionalities, I then generated a mind-map.

Testing
With these ideas, I worked away on the user interface design until I had my first draft ready to test.
Using the website Maze, I created a usability test to share with members of mental health support groups on Facebook. The instructions were to sign up, search for a group, join, and write a post.
From the test results, I received some feedback that the interface was confusing, and saw that most testers were tapping on the ‘sign in’ button instead of the ‘sign up’ link.

This is a heatmap of where one of the testers was tapping on the screen.
From the data, it was shown that they tried every other avenue first before tapping on the ‘sign in’ link at the bottom. From this, I took away the idea that perhaps at first glance ‘sign in’ and ‘sign up’ were too similar of phrases. Therefore, I changed ‘sign in’ to ‘login’ in order to further differentiate the two, making it easier for users to find where they want to go.
Design
Finally, I was ready to complete my visual design and interactive prototyping for my app.
I created this simple text logo, with a circle containing three dots to represent a typical support group in which people sit in a circle to have discussions with each other.

The final visual design touches took some time to get right, but it was a fun and inspiring journey. Here are the final mockups of the main screens of the HopeChat prototype.






Watch my final prototype run-through below:
To view even more details on my step-by step process, I created a blog to document the production of HopeChat as I went along each week.
References
Booth, J. (2023b, October 23). Anxiety statistics and Facts. Forbes Health.
https://www.forbes.com/health/mind/anxiety-statistics/
Mendlowicz, M. V., & Stein, M. B. (2000). Quality of life in individuals with
anxiety disorders. American Journal of Psychiatry, 157(5), 669–682.
https://doi.org/10.1176/appi.ajp.157.5.669
Mental illness. (2023, March). National Institute of Mental Health (NIMH).
https://www.nimh.nih.gov/health/statistics/mental-illness
Image Credits
Storyset. (2022). Awesome free customizable illustrations for your next
project. https://storyset.com/