MoodyMe

MoodyMe is a responsive website designed to assist users with monitoring their mood while providing uplifting content to enhance their emotional well-being.

Role

UX/UI Designer

Team

Individual

Tools

Figma, FigJam, Whimsical, OptimalWorkshop, Canva, and UsabilityHub

User Interviews, User Persona, Information Architecture, Storyboarding, Wireframing, Visual Designing, Prototyping, and Usability Testing

What I did

Timeline

May 22, 2023 - June 11,2023 (3 weeks = 80 HRs)

Background

Mental health problems are widespread worldwide, with mental disorders significantly impacting the overall disease burden. The World Health Organization (WHO) estimates that approximately 25% of people will encounter mental or neurological disorders in their lifetime, such as depression and anxiety disorders. Mental health conditions contribute to high rates of suicide among young individuals. Stigma and limited access to care create obstacles to treatment, and the economic impact of mental health issues amounts to more than $1 trillion in lost productivity each year.

As someone who navigates the demands of being both a student and a full-time employee, I frequently encounter overwhelming pressure and restlessness, which can affect my mood. It is reasonable to assume that others in similar circumstances, grappling with the complexities of work, studies, home life, and financial obligations, also experience significant stress. Consequently, we must prioritize our well-being by actively monitoring our moods and overall mental health. This proactive approach plays a pivotal role in preserving a healthy lifestyle and effectively sustaining our daily routines amidst the myriad challenges of our multifaceted lives.

What is MoodyMe?

With MoodyMe, users can track and log their moods. They can record their mood and monitor their progress multiple times throughout the day.
MoodyMe offers users different motivational options, such as the opportunity to listen to podcasts or read and listen to articles according to their preferences.
MoodyMe offers expert advice and enables users to schedule sessions with professionals.

Solution

The responsive website, allows users to log their mood, maintain a gratitude journal, listen to podcasts, read articles, and engage with an expert who caters to their requirements.

View Final Prototype

MoodyMe Homepage

Users have the option to log their moods multiple times throughout the day.
The users can maintain a gratitude journal and easily access their previous entries.
Users can opt for various options, including consulting with experts, listening to podcasts, setting up goals, and exploring other productive activities.
Users have the flexibility to select a plan that aligns with their specific requirements.
Users can subscribe to a newsletter.

MoodyMe Mood Log

Users can log their mood multiple times a day.
Users have the option to record their moods instead of typing.
Users can easily check and access their previous entries.

Talk to an expert

Users are provided with the choice to explore various expert profiles.
Users can preview an expert's profile and learn about the services they offer.
Users can easily book a session with the expert of their choice.

Listen to a Podcast

Users can listen to podcasts of their choice by selecting an option from the homepage or the navigation bar.
Users can minimize the podcast window and explore other features of the app.

Read an Article

Users can explore a variety of motivational content and add their favorites.
Users can choose between reading or listening to articles.

How have I achieved these results?

Understanding the Problem Space

To gain a deeper understanding of user needs, I created a research plan that enabled me to carry out user interviews and surveys. Additionally, I conducted a thorough competitive analysis to obtain detailed insights into the market and identify opportunities for enhancing the product's usability. I developed user personas based on this research to inform our understanding of the target audience further.

Research Goals

The study aimed to understand individual mood swing’s frequency and underlying causes.
It also explored practical approaches for managing mood swings.
The effectiveness of these approaches was by assessed using specific metrics and indicators, including the frequency and duration of mood swings and their impact on daily functioning and productivity, adherence to self-care practices and changes in overall mental well-being.
The study collected quantitative and qualitative data to gain comprehensive insights.
The ultimate goal was to enhance understanding of effective strategies for addressing mood swings and promoting mental well-being.

Empathize

Research Methodologies
User Interview Insights
Surveys
Competitive Analysis
Affinity Mapping
Personas

Research Methodologies

Each research method proved a stepping stone, propelling me forward and aiding my progress. So, let’s begin with User Interviews followed by User Survey and Competitive Analysis.

User Interviews

I understand that mental health is a deeply personal and sensitive topic that can be challenging for some individuals, potentially triggering past traumas. When I approached this subject, I did so with great care, considering the possibility of triggering any strong reactions from users. Thankfully, during my interviews, I have not encountered any circumstances that caused distress to the interviewees.

“When mood swings, I have a few ways to cope. One is listening to music, which has a soothing effect on me. Another is hitting the gym and lifting weights to release the stress. Both of these activities help me overcome my mood swings and bring back balance.”

