VOCABULARBEE
Home Page, Ask an Expert, and The Library
PROJECT OVERVIEW
VOCABULARBEE
A gamified, colorful mobile app built to support vocabulary learning for students and professionals, anytime, anywhere.
• Role: UX Researcher & Designer
• Duration: 1.5 months
• Deliverables: research artifacts, wireframes, interactive prototype, style guide
VocabularBee transforms vocabulary learning from a repetitive task into a joyful, motivating experience. The goal was to create an app that is both effective and energizing, offering brief study sessions that fit seamlessly into busy schedules. By blending familiar study practices with playful interactions, learners build confidence while having fun.
THE CHALLENGE
Create a mobile app that makes vocabulary practice engaging, efficient, and sustainable for busy learners.
PROBLEM STATEMENT
Students and professionals need a way to:
• Strengthen vocabulary through multiple modalities that echo dynamic learning styles
• Enjoy the learning process - sparking curiosity and resulting in concrete successes
• Practice flexibly with short sessions that fit into any schedule.
POTENTIAL SOLUTION
A mobile application that incorporates traditional study methods with FUN!
• Flashcards for quick recall
• Mini-games adding novelty and motivation
• Quizzes to mirror real-life progress and retention
• Mascot encouraging learners on their journey
RESEARCH
To guide design decisions, I explored the problem space from multiple angles. I examined existing vocabulary-learning apps to understand their strengths and shortcomings, gathered firsthand insights from potential users through interviews, and created a persona that distilled patterns into a relatable archetype. Together, these methods ensured the final result was both competitive with the existing market and authentic to learner needs.
COMPETITOR ANALYSIS
I compared and contrasted four existing apps to identify strengths, weaknesses, and gaps in the market. These insights shaped my list of must-have features while identifying opportunities for refinement. This allowed me to build VocabularBee to deliver vibrant visuals, effective learning, and engaging experiences that set it apart from competitors.
StudySmarter
BrainScape
Quizlet
MyWordList
Quizlet
StudySmarter
Competitor Screenshots
Competitor Analysis Snapshot
USER INTERVIEWS
Eight interviews provided direct insight into how real users interact with existing vocabulary-learning apps. They revealed frustrations, favorite functions, and must-have features. These conversations refined my vision for an app that would balance effectiveness and delightful.
Skip Tutorials
Many participants noted they often skip tutorials, even if they feel like they shouldn’t.
Need for Context
Context helps, especially with words that can be similar to familiar words (moral vs morale).
In-the-Moment Feedback
Users said that immediate feedback during study was motivating.
Short Sessions
Short, focused study sessions worked best for all participants.
Interactive Play
Games and interactive learning increased participation and learning success.
Smart Card Management
Users wanted the choice to repeat harder words while setting aside known terms.
USER PERSONA
I created a “proto-persona” Sunny, to represent the needs and challenges of both a working professional and a full-time student. I mapped her needs into user stories that highlighted exactly what she required from a vocabulary-learning app, which led to a working hypothesis for the project.
Using her voice, I pinpointed where the app must provide specific functionality. Beyond flashcards and the ability to study on-the-go, I also identified that a spelling practice feature could differentiate VocabularBee from market competitors.
User Persona
With a firm sense of my user, I could now start designing, translating needs to a tangible solution.
USER FLOWS &
TASK ANALYSES
With Sunny in mind, I mapped out key user flows and divided tasks into smaller actions to clarify how VocabularBee would support her goals. These exercises helped identify the essential features to prioritize, and shaped her path through app features by examining entry points, branching decisions, and success criteria.
User Flow Diagram
PAPER WIREFRAMES
Sketching is one of my favorite steps in the design process. For VocabularBee, I created over 75 paper wireframes illustrating onboarding flow, tutorial screens and settings, the home menu, and multiple study features. Free from digital constraints, I explored every possible user path, quickly mapping even complex architectural constructs with paper and pencil.
Paper Wireframes
PAPER PROTOTYPE
& USER TESTING
From this extensive collection of wireframes, I assembled a functional paper prototype to simulate user interactions. This low-fidelity prototype allowed for a first round of user testing, validating flows, uncovering usability issues, and gathering valuable feedback as I moved into higher fidelity iterations.
User testing produced clear, actionable feedback which I distilled into the following key insights.
KEY INSIGHTS
• Simplify! Simplify! Simplify!
• Rename “Search” to Sets on home page
• Add a Skip Tutorials option
• Create Set Name prior to flashcard creation
• Add customization of flashcard design
DESIGN SOLUTIONS
In this phase, I translated my paper work into digital form, progressing from mid-fidelity layouts to polished high-fidelity mockups and prototypes.
MID-FIDELITY
Responsive Breakpoints
HIGH-FIDELITY
Because this project served as an intensive study of UI design, I treated the high-fidelity stage as a specialization exercise. I developed a mood board to establish visual direction, then refined typography, color palette, and iconography to form a cohesive design system. With these elements in place, my polished wireframes were connected to an interactive Figma prototype to demonstrate the final product in action.
Mood Board
DESIGN RATIONALE
Typography with Purpose
Inspired by classic dictionary fonts, the type system establishes credibility while keeping readability at the forefront. This choice reinforced the educational focus of the app and tied directly to the theme of vocabulary learning.
Playful, Purposeful Palette
A bee-inspired spectrum of yellows and oranges injects energy and warmth. Balanced with black and white neutrals, the palette communicates both playfulness and purpose. Teal was introduced as an accent color for call-to-action buttons, creating contrast that guided attention while harmonizing with the overall scheme.
Iconography and Shape Language
Rounded icons and hexagonal motifs echoed the bee concept, creating a consistent visual rhythm. The soft edges convey approachability, while geometric repetition supported clarity and quick recognition across the app.
Style Guide
Through the progression of mid-to-high fidelity wireframes, VocabularBee’s visual identity was developed into a unified system. The resulting mockups and prototype showcase the app in its finalized form.
FINAL DESIGNS
& OUTCOME
The final designs reflect the original goals of VocabularBee: delivering full functionality while using playful colors and branded elements to create a delightful learning experience. High-fidelity mockups and an interactive prototype, along with a guided walkthrough of the app’s golden path, demonstrate how users progress through the app’s core features.
Splash Screen Flow
Flashcards Screens
REFLECTION
This project began with an open-ended request and evolved into a much deeper exploration of brand values, user needs, and design foundations. Even without a public launch, it demonstrates how rigorous research and early design can transform a loose idea into a clear, actionable brand direction. While the scope didn’t extend to testing and final iterations, it underscored the value of building strong foundations through user insights and structured design choices. My client described this process as “a special kind of alchemy” — a reminder that, even in its formative stages, thoughtful, research-driven design can make an impact.
NEURODIVERSITY UNIVERSITY
Responsive Wireframes: Mobile, Tablet, and Desktop Views
PROJECT OVERVIEW
VocabularBee
A gamified, colorful mobile app built to support vocabulary learning for students and professionals, anytime, anywhere.
• Role: Lead UX Researcher & Designer
• Duration: 1.5 months
• Deliverables: research artifacts, wireframes, interactive prototype, style guide
VocabularBee transforms vocabulary learning from a repetitive task into a joyful, motivating experience. The goal was to create an app that is both effective and energizing, offering brief study sessions that fit seamlessly into busy schedules. By blending familiar study practices with playful interactions, learners build confidence while having fun.
THE CHALLENGE
Create a mobile app that makes vocabulary practice engaging, efficient, and sustainable for busy learners.
PROBLEM STATEMENT
Students and professionals need a way to:
• Strengthen vocabulary through multiple modalities that echo dynamic learning styles
• Enjoy the learning process - sparking curiosity and resulting in concrete successes
• Practice flexibly with short sessions that fit into any schedule.
POTENTIAL SOLUTION
A mobile application that incorporates traditional study methods with FUN!
• Flashcards for quick recall
• Mini-games adding novelty and motivation
• Quizzes to mirror real-life progress and retention
• Mascot encouraging learners on their journey
RESEARCH
To guide design decisions, I explored the problem space from multiple angles. I examined exisiting vocabulary-learning apps to understand their strengths and shortcomings, gathered firsthand insights from potential users through interviews, and created a persona that distilled patterns into a relatable archetype. Together, these methods ensured the final result was both competitive with the existing market and authentic to learner needs.
COMPETITOR ANALYSIS
I compared and contrasted four existing apps to identify strengths, weaknesses, and gaps in the market. These insights shaped my list of must-have features while identifying opportunities for refinement. This allowed me to build VocabularBee to deliver vibrant visuals, effective learning, and engaging experiences that set it apart from competitors.
StudySmarter
BrainScape
Quizlet
My Word List
Quizlet
StudySmarter
Competitor Screenshots
Competitor Analysis Snapshot
USER INTERVIEWS
Eight interviews provided direct insight into how real users interact with existing vocabulary-learning apps. They revealed frustrations, favorite functions, and must-have features. These conversations refined my vision for an app that would balance effectiveness and delightful.
Skip Tutorials
Many participants noted they often skip tutorials, even if they feel like they shouldn’t.
Need for Context
Context helps, especially with words that can be similar to familiar words (moral vs morale).
In-the-Moment Feedback
Users said that immediate feedback during study was motivating.
Short Sessions
Short, focused study sessions worked best for all participants.
Interactive Play
Games and interactive learning increased participation and learning success.
Smart Card Management
Users wanted the choice to repeat harder words while setting aside known terms.
USER PERSONA
I created a “proto-persona” Sunny, to represent the needs and challenges of both a working professional and a full-time student. I mapped her needs into user stories that highlighted exactly what she required from a vocabulary-learning app, which led to a working hypothesis for the project.
Using her voice, I pinpointed where the app must provide specific functionality. Beyond flashcards and the ability to study on-the-go, I also identified that a spelling practice feature could differentiate VocabularBee from market competitors.
User Persona
With a firm sense of my user, I could now start designing, translating needs to a tangible solution.
USER FLOWS & TASK ANALYSES
With Sunny in mind, I mapped out key user flows and divided tasks into smaller actions to clarify how VocabularBee would support Sunny’s goals. These exercises helped identify the essential features to prioritize, and shaped her path through app features by examining entry points, branching decisions, and success criteria.
User Flow Diagram
PAPER WIREFRAMES
Sketching is one of my favorite steps in the design process. For VocabularBee, I created over 75 paper wireframes illustrating onboarding flow, tutorial screens and settings, the home menu, and multiple study features. Free from digital constraints, I explored every possible user path, quickly mapping even complex architectural constructs with paper and pencil.
Paper Wireframes
PAPER PROTOTYPE & USER TESTING
From this extensive collection of wireframes, I assembled a functional paper prototype to simulate user interactions. This low-fidelity prototype allowed for a first round of user testing, validating flows, uncovering usability issues, and gathering valuable feedback as I moved into higher fidelity iterations.
User testing produced clear, actionable feedback which I distilled into the following key insights.
KEY INSIGHTS
• Simplify! Simplify! Simplify!
• Rename “Search” to Sets on home page
• Add a Skip Tutorials option
• Create Set Name prior to flashcard creation
• Add customization of flashcard design
DESIGN SOLUTIONS
In this phase, I translated my paper work into digital form, progressing from mid-fidelity layouts to polished high-fidelity mockups and prototypes.
MID-FIDELITY
After incorporating user feedback into my paper wireframes, I moved into mid-fidelity design in Figma. Using a mobile-first approach, I began with a four-column grid for mobile, then defined responsive breakpoints for tablet and desktop to ensure consistent spacing across screen sizes.
Responsive Breakpoints
HIGH-FIDELITY
Because this project served as an intensive study of UI design, I treated the high-fidelity stage as a specialization exercise. I developed a mood board to establish visual direction, then refined typography, color palette, and iconography to form a cohesive design system. With these elements in place, my polished wireframes were connected to an interactive Figma prototype to demonstrate the final product in action.
Mood Board
DESIGN RATIONALE
Typography with Purpose
Inspired by classic dictionary fonts, the type system establishes credibility while keeping readability at the forefront. This choice reinforced the educational focus of the app and tied directly to the theme of vocabulary learning.
Playful, Purposeful Palette
A bee-inspired spectrum of yellows and oranges injects energy and warmth. Balanced with black and white neutrals, the palette communicates both playfulness and purpose. Teal was introduced as an accent color for call-to-action buttons, creating contrast that guided attention while harmonizing with the overall scheme.
Iconography and Shape Language
Rounded icons and hexagonal motifs echoed the bee concept, creating a consistent visual rhythm. The soft edges convey approachability, while geometric repetition supported clarity and quick recognition across the app.
Style Guide
Through the progression of mid-to-high fidelity wireframes, VocabularBee’s visual identity was developed into a unified system. The resulting mockups and prototype showcase the app in its finalized form.
FINAL DESIGNS & OUTCOME
The final designs reflect the original goals of VocabularBee: delivering full functionality while using playful colors and branded elements to create a delightful learning experience. High-fidelity mockups and an interactive prototype, along with a guided walkthrough of the app’s golden path, demonstrate how users progress through the app’s core features.
Splash Screen Flow
Flashcards Screens
Click the thumbnail to watch a brief walkthrough
REFLECTION
As my first UX project, VocabularBee was a true immersion into the design process. From user research and flows through paper wireframing and prototypes, to usability testing and polishing iterations, I experienced the full cycle of design-thinking. This project represents a foundational moment in my UX journey and a milestone in the development of a UI skillset that continues to inform how I approach design challenges today.
VOCABULARBEE
Responsive Wireframes: Mobile, Tablet, and Desktop Views
PROJECT OVERVIEW
VocabularBee
A gamified, colorful mobile app built to support vocabulary learning for students and professionals, anytime, anywhere.
• Role: Lead UX Researcher & Designer
• Duration: 1.5 months
• Deliverables: research artifacts, wireframes, interactive prototype, style guide
VocabularBee transforms vocabulary learning from a repetitive task into a joyful, motivating experience. The goal was to create an app that is both effective and energizing, offering brief study sessions that fit seamlessly into busy schedules. By blending familiar study practices with playful interactions, learners build confidence while having fun.
THE CHALLENGE
Create a mobile app that makes vocabulary practice engaging, efficient, and sustainable for busy learners.
PROBLEM STATEMENT
Students and professionals need a way to:
• Strengthen vocabulary through multiple modalities that echo dynamic learning styles
• Enjoy the learning process - sparking curiosity and resulting in concrete successes
• Practice flexibly with short sessions that fit into any schedule.
POTENTIAL SOLUTION
A mobile application that incorporates traditional study methods with FUN!
• Flashcards for quick recall
• Mini-games adding novelty and motivation
• Quizzes to mirror real-life progress and retention
• Mascot encouraging learners on their journey
RESEARCH
To guide design decisions, I explored the problem space from multiple angles. I examined exisiting vocabulary-learning apps to understand their strengths and shortcomings, gathered firsthand insights from potential users through interviews, and created a persona that distilled patterns into a relatable archetype. Together, these methods ensured the final result was both competitive with the existing market and authentic to learner needs.
COMPETITOR ANALYSIS
I compared and contrasted four existing apps to identify strengths, weaknesses, and gaps in the market. These insights shaped my list of must-have features while identifying opportunities for refinement. This allowed me to build VocabularBee to deliver vibrant visuals, effective learning, and engaging experiences that set it apart from competitors.
StudySmarter
BrainScape
Quizlet
My Word List
Quizlet
StudySmarter
Competitor Scree nshots
Competitor Analysis Snapshot
USER INTERVIEWS
Eight interviews provided direct insight into how real users interact with existing vocabulary-learning apps. They revealed frustrations, favorite functions, and must-have features. These conversations refined my vision for an app that would balance effectiveness and delightful.
Skip Tutorials
Many participants noted they often skip tutorials, even if they feel like they shouldn’t.
Need for Context
Context helps, especially with words that can be similar to familiar words (moral vs morale).
In-the-Moment Feedback
Users said that immediate feedback during study was motivating.
Short Sessions
Short, focused study sessions worked best for all participants.
Interactive Play
Games and interactive learning increased participation and learning success.
Smart Card Management
Users wanted the choice to repeat harder words while setting aside known terms.
USER PERSONA
I created a “proto-persona” Sunny, to represent the needs and challenges of both a working professional and a full-time student. I mapped her needs into user stories that highlighted exactly what she required from a vocabulary-learning app, which led to a working hypothesis for the project.
Using her voice, I pinpointed where the app must provide specific functionality. Beyond flashcards and the ability to study on-the-go, I also identified that a spelling practice feature could differentiate VocabularBee from market competitors.
User Persona
With a firm sense of my user, I could now start designing, translating needs to a tangible solution.
USER FLOWS & TASK ANALYSES
With Sunny in mind, I mapped out key user flows and divided tasks into smaller actions to clarify how VocabularBee would support her goals. These exercises helped identify the essential features to prioritize, and shaped her path through app features by examining entry points, branching decisions, and success criteria.
User Flow Diagram
PAPER WIREFRAMES
Sketching is one of my favorite steps in the design process. For VocabularBee, I created over 75 paper wireframes illustrating onboarding flow, tutorial screens and settings, the home menu, and multiple study features. Free from digital constraints, I explored every possible user path, quickly mapping even complex architectural constructs with paper and pencil.
Paper Wireframes
PAPER PROTOTYPE & USER TESTING
From this extensive collection of wireframes, I assembled a functional paper prototype to simulate user interactions. This low-fidelity prototype allowed for a first round of user testing, validating flows, uncovering usability issues, and gathering valuable feedback as I moved into higher fidelity iterations.
User testing produced clear, actionable feedback which I distilled into the following key insights.
KEY INSIGHTS
• Simplify! Simplify! Simplify!
• Rename “Search” to Sets on home page
• Add a Skip Tutorials option
• Create Set Name prior to flashcard creation
• Add customization of flashcard design
DESIGN SOLUTIONS
In this phase, I translated my paper work into digital form, progressing from mid-fidelity layouts to polished high-fidelity mockups and prototypes.
MID-FIDELITY
After incorporating user feedback into my paper wireframes, I moved into mid-fidelity design in Figma. Using a mobile-first approach, I began with a four-column grid for mobile, then defined responsive breakpoints for tablet and desktop to ensure consistent spacing across screen sizes.
Responsive Breakpoints
HIGH-FIDELITY
Because this project served as an intensive study of UI design, I treated the high-fidelity stage as a specialization exercise. I developed a mood board to establish visual direction, then refined typography, color palette, and iconography to form a cohesive design system. With these elements in place, my polished wireframes were connected to an interactive Figma prototype to demonstrate the final product in action.
Mood Board
DESIGN RATIONALE
Typography with Purpose
Inspired by classic dictionary fonts, the type system establishes credibility while keeping readability at the forefront. This choice reinforced the educational focus of the app and tied directly to the theme of vocabulary learning.
Playful, Purposeful Palette
A bee-inspired spectrum of yellows and oranges injects energy and warmth. Balanced with black and white neutrals, the palette communicates both playfulness and purpose. Teal was introduced as an accent color for call-to-action buttons, creating contrast that guided attention while harmonizing with the overall scheme.
Iconography and Shape Language
Rounded icons and hexagonal motifs echoed the bee concept, creating a consistent visual rhythm. The soft edges convey approachability, while geometric repetition supported clarity and quick recognition across the app.
Style Guide
Through the progression of mid-to-high fidelity wireframes, VocabularBee’s visual identity was developed into a unified system. The resulting mockups and prototype showcase the app in its finalized form.
FINAL DESIGNS & OUTCOME
The final designs reflect the original goals of VocabularBee: delivering full functionality while using playful colors and branded elements to create a delightful learning experience. High-fidelity mockups and an interactive prototype, along with a guided walkthrough of the app’s golden path, demonstrate how users progress through the app’s core features.
Splash Screen Flow
Flashcards Screens
REFLECTION
As my first UX project, VocabularBee was a true immersion into the design process. From user research and flows through paper wireframing and prototypes, to usability testing and polishing iterations, I experienced the full cycle of design-thinking. This project represents a foundational moment in my UX journey and a milestone in the development of a UI skillset that continues to inform how I approach design challenges today.