UX/UI case study: Designing an emotion tracking app

6 min readFeb 22, 2023

Ironhack Project #4

Introduction

With my new working partner Liliana Zeferino, we decided on a topic for our next project. Promoting Emotional Intelligence.
To get an overview of the topic, we conducted first interviews and did research on the topic.

Insights of our research

We found that people prefer to discuss their emotions with other people, but of course they are not always available. What caught our attention were the responses to our question about whether respondents usually knew how they were feeling, or whether they could use some support in finding out. 85% agreed!

Obviously, our potential users want a way to better understand themselves and their own emotions.

We found a few apps that helped people do just that: Journaling apps, meditation apps, and emotion tracker apps.
We compared all the apps and looked for people who had experience with such apps to interview again:

The result: those who used such apps stopped using them because they lacked the social aspect and wanted to express themselves creatively. However, 82% would be happy to use an emotion-tracking app again if tracking emotions 1. didn’t take a lot of time, 2. was a pleasure to use, and 3. taught them something about their patterns.

In fact, the competitor analysis showed that none of the apps offered focused on the social and creative aspects!

Persona

Let me introduce Sarah. Sarah is a young, dedicated, and self-conscious woman. She is interested in getting to know herself and her patterns better, as she doesn’t understand why she is often so subject to her own moods. She has a demanding job that she enjoys. Therefore, she doesn’t have much time to go to therapy or meet with her friends for long periods of time to talk about feelings. She wants an app with a social touch that doesn’t take a lot of time, lets her track her emotions, and helps her figure out how she’s feeling when she’s not sure.

Self-conscious people need a way to track and share their emotions, because they want to discover patterns in order to understand their feelings better.

So…

How might we provide a way to track and share collected data in order to help self-conscious people to understand their feelings better?

With hundreds of ideas in mind for what an emotional intelligence and mood-tracking app could look like, we set to work. The following 3 ideas made it into implementation after an extensive process, evaluation and testing:

The app should allow you to slowly approach a feeling. That’s why it doesn’t immediately ask: How are you feeling today? Instead, the user is first asked the rough direction: low energy pleasant, high energy pleasant, low energy unpleasant, high energy unpleasant and ‘i am not sure’.
Users can choose from a palette of colors and express how they feel in the form of shapes, lines and sweeps. According to the chosen color and shape, the app analyzes and suggests which category might fit.
Like the “How are you today?” section of a well-known weekly newspaper here in Germany (ZEIT), app users can see what moods the community of all app users had. This creates a sense of community and the feeling of not being alone with the emotion. Furthermore, it can be very motivating to compare your data with the general mood.

Colors & Shapes

We designed a mood board and defined a color palette to represent the brand attributes: open minded, creative, artistic, social, playful but still serious.

This was not easy! We changed the palette umpteen times and tested it several times. Finally, we found the perfect colors and implemented an option that allows users to change the colors as desired, thus creating a solution for people with visual impairment at the same time.

Deciding the color palette was not easy.

FEELiU

This is the heart of our work!

After opening the app, you will first see the main screen and the past entries.
In the bottom menu, you can create a new entry by clicking on the plus. By the way, we designed and drew all the icons ourselves.
After that, you can choose colors and express your emotion, but you don’t have to. You can skip this point if you want.
Then the app analyzes the drawing and suggests a mood direction accordingly: Low energy pleasant? The corresponding color (blue in this case) is displayed slightly larger. You can also choose another category, or the ‘I don’t know’ option.
After that you get to our emoticons map. Here you can view different emotions, you can add and select new ones (here ‘calm’).
Then: the tracking page. There, the first thing you see is how many people using the app have chosen this emotion in real time (social character). A short explanation of the emotion and different ways to specify the data.
After that, the emotion can be seen as a new entry on the main page.
From here you get to the analysis page. There you have an overview of all your tracked data, which is displayed in different charts.
This is possible for the collected data of the whole community.
Back on the home page, you can also click on the profile picture to make various settings.

Usability Testing

We had several users test our app and had valuable insights!
Overall, our UI was very well received. Also, the good interaction and the simplicity were praised.
What was still missing was the possibility to add multiple emotions at the same time. We added this option. Also, the category “Pain” was added in the tracking page. The charts were partly not understandable, because the colors could not be assigned to the respective categories anymore. Therefore we added a short explanation on both analysis pages.

What comes next

The next possible steps could be:

Develop the other’s sections of the app
Test with people that are not users of this type of app
Improve based on testing results
Present the project to mental health professionals
Add Gamification (tracked 4 days in a row!)

Final thoughts

Teamwork brings results! Is important to listen to our intuition. Most of the time it is right. Another learning was: Unfortunately Figma is not an animation tool, creating several animations was really a challenge! I also learned a lot about how to use text with tricky colors — yellow for example.
Also presenting data can be complex. Then: Time management is fundamental. I was so happy to work with Lili and learned a lot from a true time management expert!