• UX Case Study: Mood Talk — A Mental Health app
  • Balint Nagy
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: niayyy
  • Proofreader: Roc, Jessica

User Experience Case study: Mood Talk — a mental health app

Mood Talk — Tell your feelings to others who are facing the same challenges as you

In this world, many people are facing some kind of psychological problem, such as loneliness, insomnia, depression, stress, anxiety or personality disorder. Unfortunately, the list of possibilities is not complete.

Wouldn’t it be great if you could talk to other people who are facing or have gone through the same problems, who know how you feel and can give practical advice on how to overcome these terrible situations? I think it would be great. In fact, I thought it was so good that I designed an app to solve the problem.

background

As part of my design school assignment, I was asked to design a health-themed app. I believe networking is the key to solving most of our problems. Even having valuable connections is one of life’s greatest assets, and the way we look at our relationships and networks can help us get a better position in our careers and give us an edge in life.

When I decided to do a project, my main idea was to make people who deal with mental disorders a little happier. Or, better yet, “talk them out” of a difficult situation.

Research and Findings

survey

In the end I managed to gather 42 survey answers. In the course of my research, these were the most important questions I wanted to answer:

  • How many people face psychological problems?
  • Which age group is most affected?
  • What is the best way to solve these problems?

interview

I have conducted five interviews to further expand the topic to be more relevant to real people. While I got some answers from my survey, I’d like to focus on “how it started” here.

It turns out that in most cases, a tragic life event plays the most important role in these cases. But sometimes even normal things can cause problems, such as not being able to find time to see friends and family because of work or study. Move to another city or country. In addition, just having a stressful and overwhelmed life can lead to serious problems.

Analyze the given data

A great deal of research has been done on this topic by field experts and professors from different universities. You can get information for free just by doing a Google search.


I found a lot of information that confirmed what I had found. I also read a lot about prevention methods and more ways to overcome these conditions.

My user

Carl Williams has just moved to Holland because he’s been offered a good job. Unfortunately, he doesn’t speak the local language, and even in the workplace, everyone speaks English, but when it comes to more personal conversations, his colleagues switch back to their native language, making it difficult for Carl to fit into their social circle.

After a while, he became lonely as he tried to form new relationships. He is likely to suffer from depression soon.

Carl recently moved to the Netherlands and needed to find new friends and a listening community because he felt lonely

The solution

Since communication and networking are key elements of problem solving, I need to find features that help users in these behaviors. I brainstormed the features of the project and came up with the following ideas.

  • Daily Mood tracking
  • Real life group activities
  • Private group chat
  • Emotional sharing function

As I searched for possible solutions, I kept in mind that these features had to be connected, but at the same time I had to realize that some people might not even participate in real life activities.

structure

My idea is simple, a home screen where you can see the latest posts from your friends. Users also have the opportunity to write a new article. In the navigation bar, there are options for real life events and private group chats.

After a lot of feedback and usability testing, the final version changed a lot.

Visual effect

As a first step, I analyzed the applications of my major competitors to see what colors, images and ICONS they used to make their websites more attractive and functional.

I wanted to find apps that operate in the same space that connect people to create better emotions. Through visual analysis, I can draw some conclusions. Applications tend to use friendly, light-hearted colors. Their focus on community and how to connect them gives me a lot of inspiration for visual effects.

Mood board

I ended up creating my mood board, where I focused on a fun, friendly approach. A little childish. I use Baloo Da 2 as my primary font because it really fits in with my visual vision.

Establish design system

Needless to say, in a real life design project it takes longer to build a real life design system, but let’s focus on the essence of the application here.

The final interface

Finally, this is the final look of some of the pages designed for the final version of the application

Micro animation

Since the next big step was to add microanimation to our project, I wanted to show how it was rendered in a short video format. To create the internal actions, I used InVision Studio.

Project summary

This is my first full project from UX to UI. If I had to do it all over again, I would choose a less broad topic. In retrospect, the idea of tackling a mental disorder without any domain knowledge was bold in itself. As the first project, I am satisfied with the result, but with my current knowledge, I am sure I can do better.

Since this was the first project I needed to implement microanimation, it was an extra challenge, but I learned a lot about the importance of proper layer naming and proper grouping, and now I see how important they are in a larger project.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.


The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.