Emotion App
An app that accompanies people who are experiencing negativity
Launching Spring 2022
Product Designer
Figma, Adobe XD, Adobe Illustrator
User Research, Interaction Design, Visual Design
Follow the pebbles that shine when the lights go out. 
Glean them, read them, and let them guide you to the light.
Track your Emotion
Understand how your emotion is doing.
Collect the Pebbles
Read stories or advice for each emotion
Save the Pebbles
Put them in your pocket for next time
Receive Talk Invitation
Receive the invitation to talk with professionals
Problem Statement
How might we bridge the gap between international students
and the mental health resources at school?
Even when facing an inordinate amount of stress, international students hesitate to draw on mental health resources.

Upon leaving their home country for the United States, many international students are facing the expectation that they must be successful both academically and vocationally success. While this can be a shared pressure for all, the additional solitude, language barrier, and culture shock worsen their mental health. Still, few of them utilize the university's mental health resources.

This project address the inability of international students to seek mental health assistance. More specifically, I adopt a social approach to designing interventions to bridge the gap between international students and mental health resources.
User Research
What happened before depression?
The challenge is to connect the students with the mental health resource. Hence, I wanted to start by seeing what the students were experiencing when handling negative emotions. And then, I can more clearly look into their decision-making process of where and who to reach for help.

However, as I looked into these international students through surveys and interviews, I gradually realized this is not just one issue with one solution but a flawed journey that needs help.
Visualizing users' behavioral change across their emotional journey
I conducted interviews with 6 International students. The interview discussed: ① Their experience of feeling negative emotions and handling them. ② Their attitude toward mental health issues. ③ Their concerns over seeking help from resources.

I visualized the data to make sense of the interviews' myriad insights. I know that time is a critical factor in the problem; hence I delineated the developmental trajectory of users' journey before and after exceeding the capacity. And then, I placed users' behaviors/emotions in each phase.
Go see the Personas →
Three pillars for ideating and designing
After comprehending the behaviors through the developmental trajectory, I synthesized the three pain points through the affinity wall. These overarching pain points serve as the later ideating and designing pillars.
① Not sure when they should seek help
Experiencing negativity is a long and winding process. Students are feeling complex emotions. They only realize they need help when things are severe.
② Current solutions are too serious or too hard to keep up with
Most solutions are under the name of helping people go through mental health issues. However, students are still not aware or in denial of their mental stage at this stage. Even if they try the solutions, sometimes it requires a lot of effort, so students will stop engaging when they are on a better day.
③ Felt uncomfortable reaching out
When students finally feel the urgency to seek help, they simultaneously get hesitant. They are afraid of being seen seeking help and are reluctant to associate themselves with the syndromes described by mental health institutes. For some, even the idea of reaching out and speaking about their emotion makes them feel uncomfortable.
Do Nothing
Alone with No Support
Can't Exactly Tell
What are They Feeling
Isolate Themselves
Felt Vulnerable when
Letting Others Know
Suddenly Nees Help
Suddenly Don't
Not sure when they should seek help
Current solutions are too serious or too hard to keep up with
Felt uncomfortable reaching out
Diverging into a thousand and
converging into the one
I reached the three overarching research insights that are crucial to the problem statement. They served as my start to ideate possible ideas. From there, I sketched and then storyboarded 8 possible solutions.

Afterward, I tried to converge them into feasible ideas. Then, I took the storyboards to the users to do the following concept testings and dot voting. And I finally decided to go for the following three final functions: Emotional Tracker, Relatable Content, and Anonymous Talk.
Go see the Sketches/Storyboarding →
Emotion Tracker
To help users realize when do they need help, Pebbles allows users to track their emotions as they tap on the emotion pebbles.
Relatable Content
After users express their emotions to the tracker, it surprises them with relatable content from people with similar emotional experiences.
Anonymous Talk
When the tracker realizes the user is exceeding their threshold of handling negative emotions, it can actively ask the user if they would like to talk with a professional anonymously.
Designing the Journey
A journey that takes users on
a frictionless ride to their peace of mind
There are multiple things Pebbles can allow users to accomplish. However, I go back to the users to set the core functions and reach the MVP to ship. I diverged what users want to do when they feel negativity and converged them into several core Jobs to Be Done (JTBD).

The three are : (A) I want to quickly and accurately get the content that I feel like (B) I want to help people who are feeling the way I did (C) I want to check my recent emotional behavior, so I know when I will need professional help.

Based on the JTBD, I exhausted the user flows. Next, I figured out primary objects (and their views) for Pebbles from the flow. Then, with the clarity of what should be in the product, I structured the objects into the information architecture.
Designing the Experience
Building the experience for users at their lows
Pebbles takes care of users when they're at their lows; hence, I spent extra energy deliberating what a decent experience is. I diverged the wireframe of each interaction and mocked up the design for user testing.

I developed multiple options for each screen and a list of essential criteria for users in the design process. The method allows me to weigh which option is the most viable in the users' shoes.

