Designing a Tool to Help Young People Learn About Emotions & Empathy


Project Overview

Disclaimer: The organization described below is fictional and was created for the purposes of this case study. Any resemblance to real-life organizations is coincidental.

Product: Pink Lemonade is a Toronto-based non-profit supporting affordable access to mental health resources. The organization requires a tool to help young people learn about emotions and empathy. The main users of the tool would include teens and young adults as well as parents and educators supporting them in their journey to becoming more self-aware and increasing emotional intelligence.

Problem: Many people, especially teens and young adults, struggle with navigating through varying emotions. Pink Lemonade has identified a lack of accessible tools for students, parents, and teachers to help build awareness on emotions and empathy.

Goal: Design a tool to aid young people, parents, and educators in navigating through difficult emotions and be more empathetic towards one another.

Role: UX designer for the app and responsive website from conception to delivery.

Project Duration: 2021-09-08 to 2021-10-18 Six weeks

 

Summary of User Research

When I conducted user interviews, I found out that many of the teen and young adult users were going through changes in their lives that involved complex emotions; they needed help processing and understanding these emotions. I also learned that teachers and parents were looking for resources to support their kids and have open conversation surrounding emotions and empathy. The feedback that I collected through research made it clear that an easy-to-access and interactive app would be helpful to users in learning about emotions and empathy.

 

Personas

I created personas to better understand and represent key user groups.

 

User Journey Maps

Completing Myla’s user journey map helped me to better understand and empathize with some of the social and emotional challenges young people face.

Wes’s user journey map helped me recognize some of the challenges educators face when trying to connect with their students. I also considered how the Pink Lemonade tool might be of help.

 

Digital Wireframes

After drafting some paper wireframes, I created the initial digital wireframes for the Pink Lemonade app. These designs focused on building awareness around emotions and logging users’ emotions to gain insights.

 

Low-Fidelity Prototype & Usability Study Findings

I created a low-fidelity prototype that takes the user through learning about the “emotion of the day” then going to reflect on and log how they are feeling.

Next, I conducted a usability study to find out if my prototype was on the right track. From the study, I learned three main things:

 

Mockups

After gaining insights from the usability study, I applied design changes to the app.

Here, I made sure the emoji selection stood out more, and also provided a note to users that their emotion logs are kept private within the app.

Additionally, I made the wording more clear on the final screen after logging emotions so users would not think their information is being shared outside of the app.

 

High-Fidelity Prototype

The high-fidelity prototype included design changes I made after a second usability study to add polish and clarity:

1) Navigation bar buttons remained greyed out unless selected.

2) The button on the log screen was simplified to say “Log” for a cleaner look.

This prototype followed the same user flow as the low-fidelity prototype.

High-fidelity prototype user flow
 

Responsive Designs

After completing the app designs, I moved onto the responsive website. The designs for screen size variation included mobile, tablet, and desktop. I made sure to keep in mind user needs and context when optimizing the designs of each screen size.

Mobile, tablet, desktop designs
 

Takeaways

Impact: Users shared that the app seemed like it would make learning and talking about emotions and empathy less awkward for both young people and their parents and teachers.

What I Learned: I learned that breaking down a big problem like this one and addressing the issues step by step is a great way to come up with solutions. Additionally, it is important to approach each new iteration with the desire to improve and continue advocating for the needs of the user. Overall, I enjoyed working on this project and believe that educating young people on emotions and empathy is a great cause.

Next
Next

Website Design in Adobe XD