ABC's of Emotions

These cards and interactive prototypes are part of a larger set including the entire alphabet. Our team created collaborative physical and digital products designed to teach young children how to identify and discuss their emotions.

Year

2019

Organization

Rochester Institute of Technology

Project Type

Illustration / Interaction Design / Print

Role

Designer / Illustrator

A mockup of the ABC's of emotions physical cards

Project Overview

Creating a fun but informative educational system

The main goal of this project was to teach children that emotions are normal and necessary. The physical cards aimed to provide them with proper adjectives to explain how they might be feeling. The iPad interactions would then give them examples of what to do if they were experiencing a certain emotion. We conducted extensive research before advancing this project to ensure proper terminology, education techniques, and design styles were utilized.

Challenge

Design an educational system for a chosen demographic using both physical and digital elements.

My Role/Responsibilities

Concept Planning
Illustration
Interaction Design

Research & Planning

Gathering demographic information & inspiration

With children aged 6-8 years old as our demographic, it was very important that we conducted adequate research regarding how children of that age range learn new concepts. The team gathered data by interviewing a few professionals; a fourth-grade teacher and psychology professors at RIT. We also spent time gathering inspiration from illustrations and terminology used in various children’s books and games. This helped to provide us with design techniques that children respond well to.

Brainstorming

It took some time to select the best terminology to use for each letter. Each emotion had have a certain degree of complexity that matched the maturity level of the demographic.

Photos of a whiteboard showing the brainstorming process

Design

How cohesive does this need to be?

The above was the main question we kept returning to as we began creating a design template and style guides for the cards and digital interactions. After a few iterations, the final template allowed us as individuals to utilize our different illustration styles, but kept a certain level of consistency in the layout and placement of elements.

Design System Ethos

01

A color palette high in saturation is playful and draws in the eye

02

Using one cohesive typeface for all body text, but allowing header typefaces to differ

03

Layouts remain the same throughout the entire card set as well as the interaction screens

Card Layouts & Illustration Styles

I wanted to push myself to use different illustration styles for each of the cards. The Bored card had a loose, watercolor feel to it, the Confused card was more detailed and comic-styled, and the Surprised card was styled to resemble chalk on a chalkboard.

A mockup of the ABC's of emotions physical cards

Final Cards & Prototypes

The perfect pairing of print & digital tools

The final cards work well as hands-on tools for children to use when faced with new emotions, and pairing them with the iPad interactions adds an extra level of understanding and fun to the learning process.

'B' is for Bored

My goal with the 'B' card was to communicate that being bored isn’t necessarily a bad thing. It’s a perfect time to find some inner creativity and make your own fun. In the interaction, the child will tap on the hidden toys for the character, Billy, to play with.

A mockup of the physical 'B' card next to an iPad mockup of the corresponding iPad interaction
'C' is for Confused

I wanted the 'C' card to help kids learn that being confused is okay and completely normal. It is also okay to ask for help, which can be a scary task for some kids. In the interaction, I referenced how being confused can seem like solving a puzzle. The interactive goal is to solve the puzzle, which shows an example of what children can do if they’re confused by something.

A mockup of the physical 'C' card next to an iPad mockup of the corresponding iPad interaction
'S' is for Surprised

My goal with the 'S' card was to show an example of how a child might be surprised by something. The iPad interaction allows a child to drag a slider back and forth to watch the character’s face become surprised.

A mockup of the physical 'S' card next to an iPad mockup of the corresponding iPad interaction

Final Thoughts

Teamwork makes the dream work

This project taught me a lot about the differences between designing for print and digital spaces. Working in a group of nine people also provided learning opportunities. We had to decide as a team how to limit the scope of our project to produce a cohesive result that still allowed our creative abilities to be showcased. It took some time to arrive at a format allowing for artistic flexibility while still containing a unified style. To learn more about this process, and to view a Figma prototype of the iPad interactions, click here!

More Projects