Moodiverse: A Gamified Journey to Emotional Wellness: a UI/UX case study

Project Overview

What is Moodiverse

Moodiverse is a digital wellness tool designed to track and analyse users’ daily moods, providing personalised insights and recommendations for improved emotional health. Leveraging the power of machine learning, Moodiverse takes the approach of observing patterns and helping users understand their emotional cycles. Furthermore, Moodiverse incorporates gamification elements, rewarding consistent usage and adherence to recommended mood-improvement activities, effectively engaging users on their journey towards emotional well-being.

Duration

2 days

Platform

Mobile application

Problem statement

In the digital age, stress and emotional turmoil are common, yet understanding and managing these feelings is a challenge. Existing mood-tracking tools often lack simplicity, personalisation, and engagement, leaving users unsupported in their journey towards better mental health. The task is to design a comprehensive, user-friendly app, ‘Moodiverse’, that simplifies mood tracking, offers personalised insights and actionable advice. Moreover, it should incorporate gamification to promote consistent usage, making it a truly supportive tool in the user’s pursuit of emotional wellness.

Goals

1. Promotion of Emotional Wellness: The ultimate goal is to promote better emotional wellness among users by providing a tool that aids them in understanding their emotions and guides them towards improved mental health.
2. Personalised Insights: To provide users with personalised insights about their mood patterns and offer actionable advice tailored to their specific needs and experiences.
3. Engagement: To incorporate gamification elements that encourage consistent usage and active engagement with the app.
4. Simplicity: To make mood tracking as simple as possible, ensuring the app is easy to navigate and users can log their moods quickly and easily.

📹 The Prototype (Incase you wanna skim through)

Users can effortlessly log their moods daily, allowing the app to generate personalized insights about their emotional patterns and triggers. The intuitive design also incorporates a “daily streaks” feature as a gamification element. By maintaining consistent mood logging, users are rewarded, making the process more engaging.

🔎 Research

This phase aims to uncover user pain points, needs, and the overall landscape of the mood management system.

1. User interviews

User interviews were conducted to gather insights into user needs, preferences, and pain points with current mood tracking methods or tools. Five people from diverse backgrounds, including those who have previously used mood tracking apps and those new to the concept, were interviewed.

Each interview began with open-ended questions about the participant’s understanding of emotional health and their strategies for managing their moods. I delved into their experiences with any existing mood tracking methods or tools, asking about features they found helpful and areas they felt were lacking. We then explored their preferences and ideas for an ideal mood tracking tool.

Questions:

1. Can you tell me about your understanding of emotional health?
2. Have you ever used a mood tracking tool or app? If so, which ones?
3. How easy or difficult was it for you to keep a consistent habit of tracking your moods with these tools or apps?
4. What features did you find most useful in the mood tracking apps you’ve used?
5. Were there any features or aspects that you felt were missing or could be improved?
6. What would motivate you to consistently use a mood tracking app?
7. How would you feel about gamification elements in a mood tracking app, like earning rewards for consistent usage?
8. Do you have any specific ideas or features you would like to see in an ideal mood tracking tool?

2. Painpoints

1. Complexity and User-Unfriendliness: Many users found existing mood tracking tools to be complex and not user-friendly. They prefer a tool that’s straightforward and easy to use.
2. Lack of Consistent Usage Motivation: Many users struggled with maintaining a consistent habit of using mood tracking apps. They often forgot or lacked motivation to log their moods regularly.
3. Inadequate Actionable Insights: Users felt that existing tools didn’t provide enough actionable insights. They don’t just want to log their moods — they want to understand their emotional patterns better and receive specific, actionable recommendations for improving their emotional well-being.

3. Competitor analysis

A thorough competitor analysis was conducted to understand how existing mood tracking apps, specifically Daylio and Moodnotes, meet user needs and where they fall short. This analysis helped identify opportunities for differentiation and improvement in our app, Moodiverse.

🧑‍💻 Ideate

