Blossom Case Study

Background
Roughly 85% of people worldwide are reported to have low self-esteem, which has been linked to violent behavior, school dropout rates, teenage pregnancy, suicide, low academic achievement, etc. The World Health Organization (WHO) in reports that more deaths are caused by suicide every year than homicide or war.

Problem
Low self-esteem causes a variety of problems and continues to be stigmatized around the world. In addition, many people may not have access to face-to-face care.

Solution
I designed an end-to-end mental health app that helps users express their feelings through a community forum and real-time chat with volunteer care workers. Users can also enjoy collecting virtual flowers, which they can gift to other users.

Duration
6 weeks

Role
UX Designer
‍
Tools
Figma
Whimsical
Otter.AI
Notion
Procreate
Photoshop

Preview of Features

Problem: People want somebody to talk to when they are feeling stressed, anxious or depressed.

Solution: A community where users can share their feelings and read/comment on other user posts.

Problem: Users just want somebody to talk to when they are feeling stressed, anxious or depressed.

Solution: A community where users can share their feelings and read/comment on other user posts.

Problem: Users want to talk to somebody more immediately to avoid spiraling deep in their negative thoughts.
‍
Solution: A chat feature, which connects users with volunteer care workers in real-time.

Problem: Users typically don't associate electronics with mental wellness. They also want a low-commitment reward system, as maintaining daily log-in streaks creates additional stress for them.
‍
‍Solution: I designed a virtual garden feature. Users collect flowers that "blossom" every seventh log in. These flowers can be gifted to other users in-app to share positivity.

Problem: Users associate nature with mental wellness. They also want a low-commitment reward system.
‍
‍Solution: I designed a virtual garden feature. Users collect flowers that "blossom" every seventh log in. These flowers can be gifted to other users in-app.

Research

I kicked off my project by researching the domain of mental health. This was crucial in helping me identify current problems. Here are some of my key insights from my secondary research:

Low self-esteem, low self-confidence, and depression tend to co-exist. 

Additionally, people with low self-esteem often struggle with asking for help, 
As many as 20,000 mental health apps exist today and help make support more accessible in communities where mental health is stigmatized.
Due to the pandemic, many people are unable to access face-to-face care, and seek support online, signaling an urgent need for effective and easily available digital tools.

Competitive Analysis

Next, I conducted a competitive analysis and features analysis, focusing on the strengths and weaknesses of existing mental health apps on the market. At this stage, I looked at a LOT of mental health apps since I had minimal experience with this domain, and wanted to ensure I had a thorough understanding of the patterns in mental health apps. I also looked at indirect competitors such as Youtube and Spotify, which offer mental health help videos and soundtracks.

User Interviews

I was now ready to hear from actual humans, and interviewed five participants; four females and one male, all in their 20s and 30s. All interviewees had previous experience using a mental health-related app, and have experience/experience low-self esteem. I created an interview script as a reference, which can be viewed here and a full in-depth report of my findings can be viewed here
‍

Main Findings

A full report of my findings can be viewed here

3 out of 5 are motivated to practice self-care as a way to cope with stress and clear their minds/better accept things
3 out of 5 just want somebody to talk to
3 out of 5 want something simple and find repetitive and long processes a pain.
3 out of 5 are attracted to “pretty, clean, cutesy, colorful UI”

I think like I like things that are no pressure, no commitment. If I miss out on a daily streak, I feel bad about myself.
‍- K, Singapore, 23

"I don't want to go in, feel overwhelmed and have to choose all these different routes (exercise, gratification, etc.)
- M, 29, America

“I just need somebody else on the other side to listen"
- T, 30s, America

"Mental health apps often ask for your payment information and charge you after the trial, which makes me not ever want to try them"

- J, 26, Singapore

Redefined Problem Statement

My initial problem statement was low self-esteem causes a variety of mental health continue to be stigmatized around the world." Through my user interviews, a more specific problem emerged:
‍
Users who experience low self-esteem or negative thoughts typically cope by talking to other humans. In other words, they just want somebody to talk to. In addition, having to pay a fee was another pain. Therefore, how might we provide an affordable solution that helps people connect with others and create a space where users are able to confide and share their thoughts with others?
‍

Define

Affinity Map, Persona and Storyboard

Now it was time to synthesize data! I created an affinity map to help me visualize and identify similarities across the participants. Through analyzing the patterns, a clear persona emerged. I also drew a storyboard with Ayla, my persona to help further define and understand her problems.

A snippet of my affinity map. Click on the image to view the full version.

Storyboard Context: Ayla feels that she has been taking a long time to finish her school project. She begins to compare herself to her peers, and thinks negative thoughts about herself. She wishes she could speak with somebody about these thoughts..

Project Goals

After, I brainstormed the goals of the business, user and technical side, as well as technical restraints. This helped me envision the end product and think about the project realistically, accounting for not only user goals, but business goals and technical restraints.

Information Architecture - Site Map

