A Mental Organisation App: UX/UI Design Case Study
Have you ever wondered how many wellness apps there are out there? Tons. You'd lose count.
Nevertheless, two other students and I were required to come up with another one as part of our fourth project for Ironhack São Paulo's UX/UI design bootcamp. TagCloud was designed to help you organise and track your thoughts and feelings in a fast and easy way, using #tags.
Designing an app from scratch is not simple, and doing it for the first time is even harder. It seems like every 'brilliant' idea you have has already been thought of by someone else before you.
On that note, let me walk you through the highlights of our bumpy ride below.
💡 Brainstorming & Ideation
We wanted to create something related to psychology because it was what we related to the most amongst all the 'categories' we could choose from the brief.
We brainstormed for a couple of days and eventually had a good idea (or so we thought 😛). The three of us were psychotherapy patients, and we all had trouble remembering the things we intended to discuss during sessions. Therefore, we thought of creating something that could help people keep track of recurrent themes that cross their minds.
🔎 Research
As soon as we had all agreed on the idea, we crafted questions for quantitative and qualitative research with potential users (ChatGPT helped here, LOL).
We wanted to understand the frequency, why, and how people used mental health apps. Besides, we interviewed a mental health app user and an SME, a psychotherapist. Here are the relevant observations we got from them that were applied to our design:
- They often forget topics they want to discuss during therapy sessions. Still, they don't bother to write them down beforehand. Most don't have the habit of writing at all.
- Often, according to the therapist, patients only mention something very important when the session is about to finish.
- Making something clearly visible and concrete helps patients understand the dimension of a feeling or problem.
📊 Benchmark
At this point we realised our mistake. We had followed the wrong order of things. Why?
Only after research did we benchmark. We neglected the first questions we should have asked ourselves in the very beginning of the whole process:
Why is it important? Is there a repressed demand? Is there something our competitors are doing that needs improvement?
Benchmarking got us quite anxious, because there were countless apps doing what we had thought of, and very well. As students, it's naturally tough to be very innovative, but it didn't feel right for us to do something so ordinary.
In any case, I found some interesting data that validated the importance of creating new mental health apps (Deloitte, 2021: Mental health goes mobile: The mental health app market will keep on growing):
- The COVID-19 pandemic has exacerbated mental health concerns (…), with a dramatic rise in the prevalence of problems such as depression, anxiety, post-traumatic stress symptoms, and stress.
- To meet growing demand and capture interested audiences, mental health app creators and developers can (…) explore personalizing these services for users and customizing apps to encourage regular use and check-ins.
- Mental health apps can be a boon for those who cannot access — or would not seek — traditional care, as well as for people using them to supplement other therapeutic methods. The market’s strong growth points to a significant unmet need that these apps can fill.
↪ Bonus
Around two weeks before we had to finish this project, I found a mental health app that I really liked, How We Feel — I've been using it almost every day since. The app is a journal for your wellbeing, as described on the website.
(I wish I had found this waaaaay before so the group and I could have time to conduct a heuristic evaluation on it too, but well ¯\_(ツ)_/¯)
Here are the aspects we loved the most about the app:
- Screen 1: The possibility to check in anytime.
- Screen 2: It makes it easy for users to register their state by simply clicking on one of the colourful 'bubbles of feelings'.
- Screen 3: An overview of your daily check-ins.
- Screen 4: An overview of you check-ins over specific periods of time, and the dimension of the feelings registered by the user — a proportionate visual representation of them using colours, percentages, and bubbles of different sizes.
- Screen 5: A calendar, which is a broader view of when your check-ins happened and the emotion you selected that day.
👤 Personas
Our survey with potential users revealed that journalling is not a habit for most of them, which was where we saw the value of our app. However, we still wanted our design to include those who do journal too.
The majority of people who answered our survey were in their 20s or early 30s, which was the age range we were aiming for — generations that want technology to be able to benefit their wellbeing too.
On the left, there is Carlos, a ⚦ 20-y.o. student who only writes anything if he has to. On the right, there is Ingrid, a ♀ 31-y.o. married lawyer who is used to writing for organisation in several aspects of her life.
💡 + Brainstorming & Ideation
We decided that text would be an important aspect of our app because we wanted to design something journal-like, but in a very visual way.
The problem was, again, how were we supposed to devise a 'textual' solution for people who barely write? Then I had a eureka moment.
Word clouds! ☁️📝
They contain text (keywords), and are a very visual and appealing way of displaying it. Moreover, a word cloud would be a good tool for what the therapist had told us: making something clearly visible and concrete helps patients understand the dimension of a feeling or problem. Also, the words in the cloud could change in size according to how much they were mentioned by the user. Something like this:
Therefore, word clouds would be our app's most important feature — but not the only one.
🖼 Moodboard
I didn't know what I wanted to the moodboard to look like, but I did have some keywords I wanted it to express:
- Self-awareness
- Clouds
- Organisation
- Journal
- Daily
- Calm
- Harmony
I also found a colour palette I liked on Color Hunt, which helped me get a sense of the pictures I should add to the moodboard.
And the result was…
ℹ️ About the App
In one of the design critiques we had, our teacher advised us to write a short description of the app to give us more clarity on what it was supposed to do:
(The app's name–which we didn't have yet 😛) is a mental health app that helps you track, organise and catalog your thoughts and feelings through #tags. With (app's name), you can select your emotions, write, and notice some of your tendencies over time. This way, you can reflect upon your mental state during a certain period of time by yourself or, preferably, with the help of a professional.
📌 Features
Interviewing the therapist gave us some good ideas for the app's features.
At this point, we definitely knew there would be a word cloud made of keywords, or more specifically, tags. Moreover, it would also make a lot of sense to include a calendar on a mental tracking and organisation app such as ours.
It was tough to choose the other features though. The more features, the more time we would need to design them, and also, the less time we would have to improve what we already had.
Above is a list of the features we came up with, but we ended up crossing many of them out, as you can see.
Finally, we chose to stay with the following check-in features:
- ☁️🏷 Word Cloud of #tags: whenever the user would add anything on his check-in using a hashtag (#), #likethis, it would automatically be added to the word cloud. The more the user uses that tag, the more it gets bigger in the cloud.
- 🗓 Calendar: a calendar like any other, but it would display icons that represent what the user checked in on a given day: 🏷 (tags), 😰, ☺️, 😞 etc (how they were feeling), 📝 (free writing), or 🗒 (note to self).
- 😶 How Are You Feeling Today?: the user would be able to select a given emoji that represents his current mood, and that emotion (happy, sad, angry, anxious, etc) would automatically be added to the word cloud.
- 📝 Free Writing: a space for the user to write whatever or as much as wanted.
- 🗒 Note to Self: up to 250 characters, here the user would be able to write themselves a note — preferably something nice and encouraging — that would pop up to them at a random time of that same day (inspired by the Co-star app, which has a similar feature).
✍️ Lo-Fi Wireframes
I think we started sketching the lo-fi wireframes around two weeks before we had to finish the project. Some of them changed a bit when we started designing on hi-fi after we realised they would look better in a different way.
Unfortunately, we didn't have time to sketch all screens on paper before making their hi-fi design on Figma. As we were turning the lo-fi sketches into their hi-fi version, we noticed there were screens missing, but then we decided to directly design them on hi-fi (probably because we thought we had already wasted too much time brainstorming 😪).
🎨 Style Tile
To create the style tile, I used the colour picker tool on Figma to select some colours from the moodboard and then choose the best ones to be part of the design.
Regarding the typefaces, at first I wanted to use a single serif one. The app is a sort of digital journal, so I thought EB Garamond would allude to the idea of writing, organising, keeping a record of something, etc. However, our teacher reminded us that serif fonts for mobile UI are not the best, they are harder to read than sans serif. In the end, we used Lato (sans serif) for most of the text and EB Garamond for titles only, i.e., larger font sizes.
The icons are emojis that most of use on a daily basis and are so familiar with.
The primary button has a pretty standard shape, and the secondary is more subtle because otherwise we thought the interface would look too colourful or 'packed with information'.
📱 Hi-Fi Prototype
Undoubtedly, this was the most challenging bit for all of us, especially because it seemed like the more screens we made, the more there were still left to make. Besides, there were tons of things on Figma we had a hard time with. Animations, alignment, and auto-layout most of all 🥲
🏷☁️ Logo and Name
The name and logo were created after the prototype was finished because having everything completed gave us more clarity on what kind of logo and name would express the 'essence' of the app.
Most of the names we had thought of made it sound like a weather app, LOL. Eventually, we came up with TagCloud.
The logo was designed on Adobe Illustrator by another group member, Guilherme. We loved that it incorporated TagCloud's main colours and a cloud that looked like a tag, everything we were aiming for 👌🏻
🧠 Key Learnings
This project had many highs and lows for us as a group, but we believe that the result paid off and taught us a lot:
- Write about your process bit by bit, from the very beginning to the end. Otherwise, you may forget important details and it’ll take you ages to finish your case study (which was exactly what happened to me here…).
- Benchmark first of all, then come up with a problem to solve.
- Think of what you're trying to figure out when crafting your survey/interview questions, or you'll be left with useless information from potential users.
- Make atomic design. One thing at a time, then use auto-layout for everything on Figma.
Aaaaaanyway,
That's all folks! Thanks for reading 👋🏻
