Colorful Emotions

UX / VISUAL DESIGN

Project

Education Tool

Date

June 2022 - July 2022

Role

UX Researcher, Visual + UX Designer

Overview

▌OVERVIEW ▌

| The Problem |

Emotional disorders begin in early childhood

In USA, there are millions of kids having emotional disorders, like anxiety or depression. And 1 in 6 children aged 2-8 years has emotional disorder.

1

Depression and Anxiety by Age

2

Prevalence of emotional disorders change with age

Diagnoses of anxiety, and depression become more common with increased age.

Depression

Anxiety

| Project Vision |

Colorful Emotions is a cross-platform tool to help kids learn about emotions and empathy.

Its primary target users include children up to 17 years oldand. This tool is trying to educate kids with more knowledge about emotions and help them regulate emotions.

| Challenges |

1

Provide a simple and straightforward way for kids to use this tool.

2

Information from the Colorful Emotions should be instructive and interesting.

3

Less words and more graphics to attract users.

| Design Highlights |

Emotion Selection System

Create an interactive emotion menu for users, so that they can learn with fun. This is an attractive learning process, especially for kids and young teenagers.

Alternative Emotion Selection System, Starred Emotions & History

Besides the interactive selection, I also provide the standard display mode for users to browse all emotions quickly. Moreover, starred emotions and visit history can be found in categories.

Emotion Description

Create an interactive emotion menu for users, so that they can learn with fun. This is an attractive learning process, especially for kids and young teenagers.

Responsive Design

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

| Design Process |

1

Research

Questionnaire

Insights from Questionnaire

Interview

Insights from Interview

2

Define & Ideate

User Persona

User Journey Map

Problem Statement

Brainstorming

3

Prototype & Test

Design System

Hi-Fi Prototype

Usability Testing

Final Design

P&P Wireframes

Digital Wireframes

Exploratory Usability Testing

Updated Digital Wireframes

▌RESEARCH ▌

| Reserach Overview |

I begin the project by conducting research to get more information about how kids and young teenagers understand emotions. I employed methods including Questionnaire and Interviews to collect data from users. After I got insights from the research, I crafted Personas to communicate my findings.

Research

| Approaches to Collect Data |

1

Questionnaire

20+

Understanding of how target users learn emotions

2

Interviews

Empathic listening

| Questionnaire |

To understand general user behaviors and identify current trends and users preferences, I designed a questionnaire and collected 20+ responses back. I analyzed and visualized the data and generated findings, which could helpe me uncover design opportunities and understand outstanding problems.

Age

Users having taken emotional lessons

Users having emotional problems

Users who think learning emotions is important

Users would like to learn emotions

Users who will ask help

General emotional state

Users konwing how to solve negative emotions

Frequency of having conflicts with friends

Frequency of having negative emotions

Frequency of being influenced by others

Activities users would like to do

Key Insights from Questionnaire

1

Most users believe that emotional learning is important while they don't learn emotions.

2

Almost all users have had negative emotions, but few of them knew how to deal with it.

3

Half of the users would like not to ask help from parents/teachers when they have emotional problems.

| User Interviews |

To gain further insights into emotional learning of kids and young teenagers, I conducted user interviews. I prepared the interview script to guide the interview process. In order to better understand the potential users, I drew the interviewee spectrum.

Key Insights from Interviews

1

Users do need a tool to help them learn emotions and would like to learn it.

2

Some kids and young teenagers are shy to talk, so that providing a source for them to learn is important.

3

Some of the users had emotional problems but they hadn't realised that.

4

Some of the users knew they had emotional problems, but they had no idea about how to deal with it.

Define

▌DEFINE ▌

| Personas |

I used themes concluded from questionnaire and interviews to create user personas representative of the attitudes of the participants. The personas contained basic information, goals, frustrations, and summary description that best represent the information I collected from our participants.

Steven

Age: 12

Education: Primary School

Hometown: Chongqing, China

“Sometimes I would fight with my friends,

because their language made me angry.”

Goals

Communicate with friends in a positive way
Learn more knowledge about emotions and get control of it

Frustrations

Lose temper when some used bad language
No patience to read textbooks about emotions

Steven is a lively 13-year-old boy. He would like to stay with his friends for soccer. But he is also emotionally unstable. If his friend used bad language or he lost the game, he would get furious and fight with his friends. He needs to learn more knowledge about emotions and have more control of it, but he doesn’t want to read boring textbooks about emotions.

Talia

Age: 14

Education: Junior High School

Hometown: New York, USA

“I’d like to be alone,

but I don't know why.”

Goals

Try to understand her low mood
Find a way to get rid of negative emotions

Frustrations

Very shy to share her emotions with others, including parents or psychological consultant.

Talia is a shy teenage girl, who doesn’t want to share her emotions with others, including psychological consultant and parents. But she is frequently in a low mood and has no idea how to get rid of these negative emotions.

| User Journey Map |

To guide me further in design and visualize how Steven and Talia would interact with a product to achieve their goals and identify areas of friction during their experience, I created experience maps.

