Project time:
24 hours, VXP Protothon, August 2021

Tools:
Figma, Google Doc

My Role and Contribution:
Graphic Design, UI/UX Design

Project Management, Concept Ideation, Prototyping

Result: Top 8

Moodscape

Challenge:

Mental health has become a pressing issue, particularly in the wake of global events like COVID-19. Many individuals struggle to understand and effectively communicate their emotional state. This lack of clarity can lead to feelings of isolation, anxiety, and depression.

Problem:

Existing mental health resources often focus on diagnosis and treatment. There is a need for tools that empower individuals to proactively manage their mental well-being through self-awareness and effective communication.

Outcome:

For this protothon challenge, my team has developed Moodscape to help people know better and talk better about their mental state. Moodscape was designed to address this gap by providing a personalized platform for users to track their emotions, gain insights into their mental health patterns, and develop healthier coping mechanisms. The app aims to foster a more open and supportive environment for discussing mental health.

A Mental Health Companion

Moodscape is a mobile app designed to help individuals better understand and manage their mental health. By tracking emotions, providing personalized insights, and facilitating open communication, Moodscape empowers users to take proactive steps toward improving their well-being.

Mood Tracking:

Helps users track their mood, log journal entries.

Meditation & Stream:

Helps users destress and tune into live AMAs hosted by psychology professors.

Connecting:

Anonymously chat with mental health professionals and friends.

Design Process

Problem Identification

The theme of the Protothon was "Mental health literacy and best practices." Following the theme announcement, I facilitated the team's ideation process by initiating a problem-statement definition exercise. To ensure a comprehensive exploration, I emphasized the importance of addressing a diverse range of topics.

Each team member contributed to the brainstorming session by posting sticky notes outlining relevant challenges within the theme. After a 10-minute ideation period, we collaboratively categorized these sticky notes.

Through this process, we identified three key challenges: limited access to mental health resources, insufficient education on mental health topics, and a lack of self-awareness regarding mental health issues.

Self-awareness + Accessibility + Education

During the problem statement definition phase, I conducted a literature review to identify relevant research. My investigation led me to the study titled "Mental health literacy survey of non-mental health professionals in six general hospitals in Hunan Province of China." The findings of this study can be summarized as follows:

  1. Participants could not correctly identify mental disorders.

  2. Lifestyle interventions are preferred.

  3. Participants rated listening or talking to the person higher than encouraging the person to visit a psychologist.

  4. Mental health disorders can reoccur.

Furthermore, other papers stated the importance of education, awareness, connections, accessibility, and reducing social stigma.

Reference: Wu, Qiuxia et al. “Mental health literacy survey of non-mental health professionals in six general hospitals in Hunan Province of China.” PloS one vol. 12,7 e0180327. 5 Jul. 2017, doi:10.1371/journal.pone.0180327

Competitor Analysis - Lack of confidentiality

A comparative analysis of four popular self-care apps revealed a significant gap in addressing the social stigma associated with mental health disorders. This limitation was a key barrier to seeking help and building meaningful connections.

Persona - Sarah, the Introverted Insomniac

HMW Questions:

  • Sarah would like a place to open up and talk. However, she finds it intimidating to talk to her fellow friends or her family members due to social stigma.

  • ​Sarah finds it hard to navigate the ample amount of information on the web on her own, which she feels it is riddled with misinformation. She wants to have a better understanding of her condition and find a solution for her insomnia.

Based on our research and problem definition, we developed a detailed user persona, Sarah. By understanding Sarah's behaviors, needs, and pain points, we identified two key areas of focus: creating a safe space for her to express herself and providing her with a deeper understanding of her condition.

Age: 34
Occupation: Currently unemployed due to the pandemic

Lifestyle: Sarah is an introverted individual who often finds social interactions draining. Her introspective nature can make it difficult for her to express her thoughts and feelings openly. She enjoys solitude and finds comfort in quiet activities like reading and spending time in nature.

Mental Health: Sarah is struggling with insomnia, which has significantly impacted her quality of life. Despite her efforts to pinpoint the underlying causes of her sleeplessness, she remains unable to identify specific triggers. Her inability to relax and her hesitation to discuss her condition with loved ones highlight the emotional and social challenges she faces.

