BetterMind

BetterMind is a hackathon case study for a personal wellness tracker app that matches users to community events, DBSA’s peer support groups, assessments, and mental health information and resources.

My Role

User Research
Wireframing
Prototyping
Mockup

Team

6 designers

Tools

Figma

Timeline

26 Hours

The Design Challenge

This project was part of Girls in Tech SF Hacking for Humanity 2022. The Depression and Bipolar Support Alliance (DBSA) tasked us with the following challenge:

How might we remove the barrier of cost and access to care, and empower all individuals to self-manage their mental health?

They provided the following desired outcomes:

Solution

My team, Ctrl Alt Elite, was awarded second place in the hackathon. Our solution was an mobile app focused on the following:

TLDR;

The following video is a 4-minute overview of our solution that was submitted to the panel of judges.

Ideation

We started with a team brainstorming session on FigJam. Together, we came up with some initial ideas, assumptions, and barriers people may face when seeking mental health resources.

We followed this up with a rapid brainstorming exercise where we wrote down as many ideas as possible in the span of 5 minutes. Each team member had a sticky note to write on. Once the 5 minutes were up, we discussed each idea and the assumptions they were based on.

We finalized a list of features we all liked, but wanted to get user input to confirm or deny our assumptions before moving forward.

User Survey

I created a Google Forms survey to get a better idea of how people might use mental health tools like the one we wanted to create. We received 22 responses from people ages 21-70. We wanted a large age demographic because DBSA serves people ages 18-80.

If you have struggled with your mental health in the past, what steps did you take to improve it? And did it work?
If you have issues in the future with your mental health, how would you seek to improve it?
Do you keep track of your fitness in any way?
Would you be interested in staying up to date with extracurricular and volunteer events in your community?
How do you improve your mental wellbeing?
Please rate how easy it is for you to find relevant mental health resources.

Our findings confirmed the following assumptions about our potential users:

Features

We combined our initial brainstorming and user insights to finalize a list of app features.

Sitemap

After finalizing our features, we created a sitemap. The content fit into four main categories: profile, resources, events, and community.

Wireframes

We divided the low fidelity wireframes amongst ourselves to make the best use of our limited time. I took over the wireframes for the profile, mood journal, affirmations, and progress tracker screens. I choose to create mine clearly and directly in Figma as it was the fastest way for me to create wireframes to share with my team virtually.

After each of us finished our wireframes, we presented our designs and gave each other feedback for the next iteration. Here’s a glimpse of our combined wireframes.

We then implemented each other’s feedback into our mid-fidelity wireframes. Because of the strict time limit, we used a mobile and web ui kit from the Figma community to expedite the design process.

Color and Type

We wanted to keep the color palette of the app consistent with DBSA's currently branding to establish a clear connection between the organization and BetterMind. Their website and print materials primarily use the blue, magenta, and peachy orange colors seen below. In addition, we pulled in the colors from their wellness wheel in order to color-code the tags that identify resources relating to each category of the assessment. These colors where added to the Figma library for ease of use during design.

Because of the vast amount of text-based resources on the app, we knew we needed a body font that was notoriously easy to read, which lead us to Helvetica. Because headings are used more sparingly, we were able to pick a font with more character. After comparing a few options, we chose Quicksand because of it's approachable and pleasant look.

Final Designs

Onboarding:

The user's journey through BetterMind begins with an assessment, which is a combination of basic demographic questions and DBSA's Wellness Wheel assessment. The data obtained during onboarding is later used to curate recommendations for resources.

Resources:

Resources are linked to each category of DBSA's Wellness Wheel using tags like social, environmental. The categories the user scored lowest on would be suggested first. If users need further assistance, they can use the AI chatbot in the resources tab.

Events:

Users can explore upcoming community events and support group sessions. The events tab uses demographic data to recommend cultural and identity support groups, such as those for people of color, veterans, and the LGBTQ+ community.

Main Takeaways