1. Vocabulary: Achievements

  1. Design direction for an illustrated system of over 100 achievement badges. Read about the creative process behind this project.
  2. Contributions

    • Strategy
    • Product Design
    • Design Direction
    • Illustration
    • Performance Management
  3. Role

    Design Director
  4. Company

    Vocabulary.com
  5. Year

    2018–2019
  6. Credits

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.

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?
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. We present every student with different words to learn—as students play, the system figures out the students’ ability and adjusts its learning program accordingly.


Achievement Levels
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.

The existing names for each level were super creative, with names like Vocabularian, Sesquipedalianist, Walking (and Running) Dictionary, Verbivore, Maven, Sage, and more. We saw no need to change these, and based the concepts for our new illustrated characters off this existing framework.

  1. Novice
    The novice is experiencing the world for the very first time—it’s confusing, amazing, and overwhelming all at the same time. The novice is the default for all students.

  2. Hotshot
    The Hotshot is gaining confidence, but will quickly discover that they have a lot to learn. It’s so successful that in fact, it’s caught its own hair on fire.

  3. Prodigy
    A prodigy is a child who produces at the level of an adult… so we gave an egg a level of consciousness and physical ability that was far ahead of its age.

  4. Maven
    The Maven has many, many diplomas and certifications. It may not be apparent what this critic is judging—but you know they’re judging you with their high standards.

  5. Logophile
    A Logophile is defined as “a lover of words.” So we created a letter that is showing their affection for its fellow words… where else, but set in the city of love.

  6. Sage
    A sage is someone who is very wise. We decided to flip this on its head, and referenced the Internet meme “This is Fine.” And instead of a dog drinking coffee, why not a subversive–looking sloth?

  7. Running Dictionary
    Our dictionary has left the skyscrapers behind, and is working up a sweat as they run past mountains, hills, and watch the sun rise outside the city limits.

  8. Mastermind
    The queen is an imposing figure, towering above the viewer with a singular cyclops eye. This character’s persona leads nicely into the final level a student can earn.

  9. Word Czar
    Our final level was always destined to be a king. The only question was, what type of king? We decided to make our king a youthful, confident, poised lion—a ruler with many years ahead of him. Like a confident student who has mastered many words.

  10. The end result is a series of 20 new Level badges, each with its own distinct character. Their progression mirrors the journey that our students take as they learn to become a master of their own language.

  11. Every student’s profile is represented by their achievement level (to ensure student privacy), and it lends a vibrancy to the student’s page. Recent achievements, favorite (and least favorite) words, and lists are displayed at the discretion of the student.

  12. Every student can view their overall progress, by viewing their achievements in aggregate. Students can sort by type of achievement, the date they earned them, and get more information about their progress within each badge by clicking on them.

  13. What does it mean to master a word?
    When a student masters a word, this means that they understand the word in 4 or more different contexts. This is especially important for English, as many words have multiple meanings. We have two types of achievement badges in this category: Mastered an “X” Word, and the number of Words Mastered.

    These badges show that a student has mastered a word that starts with the letter of the badge. We decided to base the aesthetic of each letter off of an artistic movement / famous artist / work of art. The result is a fairly cultured set of letters featuring a range of styles—the masters like Monet, contemporary artists, historical movements, and art from different cultures.

  14. This series has no milestones within each badge; it's simply a cumulative total of the number of words a student has mastered. Our concept for this series revolves around increasingly strong sources of light, starting from a match, progressing to lightning, and ending with a supernova.

  15. This is an example of how a student see that they’ve earned a badge while playing an activity (in this case, the student is in practice mode). Each major achievement receives a special treatment, replete with its own custom background. Students can clearly see what they need to do to reach the next milestone within this achievement.

  16. Badges that show the number of words mastered are cumulative in nature, and so do not contain the milestones that students see in other categories of achievements.

  17. All recent achievements can be accessed from the top menu bar, by clicking on your level badge. In this example, the student has recently earned Mastered a “P” Word, and an overlay appears showing the progress within this achievement.

  18. What constitutes a streak?
    Streaks are pretty straightforward: when a student gets at least 5 answers in a row, they receive their first Streak badge. We count streaks all the way up to 100 in a Row (this is pretty hard to achieve). In addition, we track the number of days in a row that a student masters a word, and this counts toward their Daily Streaks.

    This series revolves around the concept of speed. Students start by getting a propeller beanie, progress to a hang glider, a jetpack, and eventually a rocket ship. And when a student gets a perfect round (during an activity they’re playing, such as a spelling bee, quiz, or practice) they earn a special treat.

  19. The daily streak badges were inspired by Jack and the Beanstalk–every consecutive day that a student masters a word, they follow a new character higher and higher up the beanstalk. One of the goals behind daily streaks is to encourage students to come back and play each day, so we wanted to make these badges fun and engaging.

  20. School Badges
    Every year, schools that have students playing on Vocabulary.com automatically become part of a friendly competition called the Vocabulary Bowl. This is a competition to see which schools can master the most words during the course of the school year. Achievement badges are awarded to schools on a monthly and annual basis, based on the criteria you see above.

  21. A jam is a friendly competition between different teams of students. These can take place amongst classmates, between different schools, and with anyone that you want to invite to a jam. Achievement badges are awarded to students on the winning team.

  1.