The Bridge Between Mental Health Awareness and Social Connectedness

Project Overview
The Problem
According to a survey done by the World Health Organization, more than 50% of individuals in the United States will be diagnosed with a mental illness or disorder at some point in their lives. Although mental health is an equal counterpart of physical health, it is very often undermined in comparison. Because of the stigma tied around it, many individuals also struggle to find or give support when needed, and fail to develop healthy coping mechanisms that are used consistently.
The Solution
Although a myriad of reasons can contribute to the risk of mental health illnesses, mental health in general can be impacted and fluctuate over time depending on factors such as genetics, related medical conditions, the use of alcohol and drugs, life experiences, or extreme feelings of loneliness and isolation. While some of these agents are more controllable than others, it is essential that we limit the toll of those we can keep in check, and decrease the demands placed on ourselves.
​
Anchor is a platform aimed at achieving this and promoting healthier coping mechanisms by serving as an outlet for individuals to safely share their worries or seek advice, and do the same for other people. Through this, individuals can also potentially find others who might be going through similar situations and feel less alone. Anchor also allows users to monitor basic aspects that may affect their mental health on a day to day to better track their mental health overtime in relation to certain associated factors.
​
These features are available as a responsive website as well as on the mobile app for a more personalized and on the go access. However, while the responsive website and mobile app both provide users access to the same general features, the use cases for the two differ in their main focus
-
Mobile app - Forum; personal mental health monitoring and improvement
-
Responsive website - Forum; overall mental health awareness
Role
UX/UI Designer
Duration
January - February 2023
Design Process
User Research
In order to better emphasize with potential users, I started off the design process by researching about mental health and conducting user interviews to answer some of the key initial questions
-
What mental health related issues do users struggle with most daily?
-
How does mental health potentially differ between people of different ages?
-
What do users believe to be the biggest help when going through a difficult time in their life?
-
What are some coping mechanisms users use?
-
What are current non-medical mental health resources available in the market?
​
After synthesizing answers from the interviews, I determined the following to be the biggest pain points for users
-
Lack of mental health support from the community (e.g., family, friends, employers)
-
Low mental health literacy → difficulty in finding the right resources to reach out to, self-help techniques
-
Little to no accountability → difficult to monitor mental health over time


Competitive Analysis
In order to construct a solid foundation in which to design Anchor to maximize its potential and experience for users, I then conducted a competitive analysis to evaluate current mental health products and see what is available and what is lacking in the market as well as how these products are being received by the public. Based on this research, I decided to center my project direction around how to
-
Promote healthy coping mechanisms
-
Provide generalized mental health tracking that can be used by everyone
-
Increase mental health literacy
-
Generate mental health awareness and support in communities

Mobile App
Wireframes
I put together all my ideas for the mobile app version of my product first in my initial paper wireframes before generating digital wireframes and low fidelity prototypes from them. In this part of the design process, I made sure to focus on how to address user needs by putting myself into the shoes of a potential user and drafting the designs based on what will minimize cognitive load and create the most straightforward user flow of the product.
Iterations
With these wireframes, I created a low fidelity prototype to test on a group of participants and gather feedback. Based on the moderated usability study I conducted with 8 user participants, I iterated on my designs
-
Added a feature that allows users to add a private post that is only visible to them
-
This allows users to create a digital journal instead of only being able to generate posts that are visible to the public
-
Additional mental health tracking method
-
-
Made groups that the user are in more easily accessible
-
Added labels for the category icons in the user’s daily log
High Fidelity Designs
Straightforward Comprehension of Data
A big focus for this product was to create a more personalized user experience that allows users to easily visualize their mental health progress tracking over time. I solved this by creating charts that analyze and summarize the data inputted for each category in the user’s daily log, separated for view by week, month, or year.

Seamless Navigation
With a tab navigation at the top of the page, users can easily switch between browsing the forum, their groups’ activities, and viewing their own personal posts.
​
On the mobile app and mobile version of the responsive website, filter options are displayed in a horizontal scroll at the top of the page. This gives users a better context of what options are available to choose from and allows users to see their one or more selected filters in one go.

Accesible Resources
The public’s low mental health literacy and the difficulty in finding fitting mental health resources were big pain points that were revealed during the research phase. Anchor addresses this by allowing users to easily access mental health resources such as mental health organizations, mental health service centers, and relaxation practices from the navigation menu.
​
-
Website links will allow users to open that site directly on their chosen browser
-
Phone numbers shown are click to call, giving users the option to directly place a call to it
-
Users can also easily share and send any resource to someone else using the share icon

More Mockup Screens
Responsive Website
I repeated the design process for the creation of Anchor’s responsive website, making a few adjustments to the design to fit the use case better.
Site Map

Wireframes
Mobile
Tablet
Desktop
Mockups
Mobile
Tablet
Desktop
Prototype
Results & Next Steps
Although Anchor wasn’t released to the public, the final prototype for the mobile app as well as the responsive website were tested again with a group of participants. All participants were able to navigate through both the app and the responsive website with no confusion or error. Some feedback reviewing the product itself include
​“I really enjoy this app because it not only works as kind of a digital diary, but I can see it allowing me to make lots of new friends and people I can relate to.” - Participant A
​
“I love the idea of being able to go back and look at things like how I was feeling throughout the year and how active I was. It lets me learn about myself and gives me a better sense of what I need to work on.” - Participant B
​
“Even the closest of friends or family can’t always understand everything you’re going through and I love that this platform lets you find people that have or are going through the same things” - Participant C
​
"Sometimes I feel really sad when I see people going through the same difficult situations I have been through and I love that this platform lets me share my experiences and reach out to them so hopefully they don’t feel as alone as I did at the time.” - Participant D
​
If this were a project that were launched, moving forward, I would measure success of the product through KPIs, conduct more usability studies, gather more user feedback and anticipate new user needs to continue to update the product as needed.
What I Learned
Through this project, I learned the importance of figuring out how to address user pain points in a compact way that fits within the functionality of the product. Especially because I got the chance to design both a mobile app and a responsive website version, I was able to consider which features and purposes would be most important to highlight in each respectively, by anticipating user needs.
​
Though I wish I were able to get more direct user feedback and the chance to collaborate with engineers to bring the product more to life, I still realized the importance of staying consistent in my designs and how essential communication is, especially in a big project like this.


























































