Steven's Journey Map

Talia's Journey Map

| Problem Statement |

With the user journey, persona, and insights from the research stage, I turned my knowledge into Point Of View (POV) Statements to frame the problem from the user’s perspective.

1

Steven is an irritable young boy, who needs an interesting tool to learn emotions, because he would like to learn how to control his emotions while he doesn't like reading text books.

2

Talia is a teenager girl with mild depression, who needs a tool to teach her the solutions to deal with negative emotions, because she is too shy to talk about these problems with parents/teachers.

Ideate

▌IDEATE ▌

| Brainstorming |

With my research findings and personas in mind, I brainstormed solutions by drawing a mind map. I was trying to create a tool from the center to many differnt branches, which would provide an exploring experience to users.

| P&P Wireframes |

According to the mind map, I came up with ideas about how the tool works for kids to learn knowledge about emotions. I tried to create a clean user flow, so that even kids can play with it easily.

1

Homepage

2

Exploring Page

3

Description Page

| Digital Wireframes |

After designing paper wireframes, I began to create initial prototype with main user flow, exploring and studying emotions, in Figma.

1

Homepage

2

Exploring Page

3

Description Page

| Exploratory Usability Testing |

After I created the digital wireframes, I wanted to test how effective design concepts were. I added interactions to the wireframes and turned them into low-fidelity prototypes for usability test.

We recruited five participants to test out our current design. In this round of usability testing, our research questions are:

What do users conceive and think about using the product?
Does the product’s basic functionality have value to the user?
How easily and successfully can users navigate?

| Insights |

Exploring

Homepage

Description

1

Back to Homepage Button

Three participants complained that the user flow ends at the description page. Therefore, users need a back to homepage button to keep the user flow on that page.

“What should I do next? Go back? Where is the button?”

— Sophia, a girl from California.

2

Rolling Bar

Three of five participants mentioned that they need more hint about the solutions of negative emotions part. So, users want an obvious icon showing the horizontal rolling part.

“Oh, I almost missed that!”

— Kurt, a 15 years old boy from NYC.

3

Larger Font Size

Two participants feel that the texts on homepage are too small. So the font size can be larger on that page.

“Texts are too small here.”

— Jane, a girl from Chongqing, China.

| Updated Digital Wireframes |

Description Page

- Back to Home Button

- Rolling Bar

- Favorite Button

For description page, I added a favorite button, back to homepage button and a rolling bar to remind users of more solutions to deal with depression.

Before

After

Favorite Button

Rolling Bar

Back to

Home Button

Design

▌DESIGN ▌

| Design System |

In order to improve the efficiency of the design work and enhance the visual consistency, I created the Colorful Emotion design system for the tool.

Design System Breakdown:

Atom: color and typography
Molecules: icon, button, search bar and chips
Organisms: emotion panel and emotion figures

Color

Referring to Robert Plutchik's wheel of emotions, describing how emotions were related, I use different colors to represent different emotions.

Plutchik Model

Emotions in Colorful Emotions

#4B8DC9

#23C0EB

#4B8DC9

(75%)

#23C0EB

(75%)

#5B77B6

#29BDB3

#5B77B6

(75%)

#29BDB3

(75%)

#6461A6

#42B77A

#6461A6

(75%)

#42B77A

(75%)

#8966A8

#7DC57C

#8966A8

(75%)

#7DC57C

(75%)

#A967A7

#AED27B

#A967A7

(75%)

#AED27B

(75%)

#ED75A5

#FAF178

#ED75A5

(75%)

#FAF178

(75%)

#F07280

#F8B068

#F07280

(75%)

#F8B068

(75%)

#EF6F54

#F1905D

#EF6F54

(75%)

#F1905D

(75%)

Logo with Gradient Color

Typography

Depression

What's Depression?

Depression

Depression is a constant feeling of sadness and loss of interest.

Feeling sad or having a depressed mood

* Please turn to doctors, parents, or other adults, if your symptoms are severe.

Roboto Bold 26

Roboto Bold 20

Roboto 20

Roboto 14

Roboto 12

Roboto 10

Icons

Buttons

Font: Roboto Regular 14px

Width: 376px

Height: 52px

Corner Radius: 45px

Font: Roboto Regular 16px

Width: 200px

Height: 70px

Corner Radius: 45px

Search Bar

Status: Default

Font: Roboto Regular 20px

Width: 570px

Height: 75px

Corner Radius: 15px

Padding: 40px

Status: Focused

Font: Roboto Regular 20px

Width: 570px

Height: 75px

Corner Radius: 15px

Padding: 40px

Chips

Unselected

Selected

Status: Unselected

Font: Roboto Regular 16px

Width: 115px

Height: 115px

Status: Selected

Font: Roboto Bold 20px

Width: 156px

Height: 156px

Corner Radius: 20px

Emotion Panel

Emotion Figures

Images can transmit messages faster and stick in long-term memory.

