The Depression and Bipolar Support Alliance (DBSA) envisions wellness for people living with mood disorders. So they asked us: "How might we empower all individuals to self-manage their mental health and remove the barrier of cost?"
Additionally, DBSA would like something easy to use, easy to maintain, allow access to support groups and users should be able to join from anywhere.
Timeline
2 Days
Team
Khanh Cao (Me), Tiffany C., Sheryll V., Erin Y.
Role
UX Researcher, UI Designer
Tools
Figma, FigJam, Google Drive, Zoom
Based off the problem statement, business needs, and target user base, we narrowed our views to:
To make it easier for users to get access to the resources they needed, we wanted to create an onboarding process that would simplify what resources they would get recommended and easily navigate them to support groups and videos.
We decided to use DBSA’s “Wellness Wheel” to help with guidance for the user. We also helped advertise their support groups and their different resources.
With DBSA offering so many support groups, we wanted to make sure they were immediately recommended in the app. Users also would have access to a dedicated calendar to remind them of their upcoming support groups.
Looking at DBSA’s presentation and website, we looked into what resources they had available. We found out that they had self assessment tools such as the “Wellness Wheel” which showed 7 key areas of wellness developed by DBSA. They also had a depression scale, mania scale, and several trackers and other resources such as crisis lines, educational resources, as well as plenty of peer support groups.
After seeing DBSA’s problem statement, we wanted to do some research. We wanted to better understand the problem space and the target user.
We started off understanding the barriers to self-managing mental health. This included researching articles from the NIH, World Mental Health Report, Forbes, and the National Council for Mental Wellbeing.
We looked at five different mental health apps to see what solutions were already available for individuals to take their mental health into their own hands: Happify, Finch: Self Care Widget Pet, Calm, MindShift CBT, and MoodKit.
Overall, we found that the features of each different app were really good but for the most part, the apps could be wordy, cold, uncomfortable, and difficult to navigate.
To best figure out how to proceed with our solution, we did an affinity map of all the features that we had liked from the comprehensive analysis and grouped them together.
We found themes that were fitting answers to helping individuals with their mental health along with ways to help make resources more accessible for everyone.
We wrote down the list of features we wanted in this app and then prioritized what was most important for us for this project. We decided to focus on the onboarding experience.
After trying to figure out the screens we needed to create, we ended up adjusting the flow to prioritize joining a support group.
We discussed the features we would want on the homepage and then using the user flow to guide us, we started planning out what screens we needed to design.
In order to be able to design collaboratively, we decided to jump into wireframing on Figma. We all started to set up general layouts on each screen without focusing too much on the little details and just figuring out what content we wanted.
After laying out everything and finalizing the content we wanted on each page, we started thinking about the design aspects of the project.
DBSA had given us their branding color to work with (Blue - HEX #009CDC). We decided to keep the UI simple and clean to decrease any feelings of visual burden.
We chose to stick with a light UI using their blue branding color as the primary accent color. And the other colors that also appeared predominantly throughout the design were the “Wellness Wheel” colors which we tried to maintain throughout the app for continuity.
For the font, we just wanted something more commonly used to give users that sense of familiarity so that they could start to build a relationship with the app. So we chose Inter and used several different weight and sizes throughout the app.
In order to increase friendliness in the app and make it less intimidating, we added in a panda bear character to be a buddy alongside the user journey so that the user wouldn’t feel as lonely.
We used an already developed design system as our base and worked off of that. We kept all of the buttons as similar as possible for consistency and mainly used white as our button color and only added color to call attention to certain buttons.
We tried to use icons that best represented what we wanted to convey to users. With the articles, video, podcast, and webinar icons, we wanted to use these icons to decrease visual activity.
Due to the short time limitations, we chose to do user testing with friends and family. Our design was perceived positively. Most of the issues we had to solve involved minor layout rearrangements and rewording certain phrases to make more sense. The biggest issues were the meaning and the look of the “Emergency Crisis” button and the assessment questions.
The goal was to call attention to the “Emergency Crisis” button. The button was red which popped out against the light UI. However the original design made people think that you would get connected to an emergency number directly.
The assessment questions were a little confusing because of how vague they were, so to help with user understanding, we added additional explanations or examples to each question.
None of us had met prior to the hackathon. Teamwork doesn’t always come naturally especially with such a diverse group who had never worked together before. We learned so much during this experience about proper communication and ensuring our attitude stays positive to provide a creative and fun atmosphere.
We can’t solve everything, especially when we’re only given the timeframe of a weekend. Looking back at the hackathon with more time and a calmer head, I can come up with a more formed solution now. But during the hackathon, we were trying initially to do so many different ideas and were panicking due to time constraints that we ended up missing a more comprehensive assessment for our product.
When designing for this project, I had set up all the frames that we were planning to do for our project and then all of us started tackling the frames in any order instead of being assigned specific pages to work on. By doing this, we were able to help each other out and figure out better layouts than if we had split up the pages and by doing this we were also able to work together to keep the spacing even and consistent on all pages.
