Why did I design and build a mood tracking app? — a UX case study

Mac Kozal
UX Collective
Published in
8 min readApr 29, 2019

Download app: Apple App Store or Google Play Store
The app was made as a side project by me and my brother Bart Kozal

Mood Tracker App

Background

Positive psychology is the scientific study of positive human functioning and flourishing on multiple dimensions of life (biological, personal, relational, institutional, cultural, etc.). What holds the highest value in life and contribute the most to a well-lived and fulfilling life? The concept is not new; ancient Greeks used the term eudaimonia to describe a happy and flourishing life. Scholars and philosophers like Plato, Socrates, and Zeno of Citium were looking for different methods how can we reach eudaimonia.

In 1954 Abraham Maslow — an American psychologist who is well known for creating a hierarchy of needs — wrote a book “Motivation and Personality.” He called the final chapter “Toward a Positive Psychology.” Since then many psychologists have been focused on the promotion of mental health rather than treating mental illness. In 1998 Martin Seligman chose positive psychology as the theme for his term as president of the American Psychological Association.

Martin Seligman and Mihaly Csikszentmihalyi — fathers of contemporary positive psychology (source: https://commons.wikimedia.org)

Seligman said that meaningful life has to include:

  • Positive emotions, connected to positive outcomes, such as longer life and healthier social relationships
  • Engagement or involvement in activities that draws and builds upon your interests
  • Relationships whether they are work-related, familial, romantic, or platonic
  • Meaning aka. Purpose. Despite potential challenges, working with meaning drives people to continue striving for a desirable goal.
  • Accomplishments are the pursuit of success and mastery

Studies show that positive psychology interventions improve well-being and lower depression levels. Among others, mood tracking is a technique for improving mental health where a person records him/her mood at set time intervals, to help identify patterns in how their mood varies. It’s a useful method for someone who wants to understand their behavior better. It can also be a self-help technique for people suffering from mood disorders such as anxiety, clinical depression, and bipolar disorder.

Mood Tracking Apps on the market

Many apps help with mood tracking. I checked some of the most popular in the AppStore and made a simple card sorting exercise to discover some patterns.

Typology
Creators of mood tracking apps decide to choose one of a few methods of how you input data. You can either track only your mood or track your mood combined with one of several preselected activities. Some apps allow users to track their mood only in set time intervals, and others don’t limit that. A less popular trend is to share data with your social circle.

Input methods
The predominant default input method allows users to track their current mood. Many apps see mood tracking as a continuous series of different moods rather than a series of dominant mood per day. Users launch an app, choose their current state of mind and close the app.

A less popular pattern is to display a calendar-like view and allow users to track one state of mind per day. An interesting but unusual approach is to present a kind of survey. Users answer a couple of questions, and their mood is calculated based on those answers.

How to display results? Majority of apps show results as quantitative data that users can compare and analyze in statistics mode. Very often they can add notes or comments to their entries to have more qualitative context. Displaying results only as emoji (or different type of icons) is a minority.

Input Efficiency
Most apps put attention on how fast user can add new entries. Speed seems to be one of the essential design priorities. Only apps that collect data in the form of the survey cannot fulfill this principle.

Mental model

All apps on the market share a similar mental model. Users launch an app, register their mood and add optional information. Then, they can check the statistics and get some insights or close the app. The pressure is put on adding a continuous stream of moods. Thanks to that users can relate their spirit to activities they performed and use this information for reflection and improvements.

User flow diagram of a typical mood tracking app.

In our project, we decided to adjust the broadly used mental model. We simplified it a little bit.

Mood Tracker user flow diagram

Users turn the app on, see the overview with some insights, and from there they can register their daily mood. In my opinion, this model can have some advantages. It’s a more visual approach; users see the insight right away after launching the app. This might help to identify patterns in how users mood varies.

Mood Tracker Principles

My notepad with some early sketches of Mood Tracker design

At the beginning of the design works, I came up with a few principles that helped me during that phase:

  • Be more visible — show the results right away and give instant feedback for the users.
  • Trigger the imagination
  • Track mood in a fast way
  • Track mood only once per day — don’t let users spend too much time in the app
  • Be private and secure
  • Minimal navigation
  • Embrace vitals, remove not essential features
  • MVP and MLP concept

Visual Design

User flow diagram from Figma
Gif that illustrates the Mood Tracker concept

There are three main screen designs; the calendar view, statistics view, and settings. We didn’t need to have the whole design system for them — a simple style guide was enough. All I wanted to achieve was to unify colors, box styles, and paddings.

Basic visual styles

We decided to use the bottom bar — always accessible under a thumb for global navigation. On top of the screen, there is secondary, less used navigation for time selection.

App navigation

The main screen is a calendar view with a summarize of former user moods. It’s easy to take a look and make a reflection of your previous state of mind. We decided to use emojis for mood tracking because there are super flexible. Some people can use them for quantitative measurements; others can aim for a more qualitative approach. We decided to limit users to choose only one emoji per day. They have to make a reflection upfront and summarize the whole day instead of track every activity they performed. The design hypothesis behind that is to trigger more mindfull results. Users have to take more significant cognitive effort to summarize the whole day, and it might be more meaningful as a result. We also wanted users to spend as little time as possible with the app.

Calendar view visual elements

To add a new entry, users have to press the date bubble and choose their daily mood from a small modal.

Adding new mood modal

We wanted to make the app quickly and add new features later if necessary. Right now we provide only the elementary statistics — how often have you got a different state of mind? User can choose between the weekly, monthly and yearly time frame for now.

Statistics screen

Motion Design — Microinteractions

Micro-interactions are tiny animations that have one, but essential purpose. They delight the user experience by making engaging moments, and the whole app looks more friendly and approachable. They also provide instant and relevant feedback about a completed action. The drawback is they are quite a time consuming to code. We limit them and plan to work on them later when we implement more necessary features.

From the design perspective, there are very unified. I decided to make all transitions 300 ms long with easing-in-out mode.

Simple easing curve I used for all microinteractions.
Basic microinteractions we used: splash screen transition, main menu transition and statistics screen

Development

We wanted to publish the app on all mobile platforms. We were looking for an effective and time-saving solution. So instead of using native languages per platform, we decided to use React Native, Expo, and TypeScript. The advantage of this solution is multiplatform compatibility, convenient development, and easy releases. We think we saved a lot of time because of this decision.

Plans for future

With the MVP approach, we postponed a lot of not essential functions. We made an app free for the users, and we want to keep the basic functionality free with the upcoming releases. We plan to make the pro version with extended functionality like:

  • possibility to add more moods
  • customizable notifications
  • emoji sets and mood editor
  • more advanced stats
  • PIN lock
  • Backups
  • Sync
  • Export all entries

What have I learned

It was a fun and very satisfying project. I use Mood Tracker every day since the early inner beta versions. From a professional perspective, I improved my knowledge about positive psychology and cognitive patterns of how systems are used. What is our design goal and how can we relate that to the users’ behavior? I also worked out a better way of describing the design components, so they are more understandable for developers. It was a very high-grade time I spend working with my brother.

The first paragraph about positive psychology is based on Wikipedia articles about the topic

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Mac Kozal

I am a UX/Product Designer. I graduated as an architect and I combine the processes of those two specialties in my daily routine. https://mackozal.com

No responses yet

What are your thoughts?