As 65 percent of the population are visual learners, graphics are key to engaging kids when they are learning. Moreover, compared with words or texts, images can transmit messages faster and stick in long-term memory. Therefore, I designed a series of figures to represent emotions, which will bring much more fun to kids when they are learning.

| Hi-Fi Prototype |

After I determined the Lo-Fi prototype and defined the visual elements, I began to generate the initial Hi-Fi prototype.

| Usability Testing |

After I created the Hi-Fi prototype, I wanted to test how effective my tool would work. In this stage, I kept myself in a continuous cycle of observing, reflecting, and making.

Participants

Participants are 5 kids, age from 6 to 17 years old.

Testing Objectives

Test if users find the app is easy to navigate
Understand how do users feel about the designed features
Inform later higher-fidelity design

Methodology

The test will be conducted online. Participants will receive a link which is our interactive prototypes before the test.
After getting participants' consent, they will be asked to share their screens showing the test process.
Researchers will guide participants to conduct several tasks and encourage participants to think aloud while testing.

User Tasks

Task 1: Searching - Can you search a specific emotion you want to learn through the searching page?
Task 2: Description - Can you learn the emotion chosen in the description page?
Task 3: Back and Search - Can you back to homepage and use the search bar to find a specific emotion?
Post-Test Question - Did you feel something was missing, or something could have been better in your experience with Colorful Emotions? What was frustrating to you (if it was) while performing the tasks on the app?

1

Introduction about the usability study

2

Five participents complete the learning tasks

3

Answer post-test qustions

4

Generate insights and pain points according to the sutdy

| User Feedback |

Homepage

Exploring Page

Description Page

| Revise Design |

1

Home Page

- Menu icon to category icon

As a simple education tool, there is no need for a completed menu. So I changed the menu icon into category icon, which gives users a hint that they can find emotions in categories.

Before

After

Category Icon

All Emotions

2

New Pages in Categories

- All Emotions

- Starred Emotions

- History

Some users mentioned that exploring page is interesting, but they also need an alternative way to browse all emotions quickly. So I added a page showing all emotions. Also, starred emotions and history function were added.

Starred Emotions

History

3

Description Page

- Larger Font Size

- Different Symptoms

- Solutions Only For Mild

Symptoms

Larger font size was used for better user experience; Symptom function was added to help users understand emotion comprehensively; Only provide solutions for mild emotional problems, and encourage users with severe problems to ask help from doctors or parents. This tool would not be a professional medical treatment. It's only for knowledge sharing.

Before

After

Larger Font Size

Different

Symptoms

Solutions Only For

Mild Symptoms

Takeaways

▌TAKEAWAYS ▌

| About Emotions and Emotional Learning |

When I dug into emotional learning during this project, I realised that emotions, especially for kids, are out of control at many times. I intended to design a tool to help kids far away from negative emotions, which became impossible as I finished this project. Because I found that the best way for a kid to learn emotions is living in a society. Colorful Emotions, the education tool I designed, could help them understand emotions more, but it's more important for them to have a social life, playing with friends, sharing with classmates, or appreciating their parents.

Another thing I have to say is that teaching emotions is not a easy job! When I talked with a girl who had been depressive, she told me that she didn't want to do anything if she has a severe depression. At that time, using Colorful Emotions helps nothing. Instead, it may cause serious consequences if the suggestions are not correct. Therefore, I realise that this tool has its limitations. However, as an education tool, it can definitely help kids understand those basic definations, symptoms and solutions.

| What I Could Have Done? |

1. Asking more feedback

I did talked with several target users from the beginning of the project to the end of it, but I believe there could be more participants included. More than half of the participants were teenagers, rather than kids, because kids are too young to conduct all tasks with me online. So I'm missing some feedback from my targert users. Even though this tool can work well right now, but it could have been better.

2. Asking more help

I finished this project all by myself and I'm proud of it. However, I would try to ask help from others if I did it agian, especially when I had some technical problems. During the brainstorming stage, I had several great ideas about how users could interact with this tool. But I failed to make it and chose an easier way. Now I've learned that I do need to ask help from people with professional experience. It's not a shame. This is how designers learn from each other.

| What I Have Learned? |

1. Avoid confirmation bias

Before the user test, I believe my design could help people deal with negative emotions. But it's not the truth. For example, I have been anxious and I know how it feels. Also, I know how to deal with this kind of negative emotions. However, I've never been severe depressive. I didn't know that people would like to do nothing when they are in depression. So giving suggestions to deal with negative emotions may not be helpful. And the best way to avoid confirmation bias is user testing. Stay hungry, stay foolish. And listen to the users.

2. Focus on target users

I tried to talk with different people when I was doing this project. Even though some of them are not the target users, I'd like to hear more suggestions from others. However, sometimes they have contradictory opinions. For example, one of my architect friend thought the texts should be tiny, or they were ugly. But kids like reading texts with larger font size. I was lost for a while. But now I've learned that when there are different views, I need to focus on my target users. The truth is that nobody is wrong. They are just trying to expressing their needs.

Back to all projects