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.
My 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.
The Daily Streaks 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.
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.
