Vocabulary Achievements
Design Director | Visual & Product Design | Vocabulary.com | 2018–2019
Vocabulary.com is an adaptive learning platform that strengthens and expands the vocabulary of millions of students all over the world (primarily 5th to 12th grade). Our software is integrated into the curriculum of tens of thousands of schools across the United States.
The Opportunity
The original set of achievements (pictured below) were in desperate need of an aesthetic makeover, and many students had begun to max out the available badges. Without the opportunity to earn additional achievements, we predicted that student engagement (and henceforth learning) would start to decline.
Our Thesis
Working collaboratively with my internal team, we decided that the following changes would likely achieve our goal of increased engagement:
• Inject new life into the platform by illustrating rich, colorful badges that show a clear conceptual progression.
• Create more opportunities for students to earn achievements by expanding existing categories, and creating entirely new ones.
• Accelerate every student’s feeling of progress by adding three milestones and corresponding bonus points into each achievement.
• Develop new ways for students to view their progress, the progress of their friends, and enable head-to-head comparisons with other players.
The Plan
We planned out how to tackle the various aspects of this project: badge design and illustration, web design, and the development that needed to happen under the hood. I determined that we needed an illustrator who could also handle animation (if we had the budget), and hired the very talented Mario Jacome to collaborate with us.
Research
Our initial research would include evaluating other badge systems and relevant gamified platforms. After evaluating the potential complexity of each badge category, we decided to kick off the project with the Level badges. The existing names wouldn’t change—they were fun and creative: Novice, Hotshot, Vocabularian, Walking Dictionary, and more. These badges would set the tone for the rest of the system:
• Mastered an “X” Word: learning a word in 4+ different contexts.
• Words Mastered: a student’s 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 jam events.
Critiques
I scheduled weekly critiques with Mario and myself, and bi-weekly critiques with my internal team. These meetings were an opportunity to review iterations, refine the work, and track our progress.
Wireframes
Once we had a solid set of badges in progress, across all the various categories, we began wireframing out the user experiences and screens where students would interact with the badges.
Working Prototypes
Building out a working prototype would serve as a way to gauge how everything was coming together. Our goal was to make these prototypes as real as possible, and we increased the fidelity as we progressed toward launch.
Moderated User Testing
This is an important step in the human-centered design process—testing your work out on actual users. We tested our prototypes frequently as development ramped up.
Design Work
I’m very, very big on creative exploration—it’s important to give your team the time necessary to ideate on as many solutions as possible. We kicked off work on every category of badges by brainstorming, starting with lists of concepts and ideas.
Container Shapes
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.
Mario and I 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.
Verbivore
The first level we chose to tackle was the Verbivore—this was a great candidate to rapidly test out different badge shapes (it was always destined to be a dinosaur). Some of the sketches below contain stars, which represent the different milestones within each level. Our rapid iteration led us to narrow the containers down to a few shapes, with the circle being the eventual winner.
Novice
After setting a solid direction with the Verbivore, we moved on to the first level, the Novice. Our initial sketches looked at a tadpole, caterpillar, and a plant sprout. The concept was to create a character that is at once amazed and overwhelmed by the new world around it.
Custom Backgrounds
We created custom backgrounds for every badge, sometimes pulling elements from the illustration, and other times by connecting with the concept of the badge.
Completing the Category
We worked through the rest of the Level achievements by iterating on several badges at a time, working from the strongest to the weakest initial concepts. The end result is a progression mirroring the journey that our students take as they learn to become a master of their own language.
If you would like to take a deeper dive and learn about the process behind each level, I’ve written up a post which you can read here.
Student Profiles
Every student’s profile is represented by their level. I redesigned the page to highlight the new badge and custom background, injecting some much-needed vitality into every profile.
Student Achievements
This page was redesigned to highlight the most recent achievements a student has earned, giving them an at-a-glance look at recent progress. Students can sort by the type of achievement, the date they earned them, and get more information about their progress within each badge by clicking on them.
Mastered an “X” 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. 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.
Earning an Achievement
When a student earns an achievement during an activity (in this case, the student is in practice mode), the badge slides in from the left. All major achievements receive this treatment. Below the badge, students can clearly see what they need to do to reach the next milestone within the achievement.
Words Mastered
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.
Recent Achievements
Students can access their most recent achievements by clicking on their level badge from the top menu bar. In this example, the student has recently earned Mastered a “P” Word, and an overlay has appeared, showing their progress within this achievement.
Streaks
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, which is very 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. Students can also earn a perfect round during an activity.
Daily Streaks
These 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. The primary goal for these badges are to encourage students to come back and play each day.
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.
Vocabulary Jams
“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.
Additional Links
• A more in-depth look at Redesigning Vocabulary’s Achievements
• Read more about the process behind the Mastered an X Word badges
• Behind the scenes of the Words Mastered series
• Illustrator: Mario Jacome