Introduction
During the summer of 2023, I attended a UI bootcamp with the aim of refining my skills in Figma. In this camp, I collaborated with 4 fellow participants who were also newcomers to the field of UI/UX. Together, within a brief three-week period, we successfully executed a project for a health app named Animood.
Animood is a mobile app designed to help users track and analyze their daily moods. With the ability to record moods and access visualized data, users gain valuable insights into their emotional patterns over weeks, months, and even years. This app serves as a tool for enhancing emotional awareness and understanding the fluctuations in one's mood over time.
My Role
I was a leader and worked with 4 UI designers. I was responsible for tracking the overall project progress, leading meetings, establishing information architecture, and contributing to the design of UI components.
Problem
In the fast-paced lives of modern individuals, there's a dearth of spaces to pause, reflect on personal emotions, and express them, resulting in emotional challenges.
Reports indicate that over 2 million people in Taiwan seek medical assistance for emotional distress annually. This data highlights that the issue is not one of apathy but rather a gradual loss of emotional connection in the busy and high-pressure modern lifestyle.
In this hustle, we've started to overlook the myriad emotions—smiles, sorrows, and more—that make us human.
Define the Problem
Goal
Our goal is to enable users to swiftly recognize, express, and record their emotions, fostering self-awareness and facilitating timely assistance. Through our app, users can effortlessly track their emotional journey, ensuring:
Long-term emotional well-being
Users can enhance emotional awareness and expressionSelf-affirmation and acceptance
Understanding their emotional states allows users to embrace and affirm their emotionsPrompt assistance
Users can recognize the need for external support during prolonged emotional lows
Our Approach
Discover
Competitive Analysis (4)
User Interviews (3)
Feature and Heuristic Competitive Analysis
At first, our team faced uncertainty regarding the app's functionality and style positioning. We embarked on an exploration of mood-tracking apps, analyzing and comparing their styles and features. Here are the key points we distilled:
Warm color and charming emoticons
Opt for green and beige tones, complement by delightful illustrations representing various mood to enhance enjoyment of the appData charts
Users can review the distribution and fluctuations of their moods over different time periods to understand the patterns and reasons behind their emotional statesAdditional features
Integration of features like journals, meditation practices, articles, etc., allows users to engage in various activities related to mental health within a single app.
User Interviews
Due to project timelines, recruiting participants through surveys was challenging. Consequently, we opted to interview friends and family beside us. Fortunately, we found three suitable interviewees, two of whom grappled with psychological issues, necessitating regular monitoring of their emotional fluctuations. The third interviewee maintained a habit of daily recording. Through interviews, we identified several commonalities among the interviewees:
Overly complex features are not beneficial
Users prefer a single medium for recording emotions, just like keeping a handwritten diary. Complex features and knowledge provision may burden users with additional learning cost.Understanding the underlying causes of emotions
While experiencing negative emotions is acceptable, understanding the underlying reasons is crucial. Text and images serve as effective recording methods.Comfortable, secure recording space matters
Emotions are private and exploring them requires courage. Thus, offering a comfortable, secure space for emotional recording empowers users to confidently record their feelings.
Ideate
Our Users
Based on the insights we found in the research, we developed two personas to help the entire team better understand who we're designing for and what would be the most important things we should focus on.
Ideation Note
With a clear target user identified, we delved into ideation. Using Miro as our remote collaboration tool, we gathered a variety of ideas and held meetings to share and discuss each one. Based on our research findings, we aimed to incorporate 3 key concepts into our product: mood tracking, visualized data, and mood feedback.
Information Architecture
To ensure our team members could design the app in an organized and efficient manner, I planned the information architecture, ensuring our product is logical and intuitive for users.
Design Principles
Before executing the design, we also established 3 design principles to ensure that subsequent interface design and color selection follow these principles.
Design
Wireframe
Next, we moved on to creating a low-fidelity wireframe in Figma to visualize the layout and positioning of each component and visual element on the page.
Design System
In our color selection, we've chosen beige and light pink as the primary colors to cultivate a warm and soothing atmosphere. The accent color, representing nature, is a calming green, ensuring users feel comfortable and serene during their reading experience. To express a balance between tranquility and vibrancy, we've incorporated five lively colors corresponding to different emotional states in our design.
Components
Final Design
Here are the main features of Animood:
FEATURE #1
Mood Tracker
Users can easily connect with their emotions by selecting a daily mood symbol, promoting a deeper understanding of their inner states.
The built-in journal allows users to articulate feelings, nurturing emotional well-being as a therapeutic outlet.
FEATURE #2
Visualized Analysis and Feedback
Users can gain insights into their emotional states over time by analyzing weekly, monthly, and yearly mood records.
Personalized feedback encourages users to affirm and embrace their emotions.
Consistent recording of negative moods prompts feedback suggesting seeking external assistance, guiding users to timely support.
FEATURE #3
Built-in Journal
The APP securely stores each user's journal, providing a convenient way for users to revisit and reflect on their past records.
It also enables users to make modifications or deletions to the journal, ensuring flexibility and control over their recorded content.
Page Showcase
Next Step
Due to the constraints of time and resources of the sprint, there are ideas and problems we did not explore but thought would be beneficial to our users:
Enhance Design Accessibility
The use of green and red, symbolizing calmness and anger, may pose readability challenges for users with red-green color blindness. Consider exploring alternative colors that are easily distinguishable for color-blind individuals.Encourage Users to Seek Help Appropriately
If prolonged signs of depression are detected, gently encourage and provide direct channel to the user to seek assistance or counseling in a supportive manner.
Key Takeaways
Mutual Learning
Within our team, members bring diverse expertise from various fields such as graphic design and teaching. Despite our distinct backgrounds, there's a shared willingness to contribute and share knowledge. For instance, I leverage project management expertise to lead and schedule, while design-focused members excel in tasks like color selection. This dynamic allows us to complement each other effectively.Learning Proactively, Expanding Skills
Despite initial unfamiliarity with Figma, we learned new tools and skills to enhance our capabilities. Through intensive practice and mutual accountability, we successfully completed this project in just three weeks.
Thank you for reading through! ☺️