- Abdullah’18

“Sometimes, I find it challenging to find someone who is willing to listen to me. It seems like everyone around me is caught up in their own busy lives, leaving little time to spare. I understand that they also have their own struggles to deal with.”

- Aazara’38

“Being a full-time student and a parent, I find myself facing frequent mood swings on a daily basis. It can be quite overwhelming at times. However, I've discovered some effective strategies to overcome these challenges. Whenever I feel down, I turn to motivational speeches to uplift my spirits and regain motivation. Taking a walk in nature is another technique I rely on, as it allows me to recharge and find inner peace amidst the chaos. Additionally, meditation has been instrumental in helping me connect with my inner self and restore a sense of balance. These practices have proven to be invaluable in navigating through the highs and lows of my busy life.”

- Ozma’35

“As someone who is highly emotional, I often depend on my husband for support. However, there are moments when certain triggers overwhelm me, and during those times, I find solace in reaching out to my therapist. Unlike others, she truly listens to me without imposing her own opinions or judgments. This ability to be heard and understood is immensely valuable, as it allows me to express myself openly and work through my emotions in a supportive environment.”

- Joanne’40

“I'm looking for something that can give me a comprehensive overview of my moods and how various factors impact me over time. Having a detailed account highlighting patterns and trends would be incredibly valuable. This way, I can leverage positive feedback to enhance my well-being and find ways to overcome negative feedback when I experience intense mood swings. Having access to such information would empower me to make informed decisions and take proactive steps towards managing my emotions effectively.”

- Ayushi’37

Survey

To gain a comprehensive understanding, I carried out the survey with 11 participants, three of whom were male, and the remaining were female. I utilized the Optimal Workshop platform to create a questionnaire comprising 17 questions, with 12 being open-ended questions and five offering written response options. Ensuring diversity, I included participants from different backgrounds, encompassing family, friends, and members of the Discord community. Furthermore, I have extracted a few comments from customer reviews, enabling me to understand users' issues with each app and consider potential ways to address them or plan for future improvements.

Competitive Analysis

Each app targets a specific audience. Dailyo focuses on stress, anxiety, and depression. Moodkit aims to assist users in changing thought patterns and developing coping strategies for emotional regulation. Meanwhile, eMoods is designed primarily for individuals with bipolar disorder, enabling effective mood tracking and managing their condition. However, only some platform combine all these services into a single comprehensive solution.
Dailyo provides mood tracking, journaling, stress reduction techniques, and daily progress statistics. Conversely, Moodkit offers tools and exercises to address negative thoughts, build resilience, and enhance overall mood. On the other hand, eMoods focuses on mood tracking and symptom management specifically for individuals with bipolar disorder, enabling them to identify patterns and triggers. However, only some platform combine all these services together.

To gain insights into impactful user feature and explore potential improvements, I conducted a competitive analysis of three top-rated apps in the market: Dailyo, Moodkit, and eMoods. Each app offers distinctive features designed to enhance users' lives.

Here are some limitations faced by each app:

Daylio

Lack in-depth content for specific mental health conditions beyond stress, anxiety, and depression.
eMoods

Could benefit from a broader range of features beyond thought-changing exercises.
MoodKit

It is limited to users with bipolar disorder, potentially excluding a broader audience seeking general mental health support.

Affinity Mapping

Based on the findings from Affinity mapping, it's clear that many users have concerns about security and privacy. Moreover, many users would like reminders or notifications to prompt login. Users seek coping mechanisms like reading materials, motivational content, podcasts, and a supportive community. They also expressed the desire for a screening questionnaire to guide their journey. The integration of AI for sharing thoughts was reviewed as a beneficial, and users value the availability of a free trial for advanced features.

Detail Analysis

Defining the Problem

Based on what I learned, I found out that users often face specific challenges. They desire features that can keep them engaged and interested, like positive messages, customized mood tracking, podcasts, motivating articles, or the option to consult an expert, and these findings gave me my “How might we” statement. To conclude, people seek an app that understands and values their cultural backgrounds, acknowledging that different cultures impact individuals.

How might we create an inclusive and culturally sensitive safe space that caters to individuals' unique demographics and cultural needs? By providing features such as culturally relevant content, community moderation, customizable user profiles, and access to cultural advisors or consultants, I aim to enable users to find support from a trusted community.

Defining the User Personas

