Gan Lin

Emotions: T, W, X

Portfolio

View Process as Web Gallery Download PDF Deck ( 4.5MB )

Concept & Research

The ultimate goals of Team Inside Out is to teach children to understand, express and respond to emotions through a deck of 26+ cards plus interactive storytelling and games on a tablet. Our project, ABCs of Emotions’ primary audience are elementary school children between the age of 5 and 12 who are beginning to explore their feeling in a deeper and meaningful way.

Utilizing Illustrator, Photoshop, After Effects, Figma and Principle, we iterated and executed our print and digital designs with individuality; each card and its interaction tells a different story with a different vibe.

T is for Tired

My first card tells a story of a little green frog sitting on a lily pad settling into his dream on a lazy evening. The back of the card will reveal the narration as well as the definition for its word: Tired. For interaction, I want the child to “catch” the Zs to let the frog slowly falling asleep. A hidden definition is implemented, whereas the child’s finger get tired through constant tapping; the tiring of muscle in addition to the consciousness.

Front and back of the card with the theme. A sleeping frog on a lily pad with bubbles of Zs around it.
Tired Spread
Video of Tablet Interaction Prototyped with Figma

W is for Worried

My second card tells a story of a little purple striped cat distressed with disappearance of his pet fish. Again, the back of the card will reveal the narration as well as the definition for its word: Worried. For interaction, the cat is on his boat trying to fish out his missing pet hidden behind corals on the ocean floor. A thief probably stole his fish but dropped it into the water by accident.

Front and back of the card with the theme. An anxious cat looking into his almost empty fishbowl.
Worried Spread
Video of Worried Tablet Interaction Prototyped with Figma

X is for eXcited

My third card tells a story of a little mole fully equipped with safety helmet and pickaxe discovering a gold chest under the ground and tunnels which he dug through. The wide mouth and star eyes emphasize his excitement. It was difficult to find proper word start with X so I decided to brainstorm through words that include X within itself, thus eXcited is chosen. For interaction, I decided to keep it simple by letting the little mole glow up upon lifting the lid of the chest.

eXcited Spread
Front and back of the card with the theme. An exhilarated mole in front of a chest full of gold nuggets.
Video of Tablet Interaction Prototyped with Figma

Recap

There’s so much I learned from this project where I flex both my graphic design and interactive design muscles. It’s the first time I have worked in a team of nine amazing designers; from that, I have learned to embrace our different styles to achieve a greater whole through shared design constraints. It was tough to work in a medium that I haven’t worked often in and at the same time learning & exploring new software features. Ultimately I have acquired new skills in expression studies and mini-game design with storytelling elements.

Emotions Cards
Emotions Cards: T, W, X

Downloadable Assets

You may use the below assets created for this project provided via Figma as long as you give attribution, share your outcomes, and if your use is non-commercial in nature.

The above work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Creative Commons License