Following are several quick demos of the design process for the three core functions in Pebbles: Emotion Tracker, Relatable Content, and Anonymous Talk.
Function 1
Emotion Tracker
A tracking approach that is effective and frictionless
At this stage, students experience fluctuating emotions. Furthermore, their emotion at the moment can severely influence their motivation to track their feeling. Hence, I needed to evaluate the design with criteria generated based on their state of mind.

I extracted some common behaviors from the user research, such as feeling discouraged to do complicated things, can't clearly state their emotions, etc. And then, I used them to evaluate the multiple options that I ideated. Finally, I decided to go with the third option: offer users choices of emotions to pick.
Information Architecture
Giving users the message that will make them feel at ease using
It can be tricky deciding what to show users on the first screen, as the first sight of the architecture can influence users' perception of the whole product.

From the research, we know that solutions that stress too much on their tracking purpose sometimes give users unnecessary pressure and can, in turn, push them away from regularly using. Hence instead of telling users that this is an emotion tracker, I decided to send the message that this is the place to explore their emotions. I picked the design to show only the emotion-related content as users are scrolling discovering. Ensure users an environment that they can focus on how they feel.
Function 2
Collect Pebbles
Accessing Pebbles
User flow of accessing the content behind the emotion
Users get relatable content from tapping the pebbles. However, users' exploration of emotion does not stop at tapping on one pebble. So, to allow more exploration, instead of directly bringing users to the content page after tapping the emotion pebble, I added a preview page. With this, users can feel freer to go in and out of different pebbles.
Saving Pebbles-Functioning
Lay the research foundation and define the save function
Before jumping into designing for saving the pebbles, I tried to understand the insights behind the action of "saving. " I went back to the users for their experience of saving information and concluded the following insights (see the following image).

Afterward, I blended the insights around saving with the pillar and came to these two more-defined goals for the save function: retrieving when in need and sharing with people with similar experiences.
Saving Pebbles-Layout
Product thinking to guide users to finish the two main goals
The first goal is to help users find the content when they need it. At this moment, the users' mental model is "I'm looking for the content about the specific emotion." So the interface should focus on the emotion and then the content about the emotion. Hence I went for the Grid, which prioritized finding the emotion.
Another goal is to allow users to share their experiences with other people with similar experiences. So other than the pebbles collection, users can leave a short bio and the pebbles they share. On this page, I deliberately only allow users to choose a color as their profile picture to reduce the effect of images. Also, I decided not to show numbers like how many followers to reduce the negative psychological impact of numbers.

Users are experiencing whirling emotions. They often cannot clearly tell the exact emotion they are experiencing. Hence it is crucial to allow users to quickly switch to another emotion even when they have already entered the content page of one emotion.
Function 3
Receive Talk Invitation
A reach out that is the least intrusive yet effective
The tracker can help notify users when they might need help. However, how to? We know users aren't comfortable interacting with people at this point. They are also sensitive to discussing mental-health-related topics. I again concluded several criteria that can help evaluate the design options.

The final decision is to put a pebble saying "talk" in the pool of pebbles when the tracker realizes the user needs help. Then, users can choose to tap on the talk pebble and start talking with a CBT robot and decide if they want to start a chat with a professional. However, users have the final decision to initiate the talk. This way, users don't feel invaded yet can get the hint that this is the time they might need help.
User Testing
Create an environment that users feel safe.
After finishing the mi-fi digital mockup, I again brought it to the users. I gave users several tasks to perform while observing their behavior and making design changes.

For this function, the task I gave was to initiate a talk with a professional. Users can quickly get where to go; however, many were surprised after hitting the talk pebble. "So the conversation just started, huh?" asked the user. This reaction made me realize that the design failed to meet users' expectations that "clicking a pebble means receiving content." And it can be too intrusive to start the conversation directly. So I added a notification box, giving users more control of their actions and making them feel more secure.
Final Design
A journey that assists users to accomplish tasks
that can give them a better mental
Pick a the Pebble that Matches your Emotion
Access Related Content and See Your Collection
Chat Anonymously with Professionals
Mind the Feelings
It is imperative to make the design easy to navigate and fits' users' experience. However, while we are focusing the behavior, it's also crucial to understand some reason behind the behavior that is so easy to look over-the emotion.

While designing for my users in this project, a group with more sensitive mind, I spent a lot of time to really feel what they are feeling. During the interview, I tried to read deeper under the story. And the final design prove the extra learning vital. After I present the design to my users, they gave positive feedback not only on the intuitiveness of the design but that they can picture them motivated to use it when at their vulnerable low point.

This means so much to me.
The "Good" Design
While designing for people suffering from mental hardship, I'm constantly asking myself what change this design can bring to them? Is the design good?

It's easy to define a good design as a design that centers what users need. For instance, if they want to be alone, the design equips them with the perfect way to block the world around them. However, is that the designer I want to be?

To me, what matters is the design's intention. We understand that people suffering from depression tend to isolate themselves. We also know to lend them a hand, it is imperial to lead them to people. Hence, I decided not to settle on users' surface needs but the change that users need.

I learned that creating a good design does not stop at centering it around users' behavior. To create a good design, we should stretch it to bring good to people.
Content Discovery Tool
Online-streaming Service
Design System
2.0 Platform