Through my research, I created three user personas. Jennifer Klein represents those who want a deeper understanding of their mood swings. On the other hand, Ali Ahmed deals with mood-related procrastination and seeks motivating content to enhance his motivation and productivity. Finally, there's Cindy Brown, a mother who recently started college. She aims to gain self-awareness and desires support from experts or inspirational resources when facing burnout. I will focus on Cindy's persona to design the interface and user experience.

Ideation

Product Roadmap
Story Board
Information Architecture

Defining the Ideation stage

Once I established the user personas, I constructed a product roadmap that provided a clear overview of the features to include and retain. Using the selected elements, I developed a storyboard that guided the creation of user and task flows, enabling me to progress with the project.

Product Roadmap

Utilizing the product roadmap gave me an insight into the different features and their relevance in an MVP (minimum viable product). So, I have decided to move forward with several key elements, including an onboarding process, a login screen, a mood logging tracker, a gratitude journal, podcasts, motivational articles, and the option to engage with an expert for guidance.

Storyboard

During the user interviews, I had the opportunity to gather valuable insights. It became evident that users highly desired motivational words and a listening ear within the platform. With this feedback, I incorporated the podcast and talk-to- expert features into my design. This thoughtful integration allows users to access uplifting content that can positively impact their mood, and it also ensures that they have a support system readily available when they need someone to lend an ear.

Information Architecture

Once I finalized my storyboard and determined the features to proceed with, I created user and task flows to visualize the pathways users would follow and how they could complete tasks. This process gave me a clear understanding of the user journey and allowed me to identify any potential hurdles or areas for improvement. Based on the insights, I was able to develop the following user and task flows:

Access the mood tracking app, log your current mood, and create an entry in the gratitude journal.
On the home page, users have access to motivational articles, podcasts, and the option to engage with experts. They can choose to utilize any of these services based on their preferences.

Interaction Design

Wireframe sketches
Low-Fidelity Wireframes

Wireframe Sketches

After organizing the information into user and task flows, I transitioned to the interaction design phase and began working on sketches and low-fidelity wireframes. The sketches were crucial in developing and visualizing the user interface concepts on paper. They served as a foundation for further design iterations and allowed me to explore different layout and functionality options.

Low Fidelity Wireframes

After completing the initial sketches, I digitize them, transitioning from paper to digital format. During this process, I incorporated some changes based on the feedback. This iterative approach allowed me to refine the design and make necessary adjustments to enhance the user experience. Based on the insights, I was able to create the low-fidelity wireframes including desktop home page, mood tracking and log-in page, articles page, podcasts, and talk-to-an-expert section.

Design and Branding

UI Kit
High Fidelity Wireframing

UI Kit

While working on my design, I made specific design choices to create a warm and inviting atmosphere. To achieve this, I carefully selected a logo that conveys friendliness and approachability, steering away from a severe tone. I opted for an orange primary color as it exudes youthful energy and brings about feelings of happiness. Orange is known for its ability to spark creativity and uplift moods. For the secondary color, I chose teal blue to symbolize open communication and clarity of thoughts. Finally, I decided to use Avneir as my typeface. Although categorized as a geometric sans serif font, it adds a touch of youthfulness and modernity to the overall aesthetic.

High Fidelity Wireframes

After making adjustments to the mid-fidelity wireframes, I proceeded to develop high-fidelity wireframes. Once I implemented all the necessary enhancements, I conducted usability testing to evaluate the user experience and gather feedback.

Test and Iterations

Prototype
Outcomes of Usability Testing
Screens of Before/After

Prototype

After fine-tuning my high-fidelity wireframes, I moved on to the final stage of creating a prototype. Once I incorporated all the refinements, I conducted usability testing. The final version of the prototype reflects the changes I made based on the feedback gathered during usability testing. The specific modifications are summarized below.

Outcomes of Usability Testing

Based on the feedback I received during usability testing, it's clear that users liked the design and layout of the prototype. They found it visually appealing and mentioned that it was easy to navigate without significant challenges. To better organize their feedback, I have compiled it into the following grid and metrics.

Iterations based on Usability feedback

Before Feedback

Before the feedback, there needed to be a review section.
After Feedback

In response to user feedback, I implemented a comment section that enables users to review the podcast.

Before Feedback

Before receiving feedback, the dollar sign was in full color.
After Feedback

After receiving feedback, I enhanced the prominence of the dollar sign to improve its visibility and accessibility for users.