Project: K-2 Vocab Lessons —Set and Widget Design
Solutions:
Developed “word widgets” which contain one of three simple interactions combined with animation demonstrated word-meaning in a fun and memorable way.
Developed menu renderer (code) to allow student’s to choose the order in which they learn the words.
Developed activities with a visual tie-back into the “Vocabulab”, the background designed specifically for these lessons.
Academic Skill Focus: Vocabulary
User Level: K-2
Problems to Solve:
How can we teach the meaning of words in an interactive way?
How do we give student’s a feeling of agency in a limited code-base?
How do we connect differing activity types back to the overarching lesson?
Storyboard Phase
Created a new ‘show opener’ specifically introducing the “Vocabulab” setting within the brand. Lesson flow consists of 5 main parts: Reading Aloud (words in context), Widgets (exploration/instruction), Review Activity, Mixed Practice (through “sticky stories”), and Quiz. Determined flow would be consistent amongst lessons but activity types varied for engagement.
Word Widgets
We needed a way to teach 2-6 individual words within a lesson using the characters and limiting the amount of time student’s are not interacting. We also wanted to include choice, though limited, to give students a feeling of agency in an otherwise linear lesson.
“Word Widgets” were designed as a projection-like-alien technology and animated to come out of the “Word Orb” containing the lessons Read Aloud text as well as the widgets.
A Menu renderer (code) was developed to give students choice over the order they select to learn words. After making a selection, there is a short instructional flow: say the word aloud, explore using the widget mechanics, read the definition and synonyms, and end with an open-ended choice question to help solidify the content in a personal way.
Three Basic Interaction Types
We used three basic interactions within the widgets: slider, single-tap, and multi-tap. Pairing these inputs with whimsical and silly animations create an engaging experience even with limited mechanics. The playfulness and interactive nature of the instruction helps students to remember the definitions.
Slider Input
Single-Tap Input
Multi-Tap Input
Vocabulab Development
A new Show Opener was developed for the brand that introduced the Vocabulab in which the characters Plory & Yoop learn new words through play with the user. Given the large number of components in this lesson flow, we needed a way to tie all lesson-parts together visually.
New Show Opener Animation
Though the activity designs could seem random (see section below), the themes are all featured as “Easter eggs” in the show opener where you can see various parts of the room with props used in the activities. We also designed a Word Orb containing all the words for this lesson and “chosen” by Plory and Yoop at the beginning of the animation.
Mixed Practice Activity Design
Our user research indicated that students felt most engaged in activities when the concepts were short and involved “helping” our characters in some way. We developed what we deemed “sticky stories” which involved brief character set-ups (i.e. help Plory charge everyone’s tablets) that were playful yet intuitive and simple as to not conflate the pedagogical instruction with the UI instruction. Each activity type ends with a satisfying “pay-off” animation — many of which are randomized from a small library of animations for that activity type.