Mind House

Project Period
October - November 2021

Role
UX Researcher & Designer

Performance

  • User study activities

  • Ideation

  • Flow chart

  • Paper wireframe

  • Usability study

  • Lo-fi & Hi-fi prototype 

  • Design system

  • Accessibility considerations

  • Take-away

iPhone 12 Pro Mockup.png
iPhone 12 Pro Mockup (3).png
iPhone 12 Pro Mockup (1).png

Project Goal

Design an app that will educate on managing their mental health with personalised resources and help people book mental health specialists in their neighbourhood.

Slide 16_9 - 1 (2).png

Mind House is a tool that helps people access the resources to learn how to manage their mental health and book the specialist of mental health. Mind House’s primary target users include adults concerned about their mental health and would like to learn more about what they can do to deal with their mental health and book the mental health specialist nearby.

Personas

Mindhouse Persona.png
MH Persona1.png
MH Persona2.png

User Journey

UJ MH (1).png

Painpoints

Personal preferences 

People don't want to expose their mental health issues and causes, so the app should have the security function for their personal preferences and visit records.

Authorized articles and other resources

Too many mental health resources are scattered around, and people are concerned about their credibility so that the app platform can organize and authorize the resources.

Booking the specialists 

People want to find specialists related to mental health when their symptoms get severe, but they don't want to expose their concerns.

How might we help access the articles and other resources related to mental health and release their mental problems and stress?

Ideate - Crazy 8

I did a quick ideation exercise to develop ideas for addressing gaps identified in the competitive audit. My focus was explicitly on personalised resources of mental health and booking the mental health specialist features.

crazy8MH.png

Flow Chart

Flow chart MH (1).png

Paper Wireframe

MH WF2.png
MH WF1.png

Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs for the Mind House app. These designs focused on delivering personalized guidance to users to help manage their mental health.

Welcome.png
Sign in.png
Sign up.png
Preferences.png
Sign in-1.png
Sign up-1.png
Homepage.png
Preferences-1.png
Articles.png
Articles-1.png
Booking specialist.png
Booking specialist-1.png
Booking confirmation.png
Profile.png

Lo-fi Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing a mental resource and booking the mental health specialists.

Screenshot 2021-11-22 at 9.14.52 PM.png

Usability study: parameters

Study type

Unmoderated usability study

Participants

5 participants

Location

South Korea and Hong Kong, remote

Length

30 - 60 Minutes

Usability study: findings

Checking the today's mood

People want to be aware and check their mood for today.

Category of stress causes

People want to find resources and specialists who are focused on their own problems of mental health.

Finding popular specialist

People want to find the popular and most promising specialist to book.

Mockups

Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to choose their mood of today and recommended articles that personalised.

Before usability study
After usability study
Screenshot 2021-11-24 at 3.38.56 PM.png
Screenshot 2021-11-24 at 3.38.06 PM.png

Additional design changes to provide clearer filters and preferences of how to choose the specialists.

Before usability study
After usability study
Screenshot 2021-11-24 at 3.46.29 PM.png
Screenshot 2021-11-24 at 3.45.41 PM.png

Hi-fi Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes after the usability study.

Screenshot 2021-11-23 at 10.14.26 PM.png

Design System

MH Design System.jpg

Accessibility Considerations

Clear Labels

Clear labels for interactive elements so that screen readers can read.

Personalized
Recommendations

The initial focus of the home screen on personalized recommendations help define the primary task or action for the user.

Take-aways

Impact

Users shared that the app made Mind House seem like something they could help reduce stress. One quote from peer feedback was that “the Mind House  app helps bring caring about the mental health to a personal level in a way that’s easy and engaging.”

What I learned

I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs to be helped me come up with feasible and valuable solutions.