Mobile app to help promote mental health

Project Description

Singaporean youth's mental health is on the red flag, with 79 of them taking their own lifes last year. One of the cause is the lack of clear access to help and resources. MAVI is a mobile app created to help youth gain access to various types of resources that could help them better themselves.

Design Process

Identifying the Problem with Research

Considering how broad healthcare as a topic is, we used secondary research to narrow down the area of focus. One particular article released by CNA has drawn our attention. The article reported that suicide is still the highest leading cause of death among Singaporean youths and even detailed some of the causes. As youths ourselves, we thought this was heartbreaking and an issue worth pursuing.

Our initial assumption was youths had trouble finding mental health information online. To verify this assumption, we formulated a survey to get responses from our target user. We asked questions about the experience of finding resources online, the sources and also the usefulness of the information.

From the 54 responses gathered, we verified our assumptions, with

Key insights from research

1. 1. People find confusing and overwhelming to find information online
2. 2. People have trouble locating mental health services
3. 3. People cannot effectively assess their mental health
4. 4. People feels cognitive overload

Define

We formulated a problem statement to summarise our findings and the gap identified.

Problem Statement

Many Singaporean youths lack the guidance, time and effort to locate suitable treatments. Besides, the myriad of information online is overwhelming for those who already had trouble fighting their inner demons. These limitations prevent youths from bettering themselves and can even deteriorate their mental well-being. There needs to be a way that allows youths to access to get information on mental health easily and reliably.

Persona

To kick start the design process, I suggested to create personas that we all can agree on so that could visualize our target users. Michelle was our first persona who represents someone who needs guidance on improving her mental health; Joshua was our second persona who represents someone who is looking for mental health services.

Ideate

As part of the brainstorming process, each member made sketched concepts of the applications. Individually, we experimented with layout, UI elements and the flow of the application. Then, we came together to review and synthesize our ideas, to pick out the strongest part of each.

Next, I worked on the wireframe using Figma. I focused on developing flow for three parts of the application: the initial onboarding flow, assessment flow and resources flow. By creating a wireframe, the team was able to visualise the system more precisely and discuss clearer about the UI elements.

Following this, we conducted an internal ranking session to determine which features we should prioritize (since we couldn't implement all).

Features

Based on the top priority features ranked in the internal ranking, we developed 6 main features for the app. Following are the mockups for the app features.

Prototype and Test

After completing the mockup, it was important to test the flow of the app with real users that fit our personas. For this purpose, we used Figma to animate our screens and create a prototype that function to some extent. Using the figma's prototyping feature, we created a clickable prototype for user to test out.

We then conducted a user testing, which had revealed several areas of improvement. Both UX and UI issues were identified:

Brand Identity

We named our application "MAVI". The name is an acronym for Mental Assistance & Valuable Information. The logo is composed of an M and A characters. The "M" signifies the mental aspect of the app and the "A" symbolises an open heart, indicating the empathy we want our users to feel from the app. These two characters come together to give a medical symbol-like logo, that represents our focus on mental healthcare.

We used purple as our primary colour because we wanted give a sense of calm to users. Besides that,purple is also associated with creativity, which we hoped could inspire users on the possibility of growth when using the app. We also included indigo as a secondary colour to create contrast with the primary colour for better visual interest. Last but not least, we included yellow for our danger alert and error message.

Final Design

Reflection

Through developing MAVI, my team and I have come to realise the importance of understanding users' needs. By understanding the user's experience, we can build features that fill in the gap and create a delightful experience. In particular, we observed that it is the micro-interactions and fine details that sometimes make the most impact to a users' experience. Small navigational details like back buttons were sometimes more important than we had assumed. Lastly, we were surprised to find out how our app could reduce the time spent on finding and getting mental health resources by 70%! This further convinced us of the ability of design to problem solve in a real way.