My Role
Principal Designer
Case Study
Vocalex
Designing a vocabulary-learning system.
Vocalex helps learners build vocabulary through adaptive practice. I led the product design, shaping the experience from information architecture through interaction design.
The Challenge
Design a platform for multilingual learners to practice vocabulary through reinforcement and gamification.
01Discover
Mapping the learning ecosystem
Before opening Figma, we mapped the complete learning experience on a whiteboard, exploring navigation models, content structures, progression systems, and teacher workflows.
02Explore
Exploring navigation models
I explored several mental models before committing to the final architecture.
vs.
Traditional Hierarchy
Clear structure, but created more steps for teachers to find and add words.
Browsing Model
Faster browsing and discovery. This became the foundation for the final design.
03Architect
Building the learning architecture
A system designed to support spaced repetition, progress tracking, and flexible lesson creation.
04Design
Game mechanics that motivate
We layered progression, rewards, and playful feedback to keep students coming back.
Level Complete
Unlock & Reward
Joey's World
Practice Mode
05Teacher Experience
Built for teachers
Empowering teachers to create, assign, and track learning with ease.
Create lists
Select words from categories and build reusable vocabulary lists.
Quick start
Move words into the activity panel so lessons can begin faster.
Flexible practice
Support class use, individual practice, and repeated review.
06System & Design
A cohesive visual system
Created a clear, playful, and accessible system that supports learning at every touchpoint.
Typography and spacing
Color palette
Actions and buttons
Word card states