Words Mastered

This is the third post in a series showcasing the process and ideation behind a system of over 100 achievement badges created for Vocabulary.com

7 min readOct 9, 2019

What is Vocabulary.com?

Vocabulary.com is an online, gamified platform for learning words. It teaches vocabulary in an adaptive fashion-our algorithms suss out the words that each individual already knows, and serve up different words to each student. This is incredibly important for a classroom, as every student enters with a different ability level. Old-school textbooks provide the same exact words to every student. Vocabulary.com teaches students the right words, at the right time, in order to improve their literacy and test scores.

The platform also integrates easily with a teacher’s curriculum, so that entire classes can learn a set of words together (for example, before reading a new book as a class).

Why mastering words is important

It’s not enough to simply memorize one definition of a word. Students need to understand how each word is used in multiple contexts. This is how we classify what it means to master a word: learning that word in 4 or more situations / learning all the possible meanings of that word. When a students does this, it gives our algorithms a strong signal that real learning is happening-not just rote memorization.

Within this type of achievement, we have two series: Mastered an “X” Word, and the number of Words Mastered. Today I’m going to share some of the overall concepts behind the latter series.

A cumulative total

This series has no milestones within each badge; it’s simply a cumulative total of the number of words you’ve mastered. Starting at 5, and running all the way up to 10,000, there is ample room for students to see progress. For context, the average adult has a total passive vocabulary of about 40,000 words. Any student who can master 10,000 words is doing amazingly well!

Creative Exploration

This series of badges provided ample opportunity for creative exploration. I’m a big believer in giving people the time and space for ideation… as one of my college professors once said “you have to come up with at least 30 ideas before you’ve got anything good.” If you go with the first thing that comes to your mind, it’s likely to be either a) obvious or b) a subpar solution… of course, there are always exceptions.

Working with the illustrator I hired (Mario Jacome), we iterated through many different overall concepts. As with all of the other badges, we needed to come up with a progressive solution that was obvious to the user. It was a challenge in this case, with 16 badges representing a huge range of numbers. Let’s walk through some of our initial ideas, and then we’ll take a look at the final concept we chose for this series.

Patterns and line art

Our first idea was simple-combine different patterns and line art with the numbers themselves on each badge. In order for this concept to work, we would need to establish a scheme that grew in complexity with each badge. Although the patterns worked well for the lower numbered badges, they started to get too complex when working with the higher numbers.

After completing a few sets of rough illustrations, we determined that this concept didn’t fit both stylistically and conceptually with the rest of the achievement badges.

Hail to the chief

For our next concept, we looked at military ranks from different armies, navies, and air forces around the world. We tried separating the numbers from 1,000 and up into “officer ranks,” and using the standard chevron for the lower “enlisted ranks.” While this direction showed a lot of promise, in the end the illustrations became too complex at higher numbers. They also were a bit too sharp and angular-this didn’t fit in with the more organic illustration style of our other badges.

A landmark idea

The next concept that Mario and I sketched out revolved around the idea of placing the numbers behind landmarks from around the world. This was an interesting concept, but it quickly became clear that there was no logical progression within the series. Does the Leaning Tower of Pisa go before the Eiffel Tower? This is a pretty subjective area. We came to the conclusion that students definitely wouldn’t see a clear progression, and this was a requirement for every series of achievement badges.

This idea also relied heavily on displaying the numbers in the badge, which we were starting to sour on. With the exception of the Mastered an “X” Word achievements, no other badges had text in them. And even within that series, the letters were drawn to match or reference an artistic style. These two factors led us to scrap this direction and focus on another concept.

A lightbulb turns on

We went back to the drawing board, and perused through our initial ideas. The concept of using power sources had gotten traction in our early brainstorming, but it was killed due to lack of clear progression. The idea of light sources was floated by my boss, and it seemed like an idea with merit. Mario and I got to work putting this idea down onto paper.

After some quick sketching, we determined that this concept had strong potential. It would be possible to show a clear progression: from a simple flame, to a torch, a light bulb, and ever more powerful light sources. We would mix man-made sources with the light provided by mother nature-all the way up to a supernova explosion.

We looked at using light from the sun, trains, airplanes, lasers, lightbulbs, stadium lights, lighthouses, and a fireworks sparkler. We iterated many times through the right combination of light sources, their respective order, and how each light source was to be illustrated (From the side? Three-quarters view? Straight on? From above?)

For this series, we used a slight gradient for each light source-something we had avoided doing elsewhere. It gave the badges a slight stylistic differentiation from the rest of the series, while still working within the overall aesthetic. Let’s look at a few examples of our finished artwork:

50 Words Mastered

Who doesn’t dream of carrying the Olympic torch some day? This badge is designed to give students a real sense of progress, as mastering 50 words is a big milestone in the development of their vocabulary.

250 Words Mastered

If you want your parents to buy you a lava lamp, you’re going to have to do your vocabulary homework!

3,000 Words Mastered

We really wanted to put a cow in the UFO’s tractor beam, but it was a bit heavy-handed. We found the perfect place for our bovine star in the background pattern.

4,000 Words Mastered

What’s more powerful than raw electricity from the sky, courtesy of mother nature?

10,000 Words Mastered

What’s more powerful than the sun? An exploding sun, of course! One interesting thing to note here is that no one really knows what a supernova looks like. Working within the technical constraints of our badge system, we had to ensure this worked in vector SVG format (it does), and experimented with many different combinations of shock waves / sunburst effects to get this “exploding star” just right.

Bringing it all together

I hope you’ve enjoyed reading about the concepts we iterated through in this series of badges. The final set is below, and you can see how our progression really starts to take flight around 2,000 Words Mastered. Mario and I put a lot of work into this, and we hope that the students and teachers playing on Vocabulary.com enjoy it as well!