Mindfully

Designing a supplemental classroom experience for a more accessible emotional literacy education

My role: UX Design, Visual & Interface Design, Illustration

Tools used: Sketch, Invision, Illustrator

Timeline: September 2018 – April 2019

Teammates: Emily Boyle, Sara Reich, Madeline Sullivan

The Project


While research has shown that emotional intelligence is a much better way (over IQ) to gauge happiness in success in individuals, low-income minority students tend to have a deficit of emotional intelligence education in childhood.


Emotional intelligence can be taught, but it may not necessarily be the focus in schools in lower income areas, where teachers may be overworked and parents may not have opportunities to engage with their children in such dialogues. 


Because of this, my team and I wanted to rethink emotional literacy through the lens of accessibility. We decided to create a tablet application that can be used as a non-disruptive way to learn emotional literacy because tablets are inexpensive — only one would be needed per classroom — and apps are easily accessible. We created a storyboard that represented the environment in which the app would be used, in a more secluded part of the classroom, where the student can take a break from the lesson and focus on dealing with whatever emotions may be distracting them from being able to learn without disrupting the class.


Expert Interviews


We conducted interviews with Dr. Kristen Lee, an expert on mental health education, MJ Glassman, a yoga preschool curriculum developer, and Stephanie Ruiz and Matthew Chang, two teachers from Teach for America. 


“Trying to focus on a specific student with behavioral issues will mean I can’t teach my lesson and I won’t be able to focus on the other students in the classroom. After a student has a instance where they’re angry or something I try to get them to talk about it.”
— MATTHEW CHANG, TEACH FOR AMERICA TEACHER



These accounts were very influential in our understanding of the effects of teaching mindfulness in classrooms, of the struggles that teachers in lower-income environments face, and of the importance of creating a culture where students can trust the teachers. 


Perhaps the biggest takeaway was that teachers tend to not receive sufficient training in dealing with at-risk students, but addressing behavioral issues with them was essential to maintaining a productive classroom environment.

Setting Goals


Having gotten a better understanding of what it was like to teach in a low-income school and what it would mean for the students to have opportunities to increase their emotional literacy, our project goals became such: 


  1. Empower students to talk about their emotions by teaching them the words to identify how they feel
  2. Teach strategies for understanding and responding to different emotions in a constructive manner
  3. Non-disruptive to the classroom experience

Content


Our team decided our content was going to be a way to address these behavioral issues, and help students better understand themselves and their emotions.


We did some emotion mapping and worked to break down broad, general emotions into more specific vocabulary. 


We found the most inspiration from Paul Eckman’s Atlas of Emotions, an interactive map of emotions. The diagram defines and categorizes emotions into five main emotions and breaks down those emotions into more a specific vocabulary, and puts that vocabulary on a scale of intensity. 


We also investigated play therapy strategies to also teach strategies for coping with emotional distress.


Wireframes


We drew out the general architecture of the content that wanted to include into the app to plan our app. 


Some of our initial ideas that ended up being omitted in the later iterations included a teacher interface so they would be able to have a record of the students’ usage of the app and giving users autonomy to decide the type of activity they wanted to do.


Those ideas were not further explored because we later learned about the privacy issues that could arise from recording student data and that giving students too much autonomy can potentially leading to them abusing their freedom.


Visual Design & Branding


We wanted our visual design for Mindfully to be appealing to children, but also straightforward and simple in how its message was conveyed. In addition, we focused on ensuring that the illustrations convey each emotion successfully, finding inspiration for the portrayal of emotions through through Apple’s emoji set. The color palette chosen was also inspired by the colors from the movie Inside Out to describe specific moods.


Iterating


Our UX design goal was to make the complex emotional literacy information more accessible and fun for children. 


Our biggest struggle was figuring out how to teach the idea that emotions come in a range of intensity, especially once one gets more specific than just “happy” or “angry.” Below you can see our initial iterations of the idea.

Clickable Prototype

We developed the prototype below as our proof of concept and tested it.

During our user testing of our initial iterations, issues that arose were:

  1. Sometimes one may not know exactly how they were feeling
  2. Identification of emotions is important but just having students rank how they feel on a scale isn’t teaching too much especially for our older users


This led us to create an Unsure path and utilize the Atlas of Emotions to provide a more educational foundation. The latest design of Mindfully focuses on delivering a seamless educational experience where students learn emotional vocabulary and use symptoms to define their emotional experiences.

Splash screen

Emotion selection – users here select the general emotion that they are feeling. This particular screen shows the screen for grades 4-5, which includes the unsure button for users who cannot distinguish what their emotion is

Emotion selection specification – users get to specify the intensity of their emotion, which will correlate to specific words and faces

Vocabulary definition – the definition is displayed for the user so they can learn about what the

Validation of emotion – this screen is to reminding users that it's okay for them to feel their emotion

Unsure path – when a user decides that they don't know how they are feeling, they are directed to describe how their body may be feeling to help pinpoint what their emotion may be

Choosing an emotion – the vocabulary associated with specific body feeling combinations renders some suggestions for their emotion, providing definitions to help clarify as well as none of the above option if the suggestions still don't feel right

Breathing exercise – the activities are randomized based on the emotion that the users choose. This breathing exercise is an activity to help the users calm themselves down by focusing on their breath

Bubble popping exercise – this activity is to help the users redirect their attention

Drawing exercise – this activity is to help users express their emotions and feelings

Music making exercise – similarly, this activity is to help users express their emotions and feelings

Reflection – at the end of each exercise, users are encouraged to reflect on how the activity made them feel so they can better make connections between their emotions and how some activities can change how they feel

Mindfully Walkthrough

Unsure Path

Final Thoughts


There are still a lot to explore with Mindfully. What other methods of gamification can we implement to encourage students to establish mindfulness practices in their daily lives outside of the classroom? What if students got to choose their own animal avatars? What if there was a way for teachers to track the progress of the student’s emotional intelligence? What other activities would be helpful in helping students refocus their attention? Can we implement other types of meditation for students to use in the classroom? These are some ideas that I’d like to explore with this app.