One of my first projects as design director at Vocabulary.com was to reimagine and dramatically expand our system of achievement badges—these are rewards that students earn as they play different activities on our website.
The purpose of this post is to share some of the behind-the-scenes work (the creative process, and the many rounds of ideation) that led to this system of over 100 badges.
For this project, I hired a fantastic illustrator from Florida named Mario Jacome (you should hire him too). Mario and I worked very closely, day in and day out, for nearly 9 months building this system. This was an intense, complicated project with many rounds of ideation. In some cases it involved pursuing 5 or more different concepts for an entire category of achievements (each category could be 15 or more badges).
What is Vocabulary.com?
First of all, let me explain what we do! Vocabulary.com is an online learning system that adapts to a student’s current vocabulary level. The adaptability part is key, because every student enters the classroom with a different ability level. In the past, teachers, schools, and districts would purchase vocabulary textbooks and distribute them to their students. These textbooks did not integrate into the teacher’s curriculum, and they did not take into account the varying ability levels of students in the class.
Vocabulary.com solves these problems by presenting every student with different words to learn—as students play, the system figures out the students’ ability and adjusts its learning program accordingly. When a student has mastered enough words (this means learning a word in at least 4 different contexts), they’ll start seeing what we call reach words. These are words that our platform thinks the student doesn’t know (yet). As they complete practice rounds, spelling bees, quizzes, and more, they’ll learn and level up at their own pace. Vocabulary.com is truly a personalized learning platform.
Playing is learning
Students participate in various activities, such as Spelling Bees, Quizzes, and Jams. The core of the learning system is Practice mode—this is a more freeform type of play that doesn’t involve assignments from teachers. Our software is fun to use, and students are always learning (even if they don’t realize it!)
Integration with curriculum
Let’s talk about how the platform fits nicely into a teacher’s curriculum. Here’s a great use case: a teacher wants her class to read A Wrinkle In Time a month from now. She wants to make sure her students know all of the words in the text, before they open the book. So the teacher assigns lists from the book, and her students have a few weeks to master any words they might have trouble with. When they open the book, they can focus on reading the story, without straining to understand words that they might not know. This also ensures that every student will be familiar with key words and concepts in the book (assignments are not adaptive).
Points provide momentum
As students complete assignments, practice, and play, they earn points. This is important—both to give students a sense of accomplishment and momentum. We’ve created achievements for many different type of activities, which we group into the following categories:
- Levels: based on your cumulative point total.
- Mastered an “X” Word: learned a word in 4+ different contexts.
- Words Mastered: cumulative total of words mastered.
- Streaks: the number of correct answers made in a row.
- Schools: Vocabulary Bowl winners, runners up, and top 10 schools.
- Jams: team leaders, winning teams, and overall winner of the jam.
Every student’s profile is represented by a level badge, and these are comprised of fun, ironic, dinstinct characters that we’ve dreamed up and illustrated. Student profiles contain no photos or personal information (other than a first name, if they choose). We strive to protect the personal privacy of our students, who are largely 5th—12th graders.
We kicked off this project by starting with the Level badges.
The existing set of Level badges had really great, fun, whimsical names—but lacked the compelling imagery necessary to make them great. Our first constraint was to work with the existing names.
Working with Mario and my internal team, we mapped out requirements for the entire badge system:
- All badges should show a clear conceptual progression
- Each badge needs to accommodate a 4-step progression within the badge
- All illustrations must be vector and output in SVG format
- They need to be designed with future, looping animations in mind
- As much as possible, we should avoid using people in the badges
- Badges shouldn’t be too cute or juvenile
- They should be edgy / subversive enough that a teen would share them
We started by looking at existing badge systems, and sourced ideas from as many places as possible. It proved fairly difficult to find large systems of badges, so we aggregated together all of the types of badges we liked, and the type that we wanted to stay away from. One of our best sources of inspiration came from DuoLingo, which has a fairly large system of fun badges with sub-levels built in, and shows progression to the user in a clear and compelling fashion.
I’m very, very big on creative exploration. When I was in design school, one of my professors taught me that you need to come up with at least 30 different ideas before you’ll have anything good. You’ll probably throw 29 of them away, and that’s okay. You may even wind up recycling some of them in the future. We took the time in this initial phase to get as many ideas as we could down on paper.
We kicked off every portion of this project by brainstorming ideas, starting with lists of concepts and ideas. Below are pages from my sketchbook listing out different ideas for every level. By the end of this project, I would go through two entire sketchbooks of ideas (don’t worry, I won’t show them all here—you get the idea).
Progression within badges
Each badge had to include sub–levels, which we decided to call milestones. This would give students a sense of progress within each level. This becomes especially important in later levels, when it can take hundreds of thousands, or even millions, of points to reach the next level.
We sketched out as many variations as we could come up with, including space for the names of the badges. We worked in parallel on these containers and our initial set of levels. Here are some of our container sketches during this phase:
The first level we chose to tackle was the Verbivore (Level 8). We knew from the outset that this character was going to be a dinosaur, and so it was a perfect candidate to rapidly test out different badge shapes.
The initial idea for the Verbivore was that it was going to eat the letters of its name (in the beginning, we assumed that at least the level badges would require names in the actual artwork). As you can see below, some of the sketches contain stars, which represent the different milestones within each level. We needed to figure out how to integrate these into each badge, and our rapid iteration led us to narrow the containers down to a few shapes (with the circle being the eventual winner).
The next step was to explore different personalities / emotions for the character. Is the Verbivore happy, nerdy, cool, shy, confident? In the next round of sketches we worked through these questions, and explored how the dinosaur would interact with supporting elements (it could be eating leaves, not letters, for example).
After reviewing our initial sketches for the Verbivore, we realized they were trending too cute. We reminded ourselves that one way to measure success for this project was an affirmative answer to the question “would a teen put a sticker of this badge onto their laptop?” We decided to make the Verbivore grumpy… like it got up on the wrong side of the nest that day.
For every achievement, we decided to create a custom background—using items pulled directly from the badge (or something conceptually related to it). These backgrounds are used in student profiles, and in “slides” that appear when you earn a major achievement during the course of play.
When we take a look at the Running Dictionary (Level 18), you’ll see how the stars that represent the milestones fit into our badge design.
After setting a solid direction with the Verbivore, it was time to start sketching out ideas for more levels. One of the challenges we gave ourselves was to generate as many concepts as we could for each level. With the Novice (the very first level) we looked at a tadpole, caterpillar, a plant sprout, and more. Some of these initial ideas informed other badge categories that we would tackle later (the sprout would live on as part of the Daily Streaks series).
As we sketched, we asked ourselves questions like: Does this character have enough personality? Is this the right emotion? Does the illustration embody the ethos of the name? As you can see in the below iterations for Novice, we went from sheepish, to unsure, to happy, to an expression of awe and wonder—as the tadpole experiences the world for the very first time.
Walking & Running Dictionary
Next, we turned our efforts to two consecutive badges that were further down the line (Levels 17–18), and pretty straightforward: the first would be a dictionary that was walking through the city, and the next badge would follow up with the same exact character running.
One of the things you’ll notice in these sketches and early iterations is that the dictionary identified as a male character. We eventually did a review of all badges, identified those that were gender–specific, and removed items such as the bowtie that you see here.
From our rough sketches, Mario brought them into Illustrator, and we started refining our Walking Dictionary into a polished vector illustration.
Next, we took the same exact character—who just one level prior was whistling as they walked through they city—and put them to work running through different environments. We looked at the idea of having the dictionary run though a park, on the road, in the mountains, and on the beach. In the end we felt that the strongest conceptual connection to the Walking Dictionary was running on the road (outside the city) with mountains in the background.
In the following illustrations you can see examples of future progressions that we would build within each level. The dictionary puts on more and more gear (wristbands, sweatband, fancy shoes etc) and its expression changes as it gets more intense. This progression would coincide with the number of stars applied to each milestone (which you will see momentarily in the context of the website).
As students play, they earn achievement badges. When a student levels up (or reaches a milestone within an achievement) what we call a slide appears from the right side of the screen.
At this point the student will see a number of stars, if they have reached the second through fourth milestone in that achievement. As you can see below, the student has reached that fourth milestone, and the circular white line gives them an indication of how much further they need to go to achieve the next milestone. We also provide students with the number of points they need to reach that next milestone, with a progress line below the slide.
The concept for hotshot (Level 2) was to create a character that was doing well, but unable to control itself. One step up from Novice, a Hotshot is gaining confidence, but will quickly discover that they have a lot to learn. We looked at toast, matches, matchbooks, and decided that the concept of having your “hair on fire” would work nicely with a running matchstick—they can’t escape their own success.
The Phenom (Level 3) possesses raw power, and much like the Hotshot, it can’t fully control itself. Our concepts revolved around a baseball—we looked at a ball being pitched, and settled on a ball that had been hit (and is presumably on its way out of the park). We added goggles to give the ball some more personality… it’s clearly prepared to move fast, but maybe not quite this fast!
For the Prodigy (Level 4), we brainstormed a few different types of characters: an ape inspired by King Kong, a seal that’s very good at balancing, and an elephant that’s graduated from college / very adept at taking selfies.
We decided that what made King Kong special was their physical strength—however, being a prodigy is a much more cerebral affair. The seal was good, but not prodigy level either.
We also decided that the elephants weren’t hitting the mark. At this point, Mario and I went back to the drawing board and asked ourselves the question: What does it REALLY mean to be a prodigy?
The answer of course, is below—a child who produces at the level of an adult expert. Prodigies are usually identified within a select number of fields. We started tinkering with a new idea, which was loosely based off of Humpty-Dumpty. We would give an egg—the most basic building block of a chicken—some level of consciousness that was far ahead of its time.
As you can see, we sketched out many iterations, and arrived at the idea of an egg that can walk. Future progressions would include some of the ideas sketched out above… the egg listening to music, its shell moving further up its yolk–body, etc. They say eggs can’t walk, but what do they know?
The Brainiac (Level 5) had a strong concept from the beginning—it probably needed to involve a brain, and wouldn’t it be fun if it was a robot as well? We looked at old sci-fi, especially anything involving Martians, and settled on the idea of a “brain case” bolted to the top of a robot. However, this would not be a fully-functioning robot, as a student who has reached this level is only 25% of the way to achieving ultimate mastery. We gave the robot a slightly malfunctioning eye to add some personality.
Next we moved on to the concept of a Savant (Level 6). What is a savant, you ask? Generally speaking, a savant is someone who can do something an order of magnitude faster or better than other people. Our initial ideas centered around graduating from college early, and involved musical notes and an elephant. Neither of these concepts really worked, and we circled back to our idea of the talented seal (from our Prodigy sketches).
The seal was a much better fit for the idea of a Savant. However talented this seal is though, they’re still figuring it out—as evidenced by the stage fright this character is experiencing. We thought this was a good metaphor for performing. Almost everyone has experienced the simultaneous feeling of excitement and nervousness that comes with being on stage.
For Level 7, we decided to work off the concept of a snooty art / restaurant critic. Our character would have many, many diplomas and certifications. It may not be apparent what they’re judging—but you know they’re judging.
For our 9th Level, we had to brainstorm ideas of what “a lover of words” might be. Some of our initial sketches were a mailbox that likes to eat letters, a relay box (yes, that’s what those green or blue mailboxes on the sidewalk are called!) that likes to eat letters, or a Scrabble tray that spells out the word “Luv.”
The problem was that none of these characters exuded enough emotion. We decided to create a character that would prescribe their affection with a rose, set against the backdrop of the city of love.
For our 10th Level, we began sketching out ideas around the definition of the word: a sage is someone who is very wise. Initial ideas revolved around using teacups inspired by Beauty and the Beast, or a magic hat that looked very, very upset. Neither of these characters really communicated “wisdom” though, and they were quickly shelved.
Returning to the idea of making our badges a bit subversive, we decided to reference the Internet meme “ This is Fine.” Instead of a dog drinking coffee, why not a sloth? Instead of a wise character, what if the sloth is merely convinced they’re wise?
This badge (Level 11) had a very strong concept from the beginning—a maestro can be a distinguished figure in any profession, but in practice the label is really only applied to composers.
We started with a dog, but it wasn’t strange enough. A bird seemed to be a better fit—we looked at a few different types, and settled on the idea of a pigeon being the composer. Why a pigeon? They’re generally known as a pretty common, ordinary bird. We felt that this was the perfect setup—a common bird, rising to the top of its profession as a composer.
For Level 12, we would need a wise, all knowing character. One of our initial ideas was to use a sloth, but this character was destined to be the Sage. After some brainstorming we came up with the idea of using an octopus—these are very smart creatures.
The octopus was the opposite of the stereotypical idea of a guru (sitting alone on top of a mountain, dispensing knowledge from on high). Our guru would be floating underwater, meditating and ruminating on things that we couldn’t even begin to fathom.
Our 13th Level turned out to be cursed—cursed in that we cycled through at least 4 major directions for this badge. Part of the problem stemmed from the fact that a Polymath is someone who has deep knowledge in many areas. Our initial directions attempted to convey this, and it was too much. A spider who can read and write. An octopus who can read, write, do math, and science (this badge was developed in parallel with the Guru).
Over and over we tossed out ideas and sketches… this was a tough one. Any way we drew these characters, there was still too much going on. We needed to drastically simplify the concept.
We took a step back, and brainstormed some more characters. The idea of a bear who had many unexpected skills appealed to us. We decided to take a new direction with this idea—the Polymath would only exhibit one skill at a time. In the future idea, we would use the badge’s built–in progression to highlight multiple skills, one milestone at a time.
Our 14th Level was based on what I assumed was a made-up word. As it turns out, it is indeed a real word—and the definition is (seriously, I’m not making this up): A person who tends to use sesquipedalian words.
Translated to English, this is a person who uses very long words. And given that we wanted to avoid using people in our badges, what better creature to personify than a snake? We landed on a very simple idea: the snake would get longer and longer, as a student progressed through this level’s milestones. At the end they would get some cool shades, because it’s hot and sunny in the desert, am I right?
This is a made-up word. However, it’s based on the word lexicomania, which seems to mean “an obsession with collecting dictionaries” … or as we decided to change it to, an obsession with collecting letters.
Who better to be hungry for letters than the hungry, hungry hippo? We had to decide where the letters would come from… were they floating? Falling from the sky? No, they obviously needed to be fed to the hippo on a conveyor belt, like some bizarre mashup of fast food and an airport luggage system.
For future progressions and animations, the hippo would chomp through the whole alphabet—eating faster and faster, until it couldn’t keep up any more.
Our 16th Level started off with the idea of illustrating a sleepy librarian. The idea of a cat as the librarian made a lot of sense to us—but it was far too passive as a badge. Students who have reached this level are very, very active in the expansion of their vocabulary.
Sometimes your ideas don’t work out, and that’s okay! We went back to the drawing board, and came up with a much stronger concept—an aspirational turtle. This turtle knows no bounds; replete with Icarus wings, they have decided to leave the ocean, fly through the sky, and explore outer space.
Our second to last Level (19) is a pretty special one—and the character that we created really had to fit the bill. We already knew that the final level was going to be a king, and so the idea of using a chess piece was promising. We started by sketching out ideas around the knight—the piece that represents armored cavalry.
We looked at different ways to draw this character—which perspective was right? Straight on, flat from the side, three–quarters view? After pursuing this idea for a bit, we decided to wave off, as the character wasn’t regal enough. There was another chess piece that was a much stronger match for this concept—the queen.
The idea of a queen fit very nicely with the next level (Word Czar). We used forced perspective to make it feel like the queen is ominously towering above the viewer, like some all–powerful figure.
We decided that this would be no ordinary chess piece. This queen would be robotic, and have a single, cyclops eye—a cyclops laser eye to be exact (future progressions would show the laser eye scanning the area, like the Martian machines in War of the Worlds).
Our final Level (20) was always destined to be a king. The only question was, what type of king? The word czar conjures up images of antiquated Russian royalty. We decided to make our king a youthful, confident, poised lion—a ruler with many years ahead of him. Kind of like a confident student who has mastered many words.
The progression for the Word Czar would be simple—he would accumulate more sashes, ribbons, and a crown as the student progressed through this level’s milestones. He would start outside the castle, move into a ballroom, sit on the throne, and eventually speak from the balcony to his people.
The end result of this process is a series of 20 new Level badges, each with its own distinct character. They progress from awe and wonder, to basic competence, confidence, and eventually to mastery of the domain. This mirrors the journey that our students take as they learn to become a master of their own language.
Mario Jacome and I worked very long and hard on this project. I hope you, your teachers, and your students enjoy the end result. Thank you!
Stay tuned for the next post in this series, where I’ll dive into the process work and ideation behind the Mastered an X Word, Words Mastered, Streaks, Jams, and Schools achievement categories.
Originally published at https://meetduo.com on September 17, 2019.