Problem/Challenge
In the wake of both the pandemic and racial violence, there’s the potential for an increase in the number of people impacted by mental health conditions. Increasing diversity, equity, and inclusion in mental health is not an easy task. 
Design an inclusive third-party mobile app to help educate others, create awareness, encourage action, and/or facilitate access to minority mental health care for the misunderstood, overlooked and underrepresented communities.
My Role
My process began with research, competitive analysis and ideation with wireframe sketches, and ended with creating a high-fidelity prototype that was qualitatively tested with two users. I took leadership with creating the branding + look & feel.
Timeline: 2-3 days
People: Kyle Ang (me) & Laura Soyoung Lee
Platform: Mobile

Skills: Competitive Analysis,  Feature Prioritization, User Research, Prototyping, User Testing, Visual Design, Branding

The Solution
SafeMinds is a mobile app that offers accessible mental health care services to LGBTQ+ Youth ages 13-25 years of age. SafeMinds connects youth to a trained counselor online via call or chat,  offers peer-to-peer group chats, and a Stories and Resources section as a way to both educate and empower teens & young adults in need of support.
.   .   .
SafeMinds Preview
Onboarding - Crisis Option
Onboarding - Crisis Option
When users indicate suicidal ideation, more urgent options to connect with counselors appear.
When users indicate suicidal ideation, more urgent options to connect with counselors appear.
After onboarding, users always have the option to indicate if they are in crisis or to explore for more.
After onboarding, users always have the option to indicate if they are in crisis or to explore for more.
Inclusive options to ask what users identify with.
Inclusive options to ask what users identify with.
Illustrating main struggles for both LGBTQ and youth in general.
Illustrating main struggles for both LGBTQ and youth in general.
Example of prototype flow when choosing what user struggles with.
Example of prototype flow when choosing what user struggles with.
Group chat with peers for support and advice.
Group chat with peers for support and advice.
Overall onboarding flow.
Overall onboarding flow.
Stories and Resources section include articles to educate users on topics and to share with others.
Stories and Resources section include articles to educate users on topics and to share with others.
.   .   .
The Process
Through researching more about our target audience and minorities  — we learned about the obstacles  LGBTQ youth may struggle with.
Then, I led brainstorming questions to get us thinking on key features and prioritizing what can help with our objective in "educating, creating awareness, encouraging action, and facilitating access" for LGBTQ youth.
Key Features
- Free access to a trained counselor both in crisis & general issues (combats financial inaccessibility and generalization of mental health struggles)
- Access on one's phone and caters to preference of counselor & identity (privacy and awareness of individual differences and cultures)
- Peer to Peer groups & Stories/Resources Section (Cultivates sharing and builds community while educating to de-stigmatize mental illnesses/mental health issues)
Competitive Analysis
We examined and downloaded multiple apps that relate to mental health and provide similar services like therapy such as — BetterHelp. We also studied apps like Headspace and Calm to understand what they did with their look and feel and how they incorporated soothing and calming aspects of their design in their user interface.

Since we wanted a group or peer-to-peer group chat feature, we looked at Linkedin's event or group features and how they established this UI as
an example for what may work for the information we wanted our app to convey — such as name of group, a quick way of understanding what it was about and how to join it.
Wireframes & Prototyping
We started with the onboarding as the most urgent feature we have is to connect users who are in crisis to the help they need as quickly as possible. We added the "I'm in Crisis" feature to allow users to immediately select a counselor rather than go through more questions regarding their identity or what they are struggling with.
Then we worked on the flow for choosing a counselor. We ensured there would be a variety of options and considered what kind of counselor LGBTQ youth may want. To facilitate and humanize the trained counselors, we believed a profile with a little "About" section would achieve this and reviews for what others' experiences may be. Seeing that others are reaching out may be a good incentive for users to realize it is okay to also reach out for help.
We included a group chat feature so peers can talk to each other about their issues if they are looking for general support. One issue this may have is people lying about their age and we would not be able to validate this.

It was quite a challenge to depict enough information in such a small amount of space on mobile, so we decided to use hashtags — which also seems to come more natural to GEN-Z's age range and internet culture.
User Research and Testing
With little time, we were only able to ask two users to try our app as we were making it. Both made comments about the gradient and visual design being "calming." One mentioned it was nice to get to the counselor quickly and skip the onboarding as they felt it would be annoying to have to go through that if they were in crisis.

We learned that having a quick onboarding flow that was as simple and quick as possible was the best in this scenario. So we included the "I'm in Crisis" option multiple times, and it is offered again when users indicate if they are having suicidal thoughts.
.   .   .
Reflection & Learnings
It was both a lot of fun and a bit stressful cranking out this design challenge with only a few days as our time constraint. 

I learned to focus more on building out the key features and flushing out the flow before getting caught up with the look-and-feel and visual design. Sometimes small details can be overlooked temporarily to focus on the big picture — which is the user flow and prioritizing features. 

It was most challenging to validate our choices through user testing with such a small amount of time. I found it fun to create a flow that was inclusive of all options while still being quick and simple. However, it was most satisfying solving our problem with creating elements for counselor and group chat options while showing enough information in small spaces with hashtags.

It created something interesting and unique to our app where youth can use hashtags to label groups and bond over their communities. It also is useful as a search feature similar to social media sites they already use, like Instagram. 
Next Steps
After hearing back from Adobe x Trevor Project, we learned that we won honorable mention, meaning that we were among the top 15 out of 77 teams that were rated highest on categories of "Target Audience, Innovation, Visual Design, User Experience, Objectives."

Next time, I'd love to do more research on features and explore more ways to make our idea more creative. I think we could do something fun with the hashtags. It would also be could to create actual personas after doing more user testing and interviews if we have more time in the future.

Explore More Projects

Back to Top