The ideation phase was all about taking the insights I gathered during the research phase and converting them into actionable solutions. During the ideation phase, a significant focus was put on redesigning moodivers’s user flow. I took into consideration the user feedback received during the interview phase along with the insights from your competitor analysis.

1. User flow

Moodiverse offers a user-friendly journey, beginning with a comprehensive onboarding process that ensures users understand the app’s features and data privacy. The home screen is designed for effortless mood logging, providing a selection of moods and the option to add more details. Following mood logging, the app presents personalised insights into the user’s emotional patterns and offers actionable advice.

2. The logo

The Moodiverse logo is a symbolic representation of its core functionalities. A smiley face, at the heart of the design, represents the app’s key feature of mood journaling. This cheerful icon is enveloped in a message bubble, indicating the app’s interactive nature and its ability to provide feedback based on logged moods. Topping it all off is an antenna, denoting the app’s capability to intuitively ‘detect’ user moods, underlining the app’s intelligence and personalized feedback mechanism. Together, these elements make up a logo that is not only visually appealing but also tells the story of Moodiverse at a glance.

Explanation of the logo

3. Sketches

Sketching is the next step in my design process for Moodiverse. At this stage, I put pen to paper to start visualising the ideas and user flows. These sketches act as the initial blueprints for the app, laying the foundation for the eventual interface.

Initial sketches for the moodiverse app

3. Low-Fidelity Wireframes

In the ideation phase of the moodiverse project, creating Low-fidelity wireframes was a key step in transforming the abstract ideas into more concrete, visualised concepts. This was a crucial part of the design process as it helped to define the structure, layout, and functionality of the Credible platform.

Wireframes for the moodvisely app

🎨 Lets talk design

1. Typography

For Moodiverse, the chosen typography is SF Pro Rounded. This typeface embodies a balance between boldness and fun, aligning perfectly with the overall vibe and purpose of the app. SF Pro Rounded is a sans-serif typeface, renowned for its readability and clarity, which is crucial in ensuring a smooth user experience.

2. Colour Palette

The primary colour chosen for Moodiverse is a vibrant teal, #109087. This colour was chosen for its refreshing, lively feel and its harmonious blend of the calming properties of blue and the natural energy of green. This color encapsulates the mission of Moodiverse — to create a positive and inviting space that encourages users to explore and understand their emotional well-being.

3. Spacing

The spacing system in Moodiverse follows multiples of four. This standard was selected to maintain a consistent and harmonious rhythm throughout the interface. By adhering to a base of four, it becomes easier to balance the content and elements on each screen, ensuring a clean, uncluttered look that enhances readability and usability.

5. Illustrations

Visual communication plays a vital role in the user experience of Moodiverse, and this is achieved through the unique, emoji-like illustrations for each mood. These illustrations are designed to be both aesthetically pleasing and functional. They bring an element of fun and lightheartedness to the app, making it more engaging and less clinical.

6. High fidelity designs

The high fidelity designs for Moodiverse were created with a keen focus on the overall aesthetic and functional objectives of the app. With a clear understanding of the user journey, these designs incorporate all the carefully chosen elements — typography, colour palette, spacing, and illustrations — to create an engaging, user-friendly interface.

The core functionality of the app is centered around the Mood Logging screen, which features an intuitive, minimalistic design. Users can easily log their moods using the bold, emoji-like illustrations, making this process not only simple but also enjoyable.

The Insights screen serves as a personalised mood counselor, presenting users with insightful breakdowns of their mood patterns, potential triggers, and actionable advice to help them navigate their emotional landscape. To keep users engaged and motivated, the Daily Streaks and Rewards screen displays ongoing achievements in mood logging and the rewards that come with them.

Thank you guys for reading, it has been a very educational and fun project for me personally. I really hope y’all enjoyed it as well and also found something useful.

You can connect with me on LinkedIn here.

Fun fact: if you hold down the clap button, you can give up to 50 claps! Try it! 😉😬