immersing education in joyful stories

2017 | UX Design & Illustration

Illustration credit: Len Yeh

When designers invest time in creating fun stories and worlds, they can make a difference in education by building anticipation and delight.  

A big challenge for digital education is to ensure students know how to interact with an activity. This gets tricky with children who are used to working with their hands (i.e. playing with blocks, not digital UI) and are easily intimidated by unfamiliarity.

To "onboard" and emotionally prepare students for what to expect, we took some cues from industries who have long histories designing for kids: cartoons and video games. 

creating Mood and genre

To develop a wide range of references, we reminisced about images that resonated with us as children.

Classic Looney Toons were a fantastic study. They were simpler than I remembered, reinforcing the idea that great color schemes and typography can go a long way in implying a story or tone. From a single screen, you could anticipate if this was a comedy, mystery, or thriller.

DISCLAIMER

Client names and other information have been redacted and obfuscated to comply with my non-disclosure agreement. Opinions and analyses in this case study are my own and do not necessarily reflect the views of my past employers.

tl;dr

I created stories for educational games to help guide interaction design and improve usability. Responsible for concepts, sketches, illustrations, motion prototypes, and user tests.

Team

Len Yeh, Product Design
Jennifer Guillen, Visual Design

Classic Looney Toons cartoon title cards for your nostalgia.

Implying action and setting up affordances

Video game illustrators are great at adding another level of anticipation, as their covers often imply the action you want to take. They set up paradigms and identify if the game mechanics are about collecting, avoiding, or exploration. You also quickly know who you are working with or against.

Game covers do a great job of implying the action you're going to take, and identifying the villains and friends.

We internalized these lessons every time we approached a new activity. What kind of wrapper could be conducive to digesting the instructional material? 

Some good questions to ask ourselves...

  • Who are these characters?

  • Why are they here?

  • What are they doing?

  • Where are they trying to go

  • What elements can show feedback?

A story with a beginning, middle, and end

When exploring different stories, we want enough action for students to feel a good sense of progression. They need to know that this activity isn't never-ending. "Catharsis" may be too strong a word for what we're trying to provide students, but we want to give some semblance of a resolution.

We want enough action for students to feel a good sense of progression.

Astronauts.gif

Our astronaut buddies fly through the universe to explore new planets! (Motion design: Len Yeh)