top of page

Emotions Wrapped: Social Emotional Learning through Music Streaming

B. Fadrigon et. al.

UC Berkeley School of Information User Interface Design & Development

Social-Emotional Learning has limited engagement opportunities to support the well-being of people outside of academic environments.


Yet, SEL skills are critical to spaces outside of the classroom and the need for these skills has only grown in an increasingly digital world. Users use various platforms to help manage their social-emotional needs, like music streaming applications.


What design opportunities exist to meet the social-emotional learning needs through better user interface designs for streaming platforms?

What is Social Emotional Learning?

We define social and emotional learning (SEL) as an integral part of education and human development. SEL is the process through which all young people and adults acquire and apply the knowledge, skills, and attitudes to develop healthy identities, manage emotions and achieve personal and collective goals, feel and show empathy for others, establish and maintain supportive relationships, and make responsible and caring decisions.

Defined User Group

Listens daily or multiple times a week.

Accesses music through their phone or computer.

Primary music use is through music streaming service. 

Age: youth through middle age.

Need Findings & Key Insights

People use music to affect their mood: when they are feeling lack of motivation, sad, or worried. They reported that it does change their mood, for better or for worse.

Music is used as a medium to communicate feelings and emotions, not just between the artist and the listeners but also between users sharing tracks amongst each other.


& Usability Testing Findings

Screenshot 2023-09-24 at 1.43.44 PM.png

Prototype 1, Low Fidelity: Music Mood Daily

Screenshot 2023-09-24 at 1.43.54 PM.png

Prototype 1, High Fidelity: Music Mood Daily

Made on Figma

This kind of emotional sorting would be best added to a current platform than a new one.

Screenshot 2023-09-24 at 1.44.04 PM.png

Prototype 2, Low Fidelity: Emotion Comment Section

Screenshot 2023-09-24 at 1.44.11 PM.png

Prototype 2, High Fidelity: Emotion Comment Section

The user can imagine using the feature reflecting on her own feelings while reading the comments of others or sharing her comments with close friends only.

Screenshot 2023-09-24 at 1.44.21 PM.png

Prototype 3, Low Fidelity: Mood Sort for Music

Screenshot 2023-09-24 at 1.44.34 PM.png

Prototype 3, High Fidelity: Mood Sort for Music

User would like to access music by mood on their terms and not the apps.

bottom of page