branch out
The product: This app and responsive website is a place for users to easily find and access their mental health resources, especially resources catered to them.
The problem: Users want more adjustment in the mental health community. To be able to cater more to the user.
The goal: To easily update preferences and cater resources to each user.
Understanding the User
User research summary
Before conducting user research, I didn’t know much about what to look for when creating a mental health resource app. After conducting a competitive audit, this community and how to go about mental health resources were vast. I sent folks that use mental health resources a Q&A to create my personas. These folks access these resources through apps, websites, videos, etc. After this research, I learned that there was limited availability in these resources like missing group sessions. Other frustrations were being unsure of specific terminology to look up or find a group/person/resource that fits their needs.
User Personas
Ideation
Starting The Design
Digital Wireframes
This user flow focuses on updating the user’s therapist. The user can update their preferences by going through a quiz that will filter out therapists that don’t match their results. From there, users can click on the therapist’s profiles for more information before setting up a new therapist.
Once the user updates their therapist preferences, they will be given a list of therapists based on the quiz. Each therapist can be selected for more information before confirming the selection.
Usability Study
Parameters
Study Type:
Moderated usability study
Location:
USA, Remote
Participants:
4
Length:
15-20 minutes
Findings
More details
Users would like more options during the quiz phase like adding a question for type of therapy or a “no preference” to each question.
More spacing
Users would like more spacing between the choices. The current spacing was more for a mouse click versus a finger press
Compare feature
Users would like to add more to the filter phase by delving into the compare feature. This way, users can do side-by-side comparisons instead of going to the previous page to check.
Refining the Design
Mockups
Before the usability study:
After the usability study:
The mobile app
The website
Site Map
tablet version:
pc version
Accessibility Considerations
Checked to make sure that the colors were accessible. Would always make sure to use the darker color for fonts on lights backgrounds and vice versa
During the update preferences stage, the buttons are larger, a good size for thumb presses
Each bubble has captions and is labeled properly
Responsive Design
The responsive design website differs from the app! It's more of an informational hub for folks to find their mental health resources. Users are able to search and narrow down which resources that they need. If they are unsure of what they are looking for, there is a quiz that should help narrow down their search.
Responsive Designs
Mobile: iPhone 13, 1 column
Tablet: iPad Pro, 2 columns
Desktop: Macbook Pro, 4 columns
Sticker Sheets
Going Forward
Impact:
User testers mentioned that they are really interested in the app and would like to see more growth in the other options than just to update therapist user flow. They mentioned that they would use an app like this since mental health is important to them.
What I learned:
I appreciate mental health and being more aware of mental health. I see why it’s important for everyone to have access to these resources and having it ready to go, easy to access, and catered to the user makes it less frustrating
Next Steps
Work on other features in the app like the mood or journal check-in. During the user testing, users were curious as how these would be used
Look into developing the “Guides” section in the app since it’s to cater more to the user. This will help knock out the unsure feeling of what to look up
Delve deeper in the other pages on the responsive website.
attributes:
icons found on flaticon