The Feelings Monster, building a character with all the feels

Microsoft Design
Microsoft Design
Published in
8 min readSep 6, 2022

--

On designing for mental health and the power of emotionally safe spaces

By Tracy Jones

A close-up of Feelings Monster looking up with expressive eyebrows.

What if your emotions changed the color of your skin? You radiate blue-green after acing that pop quiz. Overwhelmed, your head shifts to red, orange, and purple. While confronting fear, your whole-body swirls yellow-orange. How would that impact the way you understood your emotions and those of others? Meet Feelings Monster, a furry character that lives within the educational app Microsoft Reflect.

Through color, body language, emojis, and verbal definitions, Feelings Monster provides access points to begin identifying one’s emotional patterns. And during the pandemic, when teachers were struggling to emotionally connect with their students, this little critter became more than just a cute face.

A green-yellow Feelings Monster laughs, jumps for joy, and curiously looks through a magnifying glass.
The soft and furry critter in living color.

The Feelings Monster is a teacher’s aid for applying Social Emotional Learning (SEL). The method is becoming popular in classrooms across the world as people recognize that “soft” skills (empathy, self-awareness, communication, etc.) aren’t so soft. We aren’t machines that just show up at school or work and produce; we have complex emotional landscapes that impact our ability to stay motivated, be resilient in the face of adversity, form strong relationships, and create a sense of self.

Reflect’s interface shows students their emotional history through different colorful versions of Feelings Monster.
In Microsoft Reflect, this is the interface that students experience.

Designing for Mental Health
Emotions impact everything: your health, decision making, relationships, and self-esteem. They also impact how you learn. Since the 1960’s, research has shown a distinct correlation between a child’s feelings and their academic performance. But emotions can be hard to identify, understand, and express.

The pursuit of mental health and self-awareness is challenging. While it is often presented as achievable for everyone, many people don’t have the time, resources, or sense of safety they need to begin taking mental health steps independently. And anxiety around asking for help adds another layer of difficulty. “It’s hard to tell your teacher, ‘I’m overwhelmed’ when you don’t know what overwhelmed looks like,” said Principal Product Manager Elad Graiver.

In early iterations of Microsoft Reflect, students were asked to choose words that identified how they felt. The problem was that children did not always understand the full meaning of the words they had to choose from to identify their emotions. Their difficult experience of choosing the right words reinforced their hesitation to share their feelings.

The product design team then added emoji that helped students categorize their emotions and identify their feelings. With emoji, the team recognized that nuance was limited. For students to develop comprehensive communication skills, they needed support learning to express a breadth of emotions. The team got pregnant with the idea of creating a character. Soon they’d give birth to Feelings Monster.

Quickly drawn sketches of robots and creatures expressing various emotions, from peaceful to frustrated.
Quick sketch ideations from the team’s design research.

(Re)searching for the perfect emotional avatar
A multi-disciplinary design team of visual designers, researchers, and content designers came together to hone both the product and the character. The team had to ask for very sensitive information from society’s most vulnerable people: children, teens, and young adults, who were also the team’s collaborators.

This character had to express the students’ deepest expressions and emotions. That’s a lot to expect from an illustrated character. Most importantly, “We were asking students to see this character as themselves,” said Principal Design Manager & Researcher Abigail Steinem.

If expression of self is the incarnation of emotions and mental health, then how do you create a single avatar that successfully expresses millions of young people’s emotions, in just about every country on the planet?

Steinem interviewed students from around the globe to gage their response to the design team’s character mockups. Either the avatar would be a person or a humanoid, the team thought, but the students who would use the avatar had other ideas (as they usually do).

From gaming consoles to productivity software, we bring a human centered lens to our work, though applying those same principles to art and illustration was a unique process. If expression of self is the incarnation of emotions and mental health, then how do you create a single avatar that successfully expresses millions of young people’s emotions, in just about every country on the planet?

Three rows of Feelings Monster at different stages of development.
Through various explorations, Feelings Monster emerged.

Conjuring the Feelings Monster: the creative process
“We were looking for really big expressive elements,” said Creative Director Alberto Cerriteno. He was doing quick, iterative pencil sketches that Steinem and Senior Product Designer Yonatan Turkin then showed to students, asking if the drawing expressed an emotion that they identified with. The team’s research taught Cerriteno that accentuating the eyes, mouth, and hands were the crucial elements to conveying human emotion and specific feelings, but some of the students’ feedback led to unexpected places.