Goals: Sarah is seeking professional guidance to understand the root causes of her insomnia and explore effective strategies for addressing her sleep difficulties. She is motivated by a desire to improve her overall well-being and quality of life.

Challenges:

  • Social Anxiety: Sarah's introverted nature can make it difficult for her to connect with others and express her emotions.

  • Emotional Isolation: Her inability to openly discuss her insomnia can lead to feelings of loneliness and isolation.

  • Sleep Deprivation: The lack of sleep is affecting Sarah's physical and mental health, making it difficult to concentrate and participate in daily activities.

  • Self-Doubt: Sarah may struggle with self-doubt and negative self-talk due to her ongoing sleep issues.

Motivations:

  • Improved Quality of Life: Sarah is eager to improve her overall well-being and regain a sense of control over her life.

  • Better Sleep: She is motivated to find effective strategies to address her insomnia and experience restful sleep.

  • Emotional Well-being: Sarah hopes to develop healthier coping mechanisms and improve her emotional resilience.

Narrow down the needs

Using a feature prioritization framework (shown in the diagram), we identified and discarded features that fell into the bottom right corner and did not contribute significantly to our overall goals.

I developed a low-fidelity prototype in Figma to establish Moodscape's overall structure and user flow. This initial design focused on determining the required number of screens and the basic layout for each frame, without delving into specific styling or visual elements.

Ideation - Grayscale Wireframe

Following the creation of our medium-fidelity designs, we transitioned to high-fidelity development. During this phase, the other UI designer and I collaborated to identify opportunities for refinement within the user flow

Iteration

Livestream + Meditation feature

The combination of frames into a single interface allows users to view all media content in a centralized location, reducing the clutter of unnecessary frames.

Upon arriving at this page, Sarah has the option to choose a soothing song to enhance her meditation experience or participate in a live "Ask Me Anything" session with a mental health professional. This interactive format allows her to ask questions and receive real-time responses.

Chatting with friends feature

This modification empowers users with the flexibility to choose their desired conversation partner. The ability to select a nickname that connects with them can serve as a conversation starter.

Moodscape allows Sarah to engage in anonymous chat sessions with mental health professionals or other users. This feature can foster a sense of comfort and ease when seeking support.

Due to time limitations, a formal usability test was not conducted for this project. However, a comprehensive plan was developed to evaluate the app's effectiveness. We intended to conduct unmoderated remote usability testing with a target audience of individuals seeking to understand their mental health and those already using other mental health applications.

The primary focus would be observing user interactions with Moodscape's three core task flows. The objective was to assess the app's daily usage potential and ability to meet user needs. A key question to be posed to participants was: 'On a scale of 1-10, how likely are you to use the app daily?

For the full Usability Test Plan, please check here.

Usability Test Plan & Next Step

Final Design

The Moodscape app offers Sarah a comprehensive platform where she can track her mood and maintain a digital mood journal. If her mood dips below a certain threshold, the app will alerts her and provides concise information to support her emotional well-being (homepage).

This includes practical tips, coping mechanisms, and links to relevant resources.

1. Mood Tracking

Moodscape offers Sarah a variety of tools to support her mental well-being. She can participate in public AMA livestreams hosted by mental health professionals, where she can ask questions and receive real-time advice. Additionally, the app provides a meditation feature that allows Sarah to find peace and relaxation through guided sessions or soothing background music.

2. Meditation & Stream

Moodscape fosters a supportive community by allowing Sarah to engage in the safe anonymous conversations with mental health professionals or other individuals seeking support.

This feature provides a safe and confidential space for Sarah to share her experiences, seek advice, and connect with others who may be facing similar challenges.

3. Connecting

Vincy Zhou
SFU SIAT
Graphic & UI/UX Designer

Meet the Team

Sally Lim
UBC CPSC
UI/UX designer & front-end developer

Jack Li
UBC Math & CPSC
Founding & Marketing

Linh Le

https://www.healthline.com/health/cbt-techniques
https://www.unk.com/blog/15-core-cbt-techniques-you-can-use-right-now/
https://hss.semel.ucla.edu/wp-content/uploads/2015/07/CBT-Client-English.pdf
https://www.psycom.net/25-best-mental-health-apps

References