Overview

*From this Hackathon I worked with DBSA-SF for 6 months to create a functioning progressive web app based on the following design sprint.

Timeline: October 15th & 16th, 2022 (2 Day Hackathon)
Team : Andrea Rule, Anne Nguyen, Katherine Bohorquez, Megan Bogenschutz, Tiffany Lau, Yang Cheng

Personal portal for DBSA (Depression and Bipolar Support Alliance) of San Francisco. Taking the extensive resources provided by DBSA and tailoring to create a more personal, comprehensive and accessible platform for potential users.

Client Vision & Goals

Continue to provide hope, help, education, and free peer support.

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

  • Ideation

  • Journey & Site Map

  • User Flow

  • Mid-Fidelity Screens

  • Branding

My Role

  • Figma/Figjam

  • Google Forms

  • Useberry

Tools Used

Problem Space

According to the CDC, more than 50% of Americans will be diagnosed with a mental illness or disorder at some point in their lifetime. With the rising costs of healthcare and a shortage of therapists, many people move through life untreated or even diagnosed.

Solution

Motivate people to track their mental health, make changes to improve it, and find relevant resources, while being accessible.

  • Self-assess with easy-to-use tools

  • Dedicated support resources for underserved

  • Can join from anywhere

Process


The process for this project included the following:


Research & Analysis

Secondary Research

Competitive Analysis- What can we gather from DBSA and similar organizations to improve user accessability?

Competitive Analysis- Key Takeaways

Starting with a very broad approach, each team member focused on one of the following overarching themes.

Check out our bulleted notes or a quick summary below.

Current DBSA Website & Mobile App:

App not currently in use, the website has a plethora of resources but how will someone find them if they don’t know they are housed here?

Support Sites/Top Searches:

Useful stories of others with shared experiences were great but hard to find, and impossible to leave comments on.

Other Mental Health Apps:

Some requested insurance and charge a fee. Others were a great inspiration for future development and UI features.

Access for All:

Exploring what does access to all mean. Is mobile access accessible to all? How might we make DBSA more visible in places that have free access like local libraries. -noted for later discussion.

Primary Research

18

participants

37.5%

found it hard to find relevant mental health resources 

64.7%

would stay up to date with extracurricular and volunteer events in their community

Ideation

Brain before the storm, with the limited time we started by listing assumptions, and barriers based on our time frame to create some refined design perimeters.

How Might We remove barriers and cost and access to care, and empower individuals to self-manage their mental health?

Making notes, DBSA previously had a Wellness Tracker app named Bipolar App of the Year by Healthline Magazine in 2016. Since DBSA is a volunteer based service, this app was not easy to maintain and eventually stopped working and being used.

Site Map

Using the vast resources provided by DBSA we decided that the MVP for the app navigation needed 4 components: Home, Resources, Events, and Community.

Style Guide

DBSA’s logo contains a vibrant blue they wanted to keep incorporated within the app design. With the combination of the colors used from another element on DBSA’s website, the wellness wheel (pictured below), we decided to also incorporate a rich deep purple with hints of a peachy orange to assist in creating an overall calming color story,

Application Icon

What’s in a name? We decided to change to app from a Wellness Tracker to something more elevated, BetterMind.

User Flows

Flows were created based on one user’s journey from the home screen to each of the navigation components. These were limited to one activity that was completed within each component due to time constraints.

Design

Using our navigation bar as our guide we quickly created a variety of sketches based on standard screen layouts to help make information easy to view without being overwhelming. These low-fi creations quickly became to screens used in the prototype below.

Handoff

For this Design Sprint Hackathon we were allowed to create a 4 minute video to present our pitch to DBSA-SF and the panel of judges. Watch my teammate Katherine Bohorquez present our work below:

Final Thoughts

After the 2 day Hackathon, with 21 total teams, our group placed 2nd overall demonstrating that our research was able to lead to human centered design.

Currently a team of 12 of designers including myself, are working to create an easy-to-maintain progressive web app that allows users to easily access these educational resources while also being able to find a support group and a safe place to document their mental health journey.

Suggested Next Steps

  • Explore what access for all could really mean in a broader concept, by removing technology.

  • User testing/interviews, learn what would make this a go-to app for users.

  • UI development- explore consistency within specific tools.

  • Explore legal use of concept name and logo for BetterMind.

Next
Next

Karunaverse Case Study