Mood-Tracker & Journal Application
Role: End-to-end UX / UI Designer
OVERVIEW
MoJo is a digital journal and multi-faceted mood tracker that helps users understand their moods through data, and engage with their emotional state on a deep level to improve mental health and self-knowledge.
Background:
Consistent journaling has proven benefits, including reducing stress, building routine, and challenging negative thought patterns. Similarly, mood trackers and “bullet-journals” have shown promise in enabling individuals to engage with their emotions and patterns more mindfully, and better understand what makes them tick.
Problem:
People often struggle to engage with mood-tracking and journaling regularly enough to achieve results. Journaling – often seen as a time-consuming effort – becomes a last-resort for particularly rough times, whereas quick and painless mood-tracking systems often prove too rudimentary or shallow to yield true insight.
Solution:
A platform that organically integrates routine mood-tracking and journaling, encouraging consistent, thoughtful engagement with both practices and providing actionable insights that users can use going forward to improve their mental health and achieve greater self-knowledge.
Mood check-in -- high-fidelity prototype
Daylio mood ranking system with emojis, reflective of commonly-used 1-5 system
RESEARCH
Preliminary research consisted of Competitor Analysis and a series of User Interviews.
Competitor Analysis:
I researched leading journaling and mood-tracking apps, focusing on three key areas where I could improve on or re-imagine existing models:
1. Responsiveness to User Input:
Stoic and similar apps provide opportunities for journaling, but in the absence of thoughtful mood-data their prompts can feel disconnected or limiting (i.e. ranking a mood as “Awful”, then being prompted to fill out a gratitude journal for the 3rd time in a row.)
2. Mood Rating Systems:
The standard mood-tracking formula is a 1-5 scale (expressed by Daylio as “awful” to “rad” with accompanying emojis). These rankings can be cross-referenced against other contextual information (sleep, activities, etc.) in data-visualizations after enough data has been entered.​​
3. Disconnect Between Tracking & Journaling:
The apps that have the most robust mood-tracking capabilities (How We Feel and Bearable) fail to provide a user-friendly option for journaling and reflective writing, which disconnects these practices and limits their effectiveness as mindfulness tools.
User Interviews:
To gain a variety of perspectives about what inspires, sustains, or discourages journaling / mood-tracking, I conducted remote 1-on-1 interviews with five subjects whose experience ranged from active-and-consistent to infrequent to totally lapsed.
What makes you feel better when you're stressed?
Do you remember how you felt this time last month?
What's your biggest challenge in keeping a journal?
Affinity Map based on User Interviews
Takeaways:
1. Unique Routines
Journaling and mood-tracking are most beneficial when practiced consistently – though their actual cadences varied from daily to weekly to monthly. Journaling is seen as time-consuming making it harder than mood-tracking to perform regularly.
3. Loss of Momentum
When feeling "meh" subjects struggle to find material to journal or track, especially if they began thse practices during stressful or emotionally-fraught times. These neutral feelings are worth examining, but writer's block often sets in, making it difficult.
2. Mindfulness & Emotional Processing
Subjects are drawn to these practices during times of high-emotion (positive or negative). The common goal was to step-outside of immediate circumstances, process complex feelings, and better articulate thought and behavior patterns.
4. Trusting Data
Subjects want reliable data they can use to gain actionable insights. Oftentimes the standard, rudimentary mood-ranking systems create data-sets analyses that feel innacurate, and not worth paying attention to.
SYNTHESIS
Working with these insights, I asked three questions:
How might we ensure the inputs and outputs of mood-tracking reflect the nuance of users’ emotional states in an accurate, actionable way?
How might we integrate the mood-tracking and journaling aspects of the app so they become more effective than the sum of their parts?
How might we structure flows to encourage consistency without inconveniencing users with busy schedules or unique cadences?
Ideation:
These questions became the basis for a feature roadmap focused on three key pillars of the app experience:
Pillar 1: Mood Tracking ("Check-ins")
Mood Matrix: A feeling-selection matrix based on the circumplex model used by behavioral psychologists. Users select a feeling (e.g. “Joyful”) from an array of options organized on two axes: positive-to-negative and high-to-low energy.
Optional Context: After selecting a feeling, users can provide additional data (sleep, exercise, weather) as well as a brief written entry unpacking the feeling itself.
Contextual Prompts: Users can include written entries with each mood check-in, with optional prompts based on the selected feeling (ex: “Joyful” might prompt “How can you share this feeling with someone else today?”) .
Ex: circumplex mood matrix
“On This Day” & “The Last Time”: Pop-up modals including data from previously-entered check-ins, intended to help users recognize patterns and understand their emotional state.
Pillar 2: Data Analysis & Visualization
Data-at-a-Glance: A series of modals that give the user basic overviews of the feelings they report in the app. Because the mood-ranking system isn’t numerical, data-points are color-coded, based on mood-category. Users can use these simplified, high-level visualizations to review what they felt and when they felt it.
Interactions Data: Contextual data provided during check-ins (sleep quality, exercise, weather) is broken down in easily-digestible graphics showing how each factor may have an effect on the user's mood.
Insights: If the Interactions relationship is strong enough, the app generates “Insights”: small blurbs that explain the trend and provide helpful recommendations or resources.
Data-at-a-Glance modal sketches (left to right: Mood Calendar, Overview)
Pillar 3: Journaling
"Free-Writes": At any point, users may write a journal entry with or without a writing prompt.
Photo Uploads: Users can upload photos to supplement their entries and better capture the moment.
Reflections: Special journal entries, scheduled on either a weekly or monthly basis, enouraging users to "keep themselves honest" about journal routines and put their past in perspective. Optional prompts focus on anything from life-changes and personal goals to the highs-and-lows of the period in question.
DESIGN
I created 3 user flows to showcase and test the main pillars outlined above:
Mood Check-in:
Mood check-ins consist of four steps:**
-
Mood-category selection – users choose from the four mood categories to narrow-down choices for the Mood Matrix.
-
Feeling selection – users choose a feeling from the Matrix, and are shown a definition of the word to ensure accuracy.
-
Contextual data – users can add sleep, exercise, and weather information. If the feeling was selected prior, "The Last Time..." appears.
-
Written entry – users may write a brief entry describing their mood, select a relevant prompt, or upload a photo to the entry.
Medium-fidelity wireframes detailing selection of "Stressed" feeling, inputting contextual data, viewing "The Last Time" pop-up modal, and proceeding through a prompt-oriented written entry and photo upload.
**To make check-ins thought-provoking, while also keeping them quick and easy enough for users to complete on the go — or multiple times a day — any steps beyond selecting a feeling are entirely optional.
"Analyze" Page
Initially planned as two pages (Data-at-a-glance and Interactions), the Analyze page exists on one screen for ease of use. In Data-at-a-glance, users can view modals with varying data sets across several date-ranges.
The Interactions section uses check-in data to break-down statistics about how external factors (sleep, exercise, climate) and influence users' reported moods. Users can click on the top-right icon (if active) to view Insights gathered by the app based on available data.
Medium-fidelity wireframes
This page was by far the biggest challenge from the perspective of visual design – each modal had to be visually appealing and be easy to understand – prompting a number of revisions impacting color choice, label placement, and the shape of individual mood-category icons (see Testing & Revisions for more on this point).
Reflections
After being notified that a Reflection is due today, the user enters the Reflections page. Here users can review entries from the current Reflection period, as well as change their Reflection Cadence (see Testing & Revisions for how this page structure changed).
Medium-fidelity wireframes
Writing a Reflection follows the same flow as completing the written portion of a Mood Check-in. Because Reflections are scheduled ahead of time the intent – expressed via more thought-provoking writing prompts, and the absence of an option to “skip” – was to encourage users to set aside time to put real effort and introspection into these entries.
BRANDING
The branding of MoJo (a combination of Mood and Journal) is intended to reflect and the values of thoughtfulness, empathy, empowerment, and transparency, all of which are crucial to helping users feel comfortable sharing their feelings.
Because light-to-dark or numerical ratings invited the concept of linearity or hierarchy at-odds with MoJo's holistic view of emotions, each mood category was assigned a color (red, yellow, green, blue – cooler to reflect low energy and warmer for high-energy) to give them greater distinction and personality. The avoidance of gradients or happy-to-sad emojis were intended to reinforce a core tenet of the MoJo brand: that all emotions have equal validity and space in the spectrum of human experience.
Color palette & mood category shapes
Inter was chosen for its high legibility, being easy to read even at small sizes (as in graph labels). While I’d originally considered using a more humanist, “friendly” typeface, I realized that users would be engaging with the app during periods of both joy and stress and Inter felt neutral enough to take a back seat to the emotions and personality of the users themselves.
The MoJo logo went through a number of early iterations before taking shape. When, in the course of user testing, the importance of distinguishing mood categories by icon became apparent (see Revisions & Iterations) I chose to make the four "mood-shapes" as prominent as possible throughout the app to reinforce their meaning to new users, ultimately incorporating them into the logo itself.
Preliminary logo drafts
Final logos - wordmark & app icon
With the branding thus solidified, I turned to polishing what I'd designed thus far in my component library:
.png)
.png)
TESTING & REVISIONS
This section covers both the medium and high-fidelity usability testing I conducted, given that the flows and follow-up questions for each round were nearly identical.
I built a prototype and conducted four user tests via screenshare, assessing the quality and usability of three key flows:
-
Completing a Mood Check-in
-
Reviewing data in the Analyze page
-
Completing a monthly Reflection
Mood Check-In Flow Issues:
-
Inability to create / select a “new” feeling
-
"Intrusive" appearance of pop-up modals
_edited.jpg)
Mood Check-in Flow
In terms of navigation, simplicity, and ease of use, the prototype scored well. Users enjoyed exploring the app, finding many of its features “helpful”, “fun”, and “thought-provoking”. However, during post-test debrief, subjects reported there were several issues in each flow that required attention.
Analyze Flow Issues:
-
Accessibility issues from color-based data visualizations
-
Inability to locate “Insights” due to obscure icon
-
Absence of data pertaining to written entries
Analyze Flow
​Reflection Flow Issues:
-
Lack of clarity regarding differences between journal entry types (Reflections, check-in entries, free-write entries)
-
Confusing placement of Reflection Cadence buttons in page
Reflection Flow
Revisions:
Color Accessibility Improvements:
I added clearer data labels to graphs, some of which could be triggered by a tap, and assigned each mood category a unique shape. This made the data-points easy to differentiate but also gave each mood category a greater sense of personality.
Analyze modals with new labels, mood-shapes, and clickable elements (from left to right: Mood Overview, Mood Calendar, divided-bar graph, and weather-pattern pie chart)
Consolidating Journal and Reflections pages:
Since users only complete Reflections on a periodic basis, I scrapped that page altogether, combining it into a new Journal page. All entries appear in a simplified list with a brief text-preview. Entry types are distinguished by visual styling and the presence / lack of mood-shapes. Options to filter entries by order, type, and date-range make individual entries easier to find.
.png)
Redesign of Journal page - entries list, image thumbnails, filters, and prominent Begin button
"Add New Feeling":
Users can now add custom feelings, assigned to a mood-category, and have them available as a choice going forward.
Screens from Add New Feeling flow ("Nostalgic")
"Insights" Icon:
After several iterations remained obscure to subjects, the icon was replaced with more visible labels and expander arrows. Insights can also be viewed in one place via a dedicated dropdown.
Insights icon drafts, Mood vs. Sleep Quality modal, Insights dropdown menu within Interactions header
Pop-up Modals:
"On This Day" and "The Last Time..." now appear in thumbnail state, which users can expand if they wish to see the full information.
The Last Time..." modal (default thumbnail & expanded view)
Language Modal:
This new modal generates a word-cloud of the most-used words in a users’ written entries, sized and color-coded to reflect mood category and frequency, rewarding users for including written entries in their check-ins, and providing basic insights about how experiences impact their emotional state.*
Language modal displaying common words across all check-in entries. Can be adjusted to view word-cloud from entries of specific categories