Behind the Design: Khan Academy Avatars

About two months ago, Khan Academy asked us to create avatars for the new Learning Dashboard which launched in August. We thought it would be a fun experience for students to see their avatars evolve into advanced creatures as they progress through their online courses. This was an exciting opportunity for us to showcase our skills in character design and illustration.

DEFINING OBJECTIVES

We wanted the avatar designs to be simple, charming, and unique. Since these illustrations were for an educational platform, we strayed away from making anything too crazy like a monster from Digimon or Yu-Gi-Oh!. In the past, Khan Academy users preferred more androgynous creature-like avatars over the other robotic avatars. Therefore, we decided to make our designs more like simple monsters, dinosaurs, and animals. As the avatars evolve, their shapes and forms would feature different character traits to give the students something to look forward to when they advance to the next level. Each avatar would have a specific color and element to make it more memorable and distinguishable. To tie in with the leaf in the Khan Academy logo, we decided that the avatars would start as seedlings and later evolve into developed creatures.

COLLABORATIVE SKETCHING

Minh and I started sketching avatars individually on paper without sharing our work until we were satisfied with our concepts. Then we took our ideas to the whiteboard for close collaborative sketching—this process felt more organic and transparent because we were drawing on the same plane, which allowed for instantaneous peer feedback. If I needed help with an idea, Minh would simply draw his version of an avatar next to my initial sketch. Sometimes it was a back and forth process of drawing on each others’ sketches. If we weren’t happy with an avatar’s characteristic, we would draw it over and over again in different variations until we were satisfied.

AVATAR CHARACTERISTICS

We were intentional about designing the characteristics of the avatars to create variety for the students to choose from. As the creatures evolve, their unique features transform in scale, quantity, shape, and position. For example, the green avatar’s leaf on top of its head would grow larger and multiply as it evolves. In the early stages, its body starts out as very round with short limbs. As the green avatar evolves, its limbs grow larger with new joints and eventually ends up in standing position like a human to convey higher intelligence.

We scaled up the heads of early avatar stages to convey youth and double down on cuteness. Also, we kept the eyes small to let the other body features define the avatar’s essence. Big eyes with extra details would have made the creatures overly cartoony, and would not have translated well into an education platform.

Each avatar had to embody an elemental force such as fire, water, vegetation, electricity, darkness, and telepathy. Sometimes we chose the avatar’s element before drawing its form, and at other times we assigned an avatar’s element after drawing the basic form of the creature.

VECTORIZE

Minh and I took pictures of the refined sketches and then traced the photos in Illustrator. We primarily used the Pen tool and Pathfinder palette to create individual avatar characteristics. Also, we were aiming to create curvilinear lines and shapes that were smooth and without excess anchor points to convey a clean look. To keep things simple and consistent, we initially used only two shades of the same color for each avatar. Then we added one or two extra shades of color to each avatar to define shadows, highlights, and other details.

CONCLUSION

We’re really happy with the final product and had a ton of fun making them. I look forward to more collaborative sketching; it made brainstorming ideas and executing on them smooth and harmonious. We hope that the Khan Academy avatars’ fresh look and “leveling-up” concept will enhance the users’ experience by giving students a fun way to personify their learning success.

You can help Khan Academy name these new avatars by using this wicked HTML/CSS submission tool.