A digital tool that fosters emotional awareness among high school students.

I collaborated with City of Bridges High School to design a digital experience that fosters emotional awareness and peer-to-peer support among students while honoring their need for solitude.

Role

Product Designer

Timeline

4 months

Featured Skills

Participatory Design

UX Research

Interaction Design

Prototyping

Team

Yilin Li

Canwen Wang

Hannah Wittenstein

Overview

I collaborated with City of Bridges High School (COBHS) to reimagine how high school students can cultivate emotional awareness in the school environment. Based in Pittsburgh, Pennsylvania, COBHS is an independent, progressive high school which practices student-centered experiential learning.

As part of a 4-person team, I was involved in the entire design process and worked closely on concept development, prototyping, and validation.

Initial Problem

How might we maintain a sense of a close-knit community as COBHS moves into a larger space?

The close quarters of the former school building fostered strong relationships and unexpected learning through spontaneous moments of connection, however it offered limited privacy and alone time. At the start of this project, COBHS was in the process of transitioning to a larger building. While the additional space is necessary, the principal was worried that there would be challenges in maintaining closeness and unplanned interactions.

Old School Building

Not enough space

Closeness

New School Building

More space

Loss of closeness?

Research

Exploring how the current space fosters interactions.

The goal for discovery research was to understand what types of interactions occur in the school, the intensity and frequency of interactions, and how the physical space enables interactions among students and between students and teachers.

Research Methods Used

Contextual inquiry

On-site observation

Focus group with 3 students

Although the principal was worried about a loss of closeness, I discovered that students actually want more personal space and alone time.

01

Students are overwhelmed by the frequency of social interactions and find it difficult to carve out alone time due to a lack of dedicated quiet space.

02

Because the community is so small, students have close relationships with their teachers and rely on them primarily for emotional support.

03

Students rely on observation to be aware of each other’s feelings. Feelings are assumed based on body language and mood rather than explicit communication.

Reframing the Problem

Re-thinking how students connect with each other

From the research, I found that the problem isn't a lack of closeness. Students actually desire more personal space and alone time, but these needs aren't being met due to space limitations. At the same time, students are in the early stages of learning to express their emotional needs.

Problem 1

The intensity of interaction in the school can be overwhelming for students who need alone time to focus and recharge.

Opportunity 1

How might we created a balanced environment that supports students' need for both connection and solitude?

Problem 2

Students are in the early stages of learning to communicate their emotional needs and over rely on teachers for support.

Opportunity 2

How might we support students in expressing their feelings so that their peers are aware and can provide appropriate support?

Solution

The final solution is a community-driven emotion-sharing platform, which fosters connection without relying on constant face-to-face interaction.

01

The Community Emotions Cloud serves as a visual representation of students' collective emotional state.

02

Integrating emotion-sharing with attendance-taking encourages daily participation.

03

Students can browse the emotions library to select one that represents how they feel and add a note explaining why.

04

Flexible sharing options allow students to choose how they share their emotion and who to share it with.

05

Students can see how their peers are feeling and send supportive messages through the chat feature.

Concept Development

Using storyboards to uncover what students actually want

In order to avoid making a solution that wouldn’t be adopted, we created storyboards representing different concepts and tested them with COBHS students through a speed-dating session.

Brainstormed

20 ideas

Synthesized into

10 storyboards

Tested with

30 students

20 ideas

10 storyboards

30 students

01

Students liked the idea of letting others know how they’re feeling, but they want control over how much they share and who they share with.

02

Students liked the idea of relying less on teachers, but they're concerned about being judged by peers for expressing their feelings.

03

Even after moving into the new school building, students still want more space to escape from social interactions.

Final concept: enabling connection without requiring constant face-to-face interaction.

I decided to design a digital platform that integrates attendance taking with emotion-sharing and peer-to-peer support. Students can share their feelings—either anonymously or by name—with the school community. Students can also be aware of how other students are feeling and offer support. This solution addresses the tension between students' desire for personal space and their need to feel validated by enabling connection without requiring constant face-to-face interaction.

Why did I choose this direction?

By sharing feelings on their own terms, students can feel validated without being overwhelmed by more face-to-face interactions.

We can’t add more physical space to the building. But if others are aware that you need alone time, they can respect that need.

Teachers already take daily attendance. Integrating emotion-sharing with an existing practice would make it easier to adopt.

Prototyping

How can I make students aware of how their peers are feeling that day?

Public Interactive Wall

Mobile interface

The Community Emotions Cloud serves as a visual representation of students' collective emotional state.

Each bubble represents an emotion selected by at least one student and the size of the bubble corresponds with the number of times it was selected.

I originally envisioned the Community Emotions Cloud to be a public interactive wall, but eventually landed on a mobile interface due to feasibility.

How can I integrate emotion-logging with attendance?

The student is prompted to log their emotion immediately after marking themselves present.

How can I make it easy for students to log their emotion?

The student can explore the emotion library and select the one that best represents how they're feeling.

The student can explore the emotion library and select the one that best represents how they feel at the moment.

They have the option to write an explanation, elaborating on why they feel that way

Borrowing from the How We Feel app, I decided to use circles to represent emotions. The circles create consistency with the Community Emotions Cloud.

The student can explore the emotion library and select the one that best represents how they feel at the moment.

They have the option to write an explanation, elaborating on why they feel that way

How can I enable peer-to-peer support?

The student can see their peers' emotions and write a supportive message using the chat feature.

Tapping on an emotion bubble opens a modal window showing who shared that emotion.

To express support, the student can write a message. If they need guidance on how to respond, they can refer to "Tips for Showing Support".

How did prototype testing impact the design?

I tested the prototype with 3 COBHS students and the principal to 1) evaluate whether or not our design intervention would be useful to the COBHS community and 2) uncover user needs to inform future iterations.

01

Students wanted more flexibility in who they share emotions with, so I added more granular sharing options.

Students liked the option of sharing anonymously, but they also wanted the option to share emotions only with teachers rather than with the whole school. If they were experiencing a negative emotion, they would prefer to share that only with teachers because sharing non-anonymously with the whole school might feel too vulnerable.

Before

If the student wants to share their emotion, they have to share it with everyone.

After

The student can choose whether to share with everyone in the community, only with teachers, or only with the counselor.

02

The principal expressed the need for safeguards against harmful or unhelpful messages, which should be added in the next iteration.

The principal expressed concern about students sending harmful or unhelpful messages and suggested that there should be a way for teachers to monitor interactions.

Outcome

Stakeholders perceived our solution to be highly desirable and useful for the COBHS community.

Our project culminated in a concept demo where I showcased the concept to members of the COBHS community and the CMU community and received feedback.

01

Students felt that having a dedicated space to talk about emotions with peers would make them feel less worried about feeling judged.

02

Audience members appreciated how the solution reframes attendance from an administrative task into an opportunity for communal care.

03

Audience members believed that emotional awareness is a crucial skill for high schoolers to develop and should be taught in schools in some way.

Things to consider for future iterations

  1. Design the experience for the teacher. This would include a dashboard that tracks attendance and the emotional state of the student body.

  2. Incorporate safeguards against misuse. There were concerns about students sending harmful messages to their peers or anonymity being compromised given the small school setting.

  3. Add conversation starters to help students respond to their peers in productive ways.

  4. Consider how to engage students who are less inclined to participate.

Let's work together! ⊹ ࣪ ˖₊˚⊹⋆

Let's work together! ⊹ ࣪ ˖₊˚⊹⋆

Let's work together! ⊹ ࣪ ˖₊˚⊹⋆