I now began brainstorming the features and screens that the app would contain.
‍
First, I made a Road Features Map in addition to the site map below, which can be viewed here. This deliverable helped me ideate and prioritize features, such as account creation, community pages, etc. Once I had my road features map, I then created a site map to further visualize my ideas in terms of screens.
‍
At this stage, I frequently referred to existing mental health apps, as well as my persona, Ayla to ensure that I was answering her needs: somebody to talk to, and something simple. As a result, I decided to implement a community and chat feature. Based on my user interviews, and competitive analysis, users seem to associate nature with mental wellness, so I had the idea of creating a virtual garden. It was also at this stage that I decided to name the app "Blossom", as early on, I liked the concept of a user "blossoming" and alleviating their mental health struggles.

Ideate

Information Architecture

Referring to Ayla's needs, I structured a user flow - the journey that Ayla would take through the app in order to remedy her problems: using the community feature to write a post, or chatting with a volunteer care worker.
‍

Low-fi Wireframes

Next, I began to put my ideas on (digital) paper. Once again, I referenced Ayla (my persona), and the patterns across various mental health apps to support my design decisions.

Mood board and Logo

To help keep my design concept strong and consistent, I collected images and screenshots into a mood board. I also sketched some logos in procreate and photoshop, which can be seen below.

Click to view all my logo sketches

Mid-fi Wireframes

After exploring ideas on paper, I was ready to create these screens on a digital medium.

Changes: It was at this stage that I reevaluated my initial sketches and decided that the AI bot would require more research, especially since only one user had mentioned the idea. I also took out the "post anonymously" screen, implementing the feature directly on the "compose a post" screen. I also decided against the temporary mascot which doubled as the AI chatbot.
‍

Click to view all my mid-fi wireframes

Prototype & Test

Hi-Fi Designs and Responsive Prototype

Once I finished creating the mid-fi wireframes, I added color and made a clickable prototype based on my userflow.

Chat with Careworkers..

Share your thoughts..

Gift flowers to others..

Usability Test

Now it was time to test the prototype! I asked participants to conduct tasks based on scenarios in order to validate the features I created and to uncover whether the prototype met their expectations. View the full test outline here

Findings

Once again, I organized the findings into an affinity map and then into a priority matrix. There was a lot of positive feedback, as well as pain points and suggestions. I prioritized the suggestions in terms of instances, risk/cost, and whether it was an error or quick win.

A snippet of my affinity map. Click on the image to view the full version.

Main Findings

You can check out the full report here.

3 out of 5 really liked the garden and flower feature and thought it was a nice way to share positivity with friends. They also liked how it simultaneously offered leisure in the form of a "game" that lets you grow/work towards a goal.
5 out of 5 thought the UI was welcoming and relaxing
3 out of 5 liked how community content was organized into categories. Through these categories, they felt that they could find people who share similar problems as them
3 out of 5 didn’t immediately know how to create a post and expected it to be on the home screen.
2 out of 5 suggested elaborating on the gift a flower to make it more intimate (gifting on post page/gifting a card)
2 out of 5 wanted to be able to choose which care worker to talk to, and more information on who the care workers were.

Revisions

After conducting the usability test, four main pain points became evident. You can view the key changes that I made below:

Users want onboarding instructions
Although all users were familiar with LINE, and successfully located the translation button for incoming messages, 2 out of five mentioned wanting further instructions, or an animated arrow pointing towards the new feature to make it user-friendly for first time users as well. Furthermore, All users were confused by the information bubble when trying to translate outgoing messages. Most of them didn't read or understand how the message was worded, and thought they made a mistake when they clicked it and it led them to the settings page.
More intuitive translation button
Although all users were familiar with LINE, two mentioned wanting a more intuitive translation button. They wanted to be able to easily access it, without always having to hold and press down on the message.
The translation page was confusing Users found the translation page overwhelming, with too many buttons.
Not all users are familiar with the term, "transliteration". Two users did not know what "transliterate" meant, but understood after they completed the task.

Edge Cases

In order to account for potential errors, I thought of an edge case.

Chat with a care worker.... or your friends

In the current designs, you can send a message to other users. However, the message icon is tucked away into the user's profile page. So, I decided to redesign the chat screen so that there are two options: chat with a care worker, or your friends.

Reflections

What I learned

Everyone has different methods of coping with mental illness. I originally planned on making an app centered around positive self-affirmations. However, after conducting user interviews, I discovered that most people just need somebody to talk to; whether it be friends, family or strangers.
While some users seek a comprehensive mental health app, it can also be overwhelming to people who are already stressed. Users want a balance- something relatively simple that still offers small delights like extra information without being overwhelming.

Challenges I faced

Mental health is often not associated with electronics. This was challenging for me as users expressed a preference for stepping away from electronics and instead taking a walk, etc. So, I tried my best to create a soothing UI with elements of nature and a virtual garden to answer these needs.

What I would have done differently

I definitely would have liked to interview a larger sample size to gather further insights. However, due to a strict timeline, I was unable to schedule interviews.

Next Steps

Conduct another usability test to confirm whether pain points were effectively resolved.
Create a user flow/dashboard view for volunteer careworkers
Test and iterate again!