“Nobody was prepared for this,” said Senior Designer Felipe Medina Contreras. The students would prompt unforeseen questions like should the avatar’s hands have fingers or just a thumb? Without one or the other, the hands look like fists. If they were going to have fingers, they couldn’t have four. In Japan, that could be a reference to Yakuza or the mafia. And what about irises? Who would’ve thought about the importance of eyebrows? Their absence disabled the avatar from telegraphing thoughts to other minds. Now, imagine, after all of that, the team still needed to figure out what The Feelings Monster would actually look like?

An early version of the fuzzy critter is a clothed robot with a radio for a head, sporting colorful high top sneakers.
One of the first character mockups.

From Contreras’ initial iterations, the design team discovered that the character couldn’t be human. “That was our first wrong idea,” he said. Students associated colors and human shapes with specific races and genders, which undercut the goal of truly empowering everyone with this creature. By trial and error, they learned that the character’s physical features didn’t have to be as complicated as an actual person. The character had to be androgynous. They didn’t need clothes. Their facial features had to be refined, not oversimplified. Still, the character had to be nimble — versatile.

The students didn’t want robots, either. Designing an abstract character became the team’s new focus. “‘We need whatever it is you’re making to feel tactile, to feel fuzzy, to feel warm, to feel like I can trust it to accurately express me,’” the students told Steinem. They wanted lively colors to reveal their vibrant inner world. And out of all of this, the round and soft Feelings Monster was born. The color changing character made friends with young adults and college students, too. “We found out that the generation of children who grew up on Pixar movies had no problem embracing furry monsters to express their feelings as adults,” said Turkin.

Multi-dimensional magic
Wanting to push the visual element even further, the team explored how to make the experience multi-dimensional. The Feelings Monster now ultimately exists in multiple realities as an illustration, a cartoon, and a live-action puppet.

As a cartoon, Feelings Monster helps students release tension and anxiety through guided breathing and movement. In puppet form, videos of Feelings Monster navigating their emotional world help normalize uncomfortable emotions and model healthy coping skills. As an illustration, the Feelings Monster represents over 50 nuanced words that can be selected to describe students’ feelings.

Rows and rows of Feelings Monster, green, yellow, orange, and purple, captured in different emotional states.
The emotional ebb and flow of Feelings Monster.

Content Designer Tany Holzworth helped further bring The Feelings Monster to life by adding depth and character development. Brought into the physical world in puppet form, Feelings Monster (who goes by the pronouns they/them) works with friends to demonstrate their coping skills and normalize emotional expression. “They’re a sensitive soul. They love plants, tend to talk a bit too fast, and live with their aunt. Giving them a little backstory helped me to think through what they might say and how they might act when faced with a challenging emotion,” Holzworth said.

Educators sometimes use fun physical activities to break up their lessons, sharpening children’s focus while improving their test scores and building a fun school environment. To support educators in leading these brain breaks, an animated Feelings Monster dances, meditates, and does yoga. Soon, when this feature is available, students will get to choose among the three.

Technical Art Director Rudy Vessup said that he watched videos of children dancing to make the creature mirror the way children move. “I had to keep their movements simple and fluid, but natural,” said Vessup. The Feelings Monster instructs the class to bust-a-move.

A green-blue Feelings Monster takes a brain break and dances to the music bumping from their boom box.
Feelings Monster taking a brain break and getting down to the sounds from their boom box.

Physical movement also creates something that students often don’t feel enough of: autonomy. They’re in control of their movements and the importance of personal agency applies to product design as well. Students are often aware of the world’s problems but seldom enlisted in creating solutions.

Similarly, they aren’t as often consulted in the creation of the tools they use, and it was important to the team behind Feelings Monster to buck this trend. Student input informed every stage of Microsoft Reflect and Feelings Monster’s development, which gave the students agency about how they wanted to express themselves through our products.

Around the world, young people are navigating a complicated and sometimes cruel environment. They need someone relatable who can provide a safe space for practicing their coping skills. Adding Feelings Monster to SEL practices can help educators provide that role model, a soft, fuzzy one that reduces barriers to engagement — like talking to your teacher directly. We hope that Feelings Monster will continue to make both students and educators feel more informed and supported in sharing their emotions.

To stay in the know with Microsoft Design, follow us on Twitter and Instagram, or join our Windows or Office Insider program. And if you are interested in working with us at Microsoft, head over to aka.ms/DesignCareers.

--

--