Mood-Tracker & Journal Application
Role: End-to-end UX / UI Designer
OVERVIEW
MoJo is a digital journal and multi-faceted mood tracker that allows users to not only capture their thoughts in writing, but also catalogue and engage with their emotional state on a deep level to improve mental health and self-knowledge.
Problem:
On an individual level, many struggle to engage with these practices 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.
Background:
Consistent journaling has proven benefits, including reducing stress, building routines, 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.
RESEARCH
Preliminary research, in the form of Competitor Analysis and a series of User Interviews, provided several insights into the problem and its potential solutions.
Competitor Analysis:
I researched several of the leading names in both digital journaling and mood-tracking, ultimately focusing on three key areas where my app could improve on or re-imagine existing models:
-
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.
-
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 your mood as “Awful” and then being prompted to fill out a gratitude journal for the 3rd time in a row)
-
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:
My primary objectives for these interviews were:
-
Understand what factors motivate an individual to take up journaling / mood-tracking
-
Understand how individuals perceive the role that routine and consistency play in successful journaling / mood-tracking
-
Determine the extent to which data analysis can help people to better understand or improve their unique habits and patterns
-
Learn how individuals compare the benefits of digital vs. physical journaling / mood-tracking.
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
Despite subjects' varying experience with these tools, several common themes emerged:
Finding a Routine:
Subjects agreed that journaling and mood-tracking are most beneficial when practiced consistently – though their actual cadences varied from daily to weekly to monthly. Journaling, though helpful, was seen as time-consuming, while mood-trackers were easier to use quickly.
Feeling “Meh” & Writer’s Block:
Subjects who began journaling or mood-tracking during periods of high stress or positivity often lost their momentum during neutral or “meh” days. While they agreed these feelings were probably worth examining, the perceived lack of inspiration or “material” made writing difficult.
Mindfulness & Emotional Processing:
In nearly all cases, subjects were drawn to these practices during times of high-emotion (either positive or negative). The common goal was to step-outside of immediate circumstances, process complex feelings, and better articulate thought and behavior patterns.
Trusting Data:
Subjects were excited by the prospect of reliable data providing objective, actionable insight, but their past experiences with rudimentary, shallow mood ranking systems often made it difficult for them to feel confident that the analyses were accurate and worth paying attention to.
Daylio mood ranking system with emojis
SEEKING SOLUTIONS
Working with these insights, I developed HMW questions to give me direction as I moved into ideation:
HMW: Ensure the inputs and outputs of mood-tracking reflect the nuance of users’ emotional states in an accurate, actionable, and accessible way?
HMW: Utilize the digital medium to integrate mood-tracking and journaling so they become more effective than the sum of their parts?
HMW: Structure journaling / mood-tracking to encourage consistency without inconveniencing users with busy schedules or unique cadences?
Ideation:
These questions became the basis for brainstorming and 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, based on the concept that naming emotions reduces their power and makes them easier to process. Instead of a linear 1-5 ranking system, users select one named feeling (e.g. “Joyful”) from an array of options organized from Positive to Negative and High to Low Energy.
Contextual Prompts: At the written entry step of a Check-in, users are presented with a series of writing prompts based on the feeling they selected (ex: “Joyful” might prompt “How can you share this feeling with someone else today?”) making the app more responsive to the user's immediate feelings and needs.
Optional Context / “Depth”: Each mood check-in requires selecting a feeling, but also includes the optional steps where they can "go deeper" by providing additional data (sleep, exercise, weather) as well as a brief written entry unpacking the feeling itself.
“On This Day” & “The Last Time”: During a Check-in, users may encounter pop-up modals with information from past Check-ins. (ex: “On this day last month, you felt Stressed”, or “The last time you felt Stressed was [date]” followed by relevant data from that day). This information encourages users to understand their emotional experience as a series of interrelated patterns and changes rather than linear data-points.
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 & Insights: Contextual data from Check-ins (sleep quality, exercise, weather / temperature information) is broken down in simple graphics showing how users' moods are affected by external factors. If the relationship is strong enough, the app generates “Insights”: small blurbs explaining trends and providing helpful recommendations or resources. (ex. “You have a stronger-than-average correlation between sleep and negative emotions, consider adopting a wind-down routine to ensure better sleep.”)
Pillar 3: Journaling
Scheduled Reflections: Special journal entries, scheduled on either a weekly or monthly basis, wherein the user is encouraged to dig deeper than they would for a Check-in entry, with prompts about anything from life-changes and personal goals to the highs-and-lows of the period in question. Reflections are intended to both “keep users honest” about journaling on a consistent basis while keeping them in control, and inspire them to write mindfully to put their past in perspective.
Ex: circumplex mood matrix
Data-at-a-Glance modal sketches (left to right: Mood Calendar, Overview)
DESIGN
I created 3 user flows to showcase and test the main pillars outlined above:
With these flows in mind, I began mapping the features out in sketches, followed by low and medium fidelity wireframes to see how I could best organize the structure of each.
Mood Check-in:
Mood Check-ins consist of four steps:
-
Mood-category selection – users choose from the four general mood categories to narrow things down and make the Mood Matrix more manageabl.e ("On This Day" appears in this step.)
-
Feeling selection – users choose a feeling from the Matrix. Before committing, they're shown a definition of the feeling-word to ensure accuracy.
-
Contextual data – users can add information about sleep, exercise, and (if location services are enabled) weather. If this feeling was selected before, they may view The Last Time pop-up for additional context.
-
Written entry – Users may write a brief entry describing their emotion or experience. The default prompt “Where might this feeling be coming from?” encourges examination of why the user feels this way. They can also select writing prompts tailored to the feeling they selected. At this point, users may also upload a photo from their gallery.
Medium-fidelity wireframes
This structure (influenced by mental-health apps like How We Feel) is intended to provoke deeper introspection and self-awareness vs more rudimentary mood-tracking systems. The main challenge was to find a balance that made Check-ins thought-provoking while also keeping them quick and easy enough for users to complete on the go, or multiple times a day, without becoming a chore. To that end, 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, allowing users to scroll between the two related sections freely. In Data-at-a-glance, users can view modals with varying data sets and change the data-range (All-time, Last month, Last 3 months) via a menu pinned to the top of the screen. The Interactions section contains all modals related to context added during Check-ins, breaking down statistics about the relationship between external factors (sleep, exercise, climate) and reported mood. 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 Revisions and Implementation for more on this point).
Reflections
This flow begins with the user entering the Reflection page (later combined with the Journal page) via the nav bar or the notification that a Reflection is due today. In my initial design, the Reflections page contained explanatory text, a link where users could review all entries from the current Reflection period, and an option for changing their Reflection Cadence (see Revisions and Implementation for how this page structure changed).
Medium-fidelity wireframes
The optional review section, displaying a truncated list of dates and moods of past entries can be scrolled through quickly to refresh users on what they felt or might want to focus on in their Reflection. Users proceed to writing their Reflection the same way they would for 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:
I wanted the branding of MoJo (a combination of Mood and Journal) to reflect and reinforce the values of thoughtfulness, empathy, empowerment, and transparency, all of which are crucial to providing the kind of environment that would let users feel comfortable sharing their feelings and empowered to act with intentionality.
While I initially planned to use a monochrome color palette, I realized that because the mood categories were so integral to the app (in particular the data visualizations) that they each deserved a unique color (red, yellow, green, blue – cooler to reflect low energy and warmer for high-energy) making them easier to tell apart and giving them more personality. These color choices were inspired by circumplex emotional models (see Mood Matrix) which often assign similar colors to the same quadrants. The avoidance of gradients or happy-to-sad emojis were intended to reinforce a core tenet of the MoJo app: that all emotions are equally valid and have their place in the spectrum of human experience.
Color palette & mood category shapes
I chose the Inter font because of 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
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 3 key flows:
-
Completing a Mood Check-in
-
Reviewing data in the Analyze page
-
Completing a monthly Reflection
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:
Mood Check-In Flow:
-
Inability to create / select a “new” feeling
-
"Intrusive" pop-up modal appearance (“On This Day” and “The Last Time”)
.png)
Mood Check-in Flow
Reflection Flow:
-
Lack of clarity regarding differences between journal entry types (Reflections, Check-in entries, Free-write entries)
-
Confusing placement of Reflection Cadence options / buttons in page
Analyze Flow:
-
Color-accessibility issues (data visualizations)
-
Inability to find “Insights” pertaining to Interactions modals
-
Absence of data pertaining to written entries vs. mood selections.
Analyze Flow
Reflection Flow
REVISIONS & IMPLEMENTATION
Mood Check-In Flow:
Users found the mood-category system and the large matrix of emotions to be an improvement over the 1-5 scale, but expected a choice to add their own feeling options if the existing ones didn’t feel right. To this end, on the feeling-selection screen, before a choice is made, the users can choose to add a new feeling, assign it to a mood-category, and have it available as a choice going forward. These new feelings are tagged with an icon to help users keep track of them.
Screens from Add New Feeling flow ("Nostalgic")
On This Day and The Last Time modals popped up full-screen in this prototype. While the intention of these modals was praised, and the context they provided was useful, their appearance was intrusive. To address this, the modals now appear by default in a thumbnail state, which users can expand if they wished to see the full information. I also made it so these features could be turned on or off in the Settings menu (see Settings).
Screens showing "The Last Time" modal (default & expanded)
Analyze Flow:
Test subjects were enthusiastic about the Insights feature and the simplified, actionable data and recommendations it provided. However, most had to be directed by me to click on the Insights icon to display them.
I tried several different icons without improvement, eventually replacing them with more visible labels and expander arrows. I also added an Insights dropdown to the header of that section so insights from all modals could be viewed in one place.
Left to right: 1. Progression of Insights icon drafts (lightbulb,"info circle", then expander), 2. Implementation in Mood vs. Sleep Quality modal, 3. Insights dropdown menu within Interactions header
Subjects who either forgot the color-coded categories or had color-accessibility issues found interpreting the data based on color alone difficult. To address this, I first redesigned the graphs to include clearer labels, some of which could be triggered by a tap. The accessibility issue proved difficult to fix, and resulted in far-reaching changes to the overall MoJo design: "color-blind-friendly" palettes proved difficult to use since they needed to balance four equally-important colors against a dark background. Ultimately, the solution was to maintain the same color scheme as before, while assigning each mood category a unique shape. This change – implemented across the app – made the data-points easy to differentiate and 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)
Several subjects were curious about the point of including written entries in their Mood Check-ins since the Analyze page made use of all the other inputs they'd recorded. To address this, I added a new Language modal, which generates a word-cloud of the most-used words in a users’ written entries, sized and color-coded to reflect the mood category of the check-ins in which in which they appear most often (ex: “Party” shows up in red, indicating that the user tends to associate parties with high-energy, negative emotions). This change was intended to reward users for including written entries in their Check-ins, and offer the chance to take away basic insights about how the events or experiences they write about impact their emotional state.*
*I considered using an AI to more thoroughly analyze users' written entries, but the benefits were outweighed by the research indicating a strong need for digital privacy, which AI tools would conceivably violate.
Reflections Flow:
Originally, Reflections and the full Journal were two separate pages. Being able to "review" some entries but not others created confusion as to the differences between journal entry types (Reflection entries, entries tied to Check-ins, and free-write entries). The Cadence buttons overshadowed the more-important “Begin” button (see Settings). Based on these critiques, and knowing that a real life user would only be completing Reflections on a periodic basis, I scrapped that page altogether, placing everything in the new Journal page. Journal is a simplified list of every written entry, each with a brief text-preview. Check-in entries are distinguished by their mood-shapes, free-write entries have no mood-shapes, and Reflections are identified by their date-labels and a white border. List options allowing users to filter entries by order, type, and date-range make it easier to find what they’re looking for.
.png)
Redesign of Journal page - including entries list, image thumbnails, filters, and prominent "Begin" button
Settings:
While not a prototyped feature, the Settings menu had to be designed and fleshed out to accommodate changes I’d made to the other flows. Always at the top of the page, the Settings menu allows users to customize their MoJo experience: turning notifications on or off, enabling features like On This Day and The Last Time, and altering Check-in and Reflection Cadences to best suit each user's schedule.
Settings menu, showing all options as well as ways to customize Check-in and Reflection cadences by time and weekday.
NEXT STEPS
Building off test subjects’ enthusiasm for the app’s data analysis capabilities, future iterations of the app will include additional Interactions modals and insights (based on additional context data from Mood Check-ins). These may include data regarding location, social activity, time of day, or day-of-the-week.
While I was unable to design an onboarding flow due to limited project scope, I intended for the final step to be writing a “Letter to Self”, wherein users would write what they hoped to achieve through using the app. Once completed, the letter would be locked away for 90 days before becoming available to read again. Further research will be needed to assess the impact of this feature, but the intent is to ground the user’s MoJo experience in hope and intentionality from the start, and provide a reward for extended, routine engagement.
While the addition of labels and mood-category shapes did much to address the color-accessibility issues mentioned earlier, further testing with vision-impaired subjects is needed to ensure the app experience remains accessible for all. In the event that the changes I’ve made prove insufficient, I plan on adding a Settings option for one or more “color-blind modes”.
Lastly, in order to keep the experience of Mood Check-ins fresh, I intend to expand the library of prompts associated with each reported feeling. These would include more writing prompts for each feeling, and possibly recommended exercises without written components – for instance, after reporting feeling “Stressed” the user might receive a prompt to complete a brief, stress-targeted breathing or meditation exercise.
LEARNINGS & OPPORTUNITIES
During the research phase, most of the interview subjects expressed a preference for using analog journaling methods over digital ones, citing phone-fatigue, distractability, and a preference for the “feel” of a physical journal. While I am happy with the product I’ve created, and saw that some of these reluctant subjects were swayed by the features and capabilities of the MoJo platform, I’m still curious about whether this app would provide enough utility to appeal to physical-journal purists.
Some methods that could mitigate their concerns include screen-time limiters (currently a premium feature of the Stoic app) as well as skeumorphic integrations like turning the pages of a journal manually (as in Amazon’s Kindle reader). For the sake of project scope and working with the limitations of figma prototyping, I decided these concepts could be set aside, pending further research, while I focused on polishing the app's core structure and mechanics.