Overview

Mental Health is a serious topic that should be addressed by everyone who thinks they need help. It can be concentration issues, emotional stability problems or as serious as depression and anxiety.

The first step towards a healthy recovery is identification and Well Bing does just that.

Objective

The main focus of this project is to create a mental health App for iOS and Android users.
It will help its users identify the risk level of their mental health with an uninterrupted flow that should motivate the user to take a mental health test if they are not feeling well.

The test results should bring awareness of their level of mental, emotional, or behavioral risk while also providing the tools to seek help and support.

  • Low Risk - Meditation Time

  • Medium Risk - Advice from Healthcare Professional

  • High Risk - Use of “SOS” button for immediate support

Stakeholder

Career Foundry UI Design Course

My Role

UI Designer

Timeline

1 Month Project

The Tools

UI Project Plan

Part 1: Research

  • Competitive Analysis

Part 2: Design

  • Flow Diagram

  • Jobs to be Done

  • Mockups

Part 3: Evaluation

  • User Testing

  • Final Design

  • Agile Retrospective

Part 1: Research

Competitive Analysis

I noticed from my analysis the use of tests, illustrations, and even an SOS button from competitive apps but, I couldn’t find a feature to help the user understand their specific mental needs. For that reason, I decided to make Well Bing. An app focused on helping its users get the help they need.

I also discovered that 2 of the apps I was analyzing (Breeze and Wysa) were designed in dark mode so I took the challenge and went with a similar color palette.

Breeze

Main Takeaway

  • The use of illustrations to indicate the mental health state of the user is very appealing and encouraging.

Wysa

Main Takeaway

  • The SOS button is a great tool for emergencies when the user feels unsafe.

Part 2: Design

Flow Diagram

With a simple question, users can let the app know if they are feeling either Good or Bad.

How are you feeling today?

  • If they feel good they can write down why in a journal-like feature.

  • If they are feeling bad, they would take a test to identify their mental health risk level and get proper advice.

Jobs to be Done

To be able to prioritize and get the first iteration of the app started, I decided to assign just 3 JTBD’s that would give the user the most important features they could use in this initial phase of the design process.

JTBD #1

  • The user should be able to take a Test to get insight about their level of mental health.

JTBD #2

  • The user should have easy access to an SOS button that provides emergency assistance.

JTBD #3

  • The user should be able to get in communication with a healthcare professional if desired.

Mockups

iOS

For the iOS version of the app, I studied the Human Interface Guidelines (HIG) from Apple to better understand its design boundaries and how much creative freedom I could use.

From small details like corner radius and haptic interactions to more noticeable things like specific colors and fonts, I incorporated everything I studied into my design to reflect a clean and native iOS app look and feel.

Android

For the Android version of the app, I studied the Material Design Guidelines from Google.

I was impressed by how interactive their guidelines are with their adaptable design system. It makes the designer’s job an easy one with very few roadblocks in the design flow.

Part 3: Evaluation

User Testing

Objectives

  • The user should be able to locate and take the mental health test without issues.

  • The user should have the ability to find the SOS button at any point in time.

  • The user should be able to get in touch with a healthcare professional.

Goal

  • To observe and assess the interaction of the user with the website to be able to either confirm the features designed are useful and functional or if some, or all, features need further design work.

Findings

  • The title on the SOS page could use more weight to pop more.

  • Flow is super intuitive and easy to use.

  • The ability to scroll down for more questions and have a Finish button.

  • The illustrations and color palette looks great.

Solutions

  • I added weight to the SOS page title as advised.

  • More questions were added to the mental health test and the ability to scroll down so users can finish the test.

Final Design

Agile Retrospective

What went well?

After working with 2 different design guidelines for the same app, I found that it is not as difficult as I initially thought. By using the data from the competitive analysis and user testing, I got more confident in the final design and its ability to meet the user’s needs.

What didn’t go well?

The main challenge I encountered was getting use to each design guideline overall. It felt like I was learning two languages simultaneously but, I eventually got used to both. Once I found things I liked about each one, it got better. I really liked how easy to understand the Materials Design Guidelines are and how clean and well structured the Human Interface Guidelines are. Both great in their own way.

What can be improved?

For the next iteration, I would like to integrate a reminder to help the user refocus their attention on the present. This feature along with free courses, a journal to track mental health, and an AI assistant that could listen and respond in real-time, could serve as great additions to the future of the app.

Previous

Quick Prep - Recipe Website