Speak a language freely and confidently.
A language learning app focusing on low-anxiety practices with immediate feedback.
Role
Duration
Tools
Target Audience
UX Designer & Front-End Developer
Jul 2026 — Sep 2026
Figma, JavaScript, HTML, CSS, R
Beginner to Intermediate L2 French Learners
User Research
​User Interviews
We interviewed 16 mobile language learners. Through analyzing the data collected from user interviews, we found that 87.5% of them felt anxious about real-time errors and disappointed at receiving robotic, unhelpful feedback.
Visualizing Data
Through interview data synthesis, 7 recurring pain points were identified (mentioned by users 15+ times). I visualized the frequency and thematic trends using R to communicate these findings clearly to stakeholders.
​Learner Personas
Based on the findings from user interviews, I synthesized 3 core learner personas. Each captures distinct learning objectives, proficiency levels, and emotional hurdles.
​User Journey Maps
I mapped end-to-end user journeys for each persona, traced their sequential tasks and peak moments of speaking anxiety, and pinpointed critical design opportunities—transforming moments of anxiety into supportive, low-pressure conversations.
Information Architecture
System Architecture
I mapped the overall structure to minimize navigation friction, and organizing content into distinct functional pillars to ensures learners can effortlessly transition from onboarding directly into daily oral practice and asynchronous review.
Core Task Flows
I diagrammed the step-by-step user flow to eliminate decision fatigue during speaking sessions, ensuring learners encounter continuous scaffolding with clear exit and retry avenues at every turn.
Wireframing
Rapid Wireframing
Using the Crazy Eights framework, I rapidly prototyped multiple layout variations to solve the challenge of real-time audio interactions.
Layout Exploration
By exploring different placements for recording triggers, lesson progression indicators, and contextual prompts, we iterated quickly and isolate the cleanest, least distracting interface.
Prototyping
Low-fidelity Wireflows
Based on the layout options from early sketching, I established the end-to-end wireflows, ensuring users move seamlessly through conversational exercises without getting lost or overwhelmed.
Early Usability Testing
I conducted 5 sessions of usability tests with active users, highlighted friction around feedback pacing and interactive affordances, directly shaping design iterations toward a more intuitive, low-anxiety speaking experience.
High-fidelity Mockups
Translating validated wireframes and the design system into high-fidelity Figma mockups, I tested the visual identity and consistency of Langogo.
Interactive Prototype
I established the interactive prototype accurately simulating speaking turns, animations, and error recovery, providing a useful tool for learners to improve their confidence and engagement.
Usability Testing
I moderated 6 usability testing sessions with active learners to evaluate core task flows and conversational interactions, leading to critical refinements to the speaking interface, task pacing, and feedback clarity.
​Unhelpful Cues
All users from usability testing sessions expressed their negative reviews on the French banners and pronunciation cues (they thought these were just unhelpful distractions), and more than half of them suggested that real person profile photos bring them greater joy.
Usability Feedback
Participants in these usability testing sessions complained about the background color of the chat bubbles, the dull profile icons, and 5 out 6 mentioned the lack of scaffolding on the content.
Clean and Clear UI
To help our beginner French learners better understand the pronunciation cues, I changed them into English. Also, I updated the sharing button and upgraded the dull profile icons to real person photos, making the daily Leaderboard activity and the learning process more engaging.
More Intuitive UI
To resolve participants' confusion between the recorded bubble and the currently active bubble, I eliminated the background color of the former and applied a 2px orange border to the latter, making the UI look more clean and intuitive. Besides, I added a few on-demand toggles of key words definitions to help users better understand the content of the scenario.
Iterating
The Lack of Aids
By synthesizing participant feedback through affinity mapping, I identified critical usability hurdles around recording affordances, audio playback cues, and comprehension aids.
Comprehension Aids
To address learners' need for quick validation without disrupting the cognitive flow, I integrated on-demand translation toggles into flashcards.
UI Design Guideline
To establish visual consistency and intuitive navigation across the interface, I created a cohesive design system featuring structured typographic hierarchies, versatile button component variants, and an inviting orange and green palette designed to foster an engaging, low-stress language learning experience.
