Euthymia: Mood Tracking and Goal Setting App Design

Background

Euthymia is a web app prototype that I created for patients living with bipolar disorder, who have achieved enough stability in their lives to set targets for themselves and want to remain on track with their goals and medication. It will allow them to recognize negative patterns in their life and alert them to downswings or upturns in their moods.

It was created as a project for an interactive media design course, for which we were given the task to design an app that would be used on desktop, but designed for mobile first. This was to challenge us to apply responsive design, and the type of app we could create was open-ended. I knew right away that I wanted to create an app that could be used for social good.

Mental health issues are experienced by 1 in 5 Canadians. More than 1% of Canada’s population experiences bipolar disorder, which is more than 367,100 people. While the rate of bipolar disorder is relatively low compared to the prevalence of other mental illnesses, the impact on patients who live with the disorder is high, and it causes significant impairment in the daily lives of most patients (source). My own experiences and exposure to a number of people who struggle with the disorder has made it an important cause in my life. The idea of creating an app that could help with self-management of the disorder is one that I have had for some time.

There are a number of apps on the market that are designed for mental health management. Apps that have been wildly successful are ones that are designed with an appealing interface and user-friendly features. Mindfulness apps Headspace and Calm are very popular because they fit that criteria. Mood tracking apps for bipolar disorder exist and many have similar functionalities to the one that I designed, but the interfaces are often clunky or overly complex, or they are too limited in their features. The apps are often created by researchers or practitioners, so not as much thought is put into the UI/UX design. I wanted to design an app that could have features specific to bipolar disorder management within a clean, friendly, and easy-to-use interface.

Research

It was important to me that I consult people with lived experience as well as those who use mental health apps regardless of their diagnosis. I created a survey that I shared within my network in order to learn what they would value the most in a mental health app. The responses I received caused me to adjust my initial concept.

Survey data was compiled through Survey Monkey

I had initially planned to design an app that would allow users to recognize when they were about to experience a mood event by analyzing patterns in their text messages, social media use, etc. I realized that the most difficult aspect of this would be setting baselines and establishing what is normal for each user, as there is such a wide variety of experiences. Without being an expert in the field, my proposal could only be vague.

Before I consulted people with my survey, another idea I had would be to create an app that would be shared between the patient and a loved one. The loved one (a trusted friend or family member) would be able to input data from their observed experiences of the patient, and recognize patterns of behaviour and moods that they may not be able to see for themselves. The survey quickly made me realize, however, that giving someone else access to an app, regardless of your relationship with them, would be a security concern and would also raise the possibility that this person could use the app to manipulate the main user. Security (as well as motivation to use) were the highest concerns of those surveyed.

Learning that mood tracking, goal setting, and medication tracking were the most important features to those surveyed led me to choose those as the core functionalities of the app.

Sample responses were that the app should be easy to use, free from judgement, accepting of bad days, and motivational. Receiving that feedback along with what respondents would find most useful guided the design of my app.

These were some of the written responses to the question, “what is most important to you in a mental health app?”

For the aesthetic of the app, I looked through #selfhelp related hashtags on social media to see what those words mean to people who are already using apps on a daily basis. I created a mood board that reflected these trends and the type of imagery that I felt would appeal to this demographic.

Moodboard was assembled from images found throughout the web/social media.

While the app seems targeted towards those who are femme-identifying, my main goal was to use a friendly and familiar aesthetic with calming colours and inviting illustrations; it was not intended to target gender. While some might be more drawn to the app’s appearance than others, and some might be drawn to it almost purely for the appearance, keeping it easy to use and accessible was most important.

After I identified a colour palette and illustration style, I wanted to create a logo that would represent this mood, and was looking for a typeface that would be friendly and easy to read. I settled on the typeface Quicksand, and created a logo of a calm and peaceful facing using a watercolour brush. The name Euthymia is a medical term specific to clinical assessments of bipolar disorder, defined as a normal, tranquil mental state or mood. Achieving this state is the goal in treating bipolar disorder.

Here are my logo roughs and type explorations:

I created illustrations with a tablet using illustrator brushes. I wanted them to look hand-drawn, but they also needed to be vectors so that I could resize them when designing different screens. I created my first mockup of what I wanted the login screen to look like.

First mockup, which was later refined into the login screen

After my initial sketches, I began building a prototype of the mobile app in Adobe XD. I tested the app’s user flow with my classmates, and incorporated their feedback into my final design. A challenge was arranging my screens in a way that would be user-friendly, as accessibility in the app is key.

These responses were from my peers, who first tested my prototype.

This was my final solution for mobile:

Prototype created in Adobe XD.

You can use the prototype here.

These are my screens for web:

Here is a comparison of the home screens in mobile, tablet and web, showing the dashboard feature specific to the web app:

Overall, using soft, calming colours created an app that would be appealing to use, and the gentle language and simple interface would be easy enough to use during times of distress. Giving the user access to all of the features of the app within the home screen maintains functionality, which is central to the app’s design.

Results

The app is used for mood tracking, reminders, goal setting, and encouragement, which were the features chosen as most important by the people I surveyed online. The app will sync with the users’ Google calendars or iCals, so that they can check off the tasks they completed at the end of each day, and so that they can look at back at life events when identifying what may have triggered a mood event. Medication and habit reminders can be added in the app and synced with the calendar, given discreet “code” names if the user wishes (ex., instead of “take meds,” the user could write something like “drink water” or “feed cat” as a display in Google calendar/iCal, which will have a direct meaning when opened inside of the app). Habits and goals are all user created: the user can schedule time to complete wellness activities such as meditation or therapy, or any custom activity that they find helps with their recovery. This is non-judgemental and allows the user to work at their own pace.

At the end of each day, the user will get a reminder to use the app, which will start by asking them questions like, “How did you feel today?”, followed by a space for them to write notes if they desire. Follow-up questions would be, “did you sleep enough?” “did you take your medication?” and “did you complete your goals?” (Events from the users’ calendar and reminders will pop up, and they can check which ones they completed.) The app will say things like, “good job,” or “that’s ok, today was only one day in your life,” as reinforcement.

Users can track patterns in moods and productivity over time with simple graphs, and can go back to each day in their calendar to review events and triggers. This will allow them to track their moods as well as their habits, and to stay on track with goals and recognize progress.

By making design decisions that were research-based and honed through peer testing, I was able to create a prototype that illustrates how an app like this could look and feel to the user. This was my first experience with app design, and it taught me how crucial it is to involve others in the process. The project was very important to me, and is something I would love to develop into a complete app.