Multi-language web app for active vocabulary acquisition
Role: Product Design / UX Architecture / Branding / AI Prototyping
Role: Product Design / UX Architecture / Branding / AI Prototyping
Problem
Standard apps like Quizlet↗︎ or Duolingo↗︎︎ rely on passive card-flipping or simple multiple-choice tasks. Users easily recognize words visually, but fail when they need to spell them or construct sentences in real conversations. Most tools also lack instant sentence context and break down without internet.
Standard apps like Quizlet↗︎ or Duolingo↗︎︎ rely on passive card-flipping or simple multiple-choice tasks. Users easily recognize words visually, but fail when they need to spell them or construct sentences in real conversations. Most tools also lack instant sentence context and break down without internet.
SOLUTION & UX LOGIC
To bridge the gap between passive recognition and active production, I built a progressive 3-stage learning loop:
To bridge the gap between passive recognition and active production, I built a progressive 3-stage learning loop:
Stage 1 (Word → Translation)
Initial recognition matching the target word to its translation
Initial recognition matching the target word to its translation
Stage 2 (Translation → Word) Reverse association featuring an immediate In-Context prompt (example sentence and translation)
upon response.
upon response.
Stage 3 (Write the Word) Active recall requiring users to manually type the exact target word to build spelling memory.
ADVANCED RETENTION & AI MODES
Beyond basic flashcards, a Context Gap-Fill mode tests comprehension within full sentences. An integrated AI Sentence Builder prompts users to compose original sentences, providing real-time grammar checks and providing with a feedback.
Beyond basic flashcards, a Context Gap-Fill mode tests comprehension within full sentences. An integrated AI Sentence Builder prompts users to compose original sentences, providing real-time grammar checks and providing with a feedback.
REAL-WORLD ITERATIONS & TECHNICAL UX
While prototyping, testing on mobile revealed key edge cases that reshaped the design:
- Smart Error Detection:
If a user confuses the target word with another similar term during Stage 3 typing, the system detects the overlap, explains the mix-up, and routes the word back into the learning loop.
While prototyping, testing on mobile revealed key edge cases that reshaped the design:
- Smart Error Detection:
If a user confuses the target word with another similar term during Stage 3 typing, the system detects the overlap, explains the mix-up, and routes the word back into the learning loop.
- Zero-Friction Keyboard:
Screen jumping on mobile browsers during typing forced locking the virtual keyboard state to maintain layout stability.
Screen jumping on mobile browsers during typing forced locking the virtual keyboard state to maintain layout stability.
- Offline-First PWA:
Added Service Worker integration so the app runs smoothly in low-connectivity areas like the subway, syncing progress locally.
Added Service Worker integration so the app runs smoothly in low-connectivity areas like the subway, syncing progress locally.
- Smart Ingestion:
Created a parser that cleans raw text pastes, auto-deduplicates words, and generates study sets without manual form filling.
Created a parser that cleans raw text pastes, auto-deduplicates words, and generates study sets without manual form filling.
CORE VALUE
Prototyped and deployed as a working PWA using Lovable.dev↗︎. Proves the ability to rapidly test, iterate, and solve complex UX and error-handling problems directly on real devices.
Prototyped and deployed as a working PWA using Lovable.dev↗︎. Proves the ability to rapidly test, iterate, and solve complex UX and error-handling problems directly on real devices.
