Verilang

Verilang - Language learning platform with real-world content

Role UX/Visual Designer
Timeline Sep – Dec 2021
UX DesignVisual DesignEdTech

Verilang is a language learning platform that teaches vocabulary through verified, real-world content like news articles and social media posts. I led the UX and visual design, creating an engaging learning experience that contextualizes new words within authentic content rather than isolated flashcards.

Goal

Modernize a decade-old English learning system built around movie content, redesigning it for independent learners in the Japanese market.

Deliverables

  • User survey & research synthesis
  • Redesigned user flow
  • Mid-fidelity prototype
  • Component & asset library
  • Logo design
  • Presentation deck

Team

  • Developer (original creator)
  • UX Designer (me)
  • Product Manager

Project Details

Company
Kai Analytics / Verilang
Duration
4 months
Focus
UX Design, Visual Design, User Research

The Challenge

Verilang originated as a system enabling educators to develop English instruction materials from DVD movies. When I joined as the sole designer, the project had unclear directional scope - the original product served educational institutions with Moodle integration, but stakeholders envisioned serving independent learners instead.

Through stakeholder conversations and analysis of the existing system, I identified the most viable path forward: retain core functionalities while expanding touchpoints for a consumer audience, initially targeting the Japanese market based on team geography and market research.

Research and planning board for the Verilang redesign
Planning and research synthesis mapping the existing system and new opportunities

Research & Discovery

I conducted user surveys to understand language learners' habits, pain points, and motivations. The research revealed key insights about how working adults approach language learning - particularly around time constraints, retention challenges, and the gap between entertainment and education.

User survey results showing learner pain points
Survey results highlighting key patterns in how learners engage with movie-based content

Redesigned User Flow

I mapped and restructured the existing functionality with improved information architecture, working on two parallel tracks: modernizing the visual presentation while addressing the core user pain points uncovered in research.

Redesigned user flow diagram
The restructured user flow balancing learning features with content discovery

Watch & Learn: Side-by-Side Vocabulary

The core learning experience provides timely vocabulary assistance while watching movie clips. A sidebar dictionary enables immediate word lookup, with color-coded indicators reflecting the learner's proficiency level for each word. Rather than requiring full-length viewing, the system recommends the most educationally relevant segments adjusted to the learner's level.

Watch and Learn interface with side-by-side vocabulary panel
The core learning interface - movie playback with contextual vocabulary support

Working adults don't have enough time to complete a movie on a daily basis - recommending the most educationally relevant segments lets learners focus without feeling overwhelmed.

Challenge Mode: Staying Engaged

To prevent learners from becoming absorbed in entertainment and overlooking learning opportunities, I designed an optional challenge system. Pop-up challenges test vocabulary, speaking, or contextual knowledge during viewing, with incentive structures that encourage participation without mandating it.

Challenge mode interface with interactive vocabulary quiz
Challenge mode - optional pop-up quizzes that test comprehension without disrupting the viewing flow

Vocabulary Practice: Flashcards from Film

Survey participants reported minimal recall after watching movies. To address this, I designed a flashcard system that auto-generates cards from each learner's vocabulary list, organized by course unit. Learners can jump directly to the source film segment from any flashcard for contextual reinforcement.

Vocabulary flashcard interface with film clip reference
Flashcard practice with direct links to source movie clips for contextual review

Speaking Practice: Karaoke Mode

Recognizing karaoke's cultural significance in Japan, I adapted the familiar sing-along experience into a voiceover practice feature. Learners perform oral exercises using educationally prioritized sentences aligned with their proficiency level - making speaking practice feel natural rather than clinical.

Voiceover practice interface in karaoke mode
Karaoke-style voiceover practice - leveraging cultural familiarity to lower the barrier to speaking exercises

Component Library & Handoff

I delivered a comprehensive component library and visual design system alongside the interactive prototype, ensuring consistency across all learning features and providing clear documentation for the development team.

Component and asset library for the Verilang design system
Component library with reusable UI elements, icons, and visual design tokens

The most valuable lesson was recognizing that while optimizing user experience remained primary, product feasibility and market appropriateness required equal consideration - balancing user-centered design with stakeholder objectives and geographic context.

- Key takeaway