Project Details
In today’s fast-paced world, maintaining emotional well-being is crucial for overall health and happiness. The mood we have will have an impact on the other activities we will do, and vice versa. We are often so focused on what we want to achieve or do, that we forget about our mental health. It is important for us to understand ourselves better for better personal growth.
This project to create a user-friendly mental health app aims to break down barriers to mental health support by providing easy access to resources and tools anytime and anywhere. By offering a mobile platform, to ensure that users can access the app conveniently.
Incorporated features such as mood tracking and self-reflection are powerful tools that can help individuals gain insights into their emotions, identify patterns in their behavior, and develop strategies to improve their mental health.
Design Process
🧠 Design Methodology | Double Diamond
The double-diamond design method provides a structured framework that is user-centered, innovative, and effective.
The discover and define phases aim to find the problem to be solved, so that there is a clear target or goal. After knowing the problem to be solved, make sure to find a solution in the right way in the development and finalize phases.
1 — Discover Phase
At this stage, I conducted an in-depth interview with a student regarding mental health issues. I then began to gather insights into the problem. Through this approach, I identified the key issues, which would form the basis for designing solutions to address the existing problems.
👀 Problem
Mental health issues have become increasingly prevalent, yet accessing timely and effective support can be challenging. Traditional mental health services may not adequately address the unique needs and preferences of individual users, leading to suboptimal outcomes.
- Many people face barriers in accessing mental health support due to factors such as cost, stigma, and limited availability of resources.
- People need listeners who can advise them on how they are feeling.
- Many people also need attention to be able to give them reminders to get to know themselves better.
- They need a comfortable place where they can share their feelings.
2 — Define Phase
After identifying and understanding the primary issue in the discover phase, I proceed to gather data derived from the preceding stage to formulate solutions. Next, I define the target audience utilizing the insights gathered previously and proceed to craft a user persona.
Target Audience and User Persona
This app is designed for individuals who want to increase their emotional self-awareness and cultivate mental well-being. It is perfect for those who:
- Experiencing frequent mood fluctuations or emotional challenges
- Seek to identify patterns in their emotional states
- Want to gain deeper insight into their emotional triggers and responses
- Strive for personal growth and improved mental health
🔥Challenges and Solutions
Once the creation of user personas is complete, data is collected from the discover stage and user persona stage. This data is then analyzed to derive the fundamental solutions to the identified problems. The following are the challenges and solutions derived from the existing problems.
2.1 — About Moodyan App | Define Phase
After creating solutions to existing problems, then create details of the application to be designed based on information from the previous phases, starting from the description, purpose, features, and UI/UX principles of the application.
💡App Description
Moodyan is an app for mood tracking and self-reflection. The app will provide a convenient platform for users to track their daily moods, identify patterns, and gain insight into their emotional well-being. It will also offer self-reflection guides and exercises to encourage deeper self-understanding and personal growth.
✨App Purpose
The main goal of this app is to empower individuals to increase their emotional self-awareness and cultivate mental well-being. This app will serve as a valuable tool for tracking moods, understanding emotional patterns, and engaging in self-reflective practices. This, in turn, can contribute to improved mental health, increased self-understanding, and a greater sense of emotional well-being.
App Features
- User can track their mood once a day.
- The system will give daily quotes to the user on the dashboard.
- User can have a self-reflection about their day once a day.
- User can see their profile and manage the remainder of the mood tracker and self-reflection.
- User can see the insight about their mood tracker and self-reflection.
- The system will give some recommendations for things that user can do based on their mood.
UI/UX Principles
The UI/UX of the app will adhere to the following principles:
- Simplicity and intuitiveness: The app will be easy to navigate and use, with a clean and uncluttered interface that minimizes cognitive load.
- Visual appearance and emotional resonance: The app design will be visually appealing and evoke positive emotions, fostering a sense of calm and well-being.
- Accessibility and inclusivity: The application will be designed to be accessible to a wide range of users.
Meaning of the Name Moodyan
“Moodyan — Know yourself better can be a powerful tool for personal growth”
According to the Cambridge English Dictionary, moodiness is defined as the quality of changing a mood or emotional state suddenly, becoming angry or happy easily. In this way, the name Moodyan can represent the use and purpose of this application, namely to carry out mood tracking for the user regarding the mood that the user is experiencing.
2.2 — User Story Map | Define Phase
User story maps are used to organize and prioritize user stories, which are short descriptions of app features that users want to see in the Moodyan app. User story mapping shows the order and importance of things that need to be accomplished.
3 — Develop Phase
User Flow
The user flow will describe the user’s movement in using the application, mapping each step the user takes, from the starting point to the final interaction on a section or feature.
Sitemap
This sitemap provides a structured overview of the navigation and functionality of the app, guiding users through the various features in the app.
3.1 — Design System & Brand Guideline | Develop Phase
Brand or Design guideline is a document that outlines the principles and standards, that define and maintain the app’s visual identity and design standards. These guidelines are to ensure that the app is consistent, user-friendly, and visually appealing.
1. Logo
The logo for the Moodyan app, featuring a plant, is designed to convey a sense of growth, resilience, and positive emotional well-being. The logo is a visually appealing and emotionally resonant representation of the journey towards positive mental health.
2. Color Palette
Color palettes can represent moments of calmness and balance. Its soothing tones convey a sense of serenity, making it ideal to associate with peaceful and positive emotions.
Symbolizes growth, renewal, and positivity. Utilized to represent instances of personal development, optimism, and moments of overall well-being.
Why choose this color palette?
- Promotes relaxation and stress reduction: Calm colors can help to lower heart rate, reduce blood pressure, and create a sense of peace and tranquility. This can be especially beneficial for users who are feeling stressed or anxious.
- Improves focus and concentration: Calm colors can also help to improve focus and concentration by reducing visual clutter and distractions.
- Reduced Stress and Anxiety: By creating a calming and relaxing atmosphere, calm color palettes can help reduce stress and anxiety.
3. Typography
Typography plays a pivotal role in shaping the user experience. Lora elevates the overall design aesthetic while maintaining accessibility. Inter’s font readability, clean and modern design, and versatility across platforms make it an excellent choice for body text in UI/UX design. This app uses 2 font families, Lora serif font as headings and Inter sans-serif font as body text.
4. Illustrations
Illustrations play a crucial role in visually representing emotions and enhancing user experience. Each illustration is thoughtfully selected to depict emotions such as happiness, sadness, excitement, calmness, and more, allowing users to easily identify and select their current mood.
The illustrations not only serve a functional purpose but also contribute to the overall ambiance of the app, promoting a positive and uplifting user experience.
5. Components
These components will be used in designing the Moodyan app, and each component is designed according to the theme and brand identity of the Moodyan app.
6. Moodboard
7. Design Asset and Source
Asset and design sources used on the project. Icons by Icons8 and Illustration by Sammy Line at Icons8
4 — Finalize Phase
Wireframe
The wireframe of the Moodyan app should be clear and easy to comprehend. It should concentrate on the app’s functionality and how users will interact with it, rather than its visual appearance.
By focusing on the app’s functionality and user flow, wireframes help ensure that the app is easy to use and navigate. These wireframes depict essential elements like onboarding screen, dashboard, and app features.
High-Fidelity
The high-fidelity Moodyan app should be engaging, intuitive, and tailored to promote emotional well-being. It should seamlessly blend functionality with aesthetics, guiding users through a personalized journey of self-discovery and emotional management.
High-fidelity should prioritize accessibility, with clear font styles ,appropriate text size, illustrations that can help users use the application, and colors that can make users feel calm.
Application Flow
The application flow section will show the flow of each important part of the application, with this flow will help explain how the application flow runs.
Log In / Sign Up Flow
Mood Tracker Flow
Self-Reflection Flow
Insights Flow
Mockups
These are mockups of the Moodyan app to help visualize the final look of the app.
4.1 — Prototype & Usability Testing | Finalize Phase
Interactive Prototype
The prototype phase begins with the conceptualization of the app’s core features, functionality, and user flow.
During the prototype phase of developing a mental health app, the focus is on creating interactive prototypes that simulate the app’s functionality and user experience.
The design of the wireframe and high-fidelity was made on Figma. Here is the prototype of the design
Usability Testing
In the last stage, quantitative usability testing is conducted on the design prototype that has been created and refined through an iterative process, to ensure its readiness to be evaluated and get feedback from end-users on the features and the interface of the Moodyan app.
Testing was conducted on a maze platform using unmoderated and remote usability testing, involving 20 participants. It aimed to assess the mood tracker, self-reflection, and insights features of the moodyan app.
Research Objective:
- Find out if the features on the mood tracker are easy to use and if the information on the mood tracker is easy to understand.
- Find out if the self-reflection feature is easy to use.
- Find out if the information in the insights section is easy for users to understand.
Below are the results of the tests that have been carried out. The overall score obtained from the test is 81.
Task 1
In this first task, the test was conducted to “Perform the mood tracker on the mood tracker menu, from beginning to the end of the feature”. With an overall score of 67, with 100% user success in completing the task. 70% of participants voted that it was “very easy to run the feature and understand the information in the mood tracker feature”.
Task 2
In this second task, the test was conducted to “Go to the self-reflection menu and reflect on the self-reflection feature”. With an overall score of 88, with 90% user success in completing the task. 95% of participants voted that it was “very easy to find and run the self-reflection feature”.
Task 3
In this third task, the test was conducted to “Open insights menu and pay attention to the information on the insights menu”. With an overall score of 87, with 90% user success in completing the task. 60% of participants voted that it was “very easy to understand the information in the insights feature”.
Conclusion
In this case study, I designed an app with existing problems related to mental health. With the research conducted and the work carried out in stages, it can provide solutions and ideas for making application designs for existing problems.
In my design, I used the Double Diamond method. The discover and define phases aim to find the problem to be solved so that there is a clear target or goal. After knowing the problem to be solved, find a solution in the right way in the development and finalize phases.
Thank you for taking the time to explore my case study ! ✨
I am happy to share this journey and hope it will be useful to those who learn from it. Your feedback and suggestions are greatly appreciated as they contribute to my continuous improvement and development. I look forward to your input to help me refine and develop further.
CONNECTING MINDS & LET’S COLLABORATE 👇🏻
Linkedin | Dribbble | hizkiast01@gmail.com
Don’t forget to give claps 👏 and have a nice day :)
