Verilang: A Language Learning System

Learn English from movies with intelligence-backed lessons
Timeline
Sep-Dec 2021
My role
UX Design
‍Visual Design
User Research

Project Brief

Verilang was a language learning system created a decade ago to help teachers to make English lessons for their students from movies on DVDs.
I joined the team as the only designer to modernize its features.

Team

  • Developer (Original creator)
  • UX Designer (myself)
  • Product manager

Deliverables:

  • user survey

    user flow

  • mid-fi prototype

  • component library

    presentation deck

  • logo

✏️

DESIGN OUTCOMES

Core feature showcase

Watch and learn, side by side

Get timely tips from dictionary and example sentences while watching a movie

Having fun memorizing

The flashcards are automatically created from user's vocabulary list.
Users can watch the source clips from flashcard directly.

Practice speaking

Voiceover original movie clips for speaking practice using "Karaoke mode"

Original version
Project brief image
Read about design process below↴

✏️

DESIGN & RESEARCH PROCESS

Research & design timeline from Sep - Dec 2021

When the project initiated, there was uncertainty about the direction to go after. While theoriginal Verilang was exclusively made for language schools with Moodle integration, this new version was thought to serve individual learner's needs. However, the scope for this project was not defined. To find the most approchable scope for this project, I took effort to understand the goal of stakeholders, and looked through the documentations of past work.

Through discussions, many features from the original product will be kept as core functions, while the new product will add systems and touchpoints that could reach to a broader audience. Based on team members' location (Japan), as well as their market research results, the chosen starting point was Japanese market.

User research & Market research

Reimagine the user flow

The design process was splited into two parallel processes: Modernize the UI, while making improvements based on the user painpoints.

I sorted out the previous core functions in a user flow map, and the team discussed ways to bring new class structure

Pivot the course structure and learning interface

CHALLENGE

01

Working adults don't have enough time to complete a movie on a daily basis

Features to help

  • Easy-to-access dictionary on the side for timely search
  • Color labeled words to help user assess their vocabulary level
  • Recommend most educational clips instead of forcing user complete the entire movie

The design assumption was:
Recommend the most educational clips of a movie (varied by users' English level) to users. A user can choose to only watch these sections instead of the full length. This way users can learn the content with postive encouragement and enjoy the feeling of completion. Kai Analytics' textual recognition algorithms can be used to achieve this feature.

CHALLENGE

02

Users can get carried away by the movie and miss the learning opportunities

How might we guide users' attention to the learning opportunities instead of getting distracted?

Feature details

vocabulary & Speaking practices

CHALLENGE

03

Users feels that they barely remember what they learnt from a movie

To reinforce learning from a movie, some students choose to rewatch the movie and practice speaking with it for many times. However, the majority from the user survey thinks this model of practice is boring. Ironically, repitition is often the key to memorizing, so the task became:

Making post-watching practices light and fun.

There are a few established methods to strengthen a user's memory on newly learned content, so Verilang didn't have to re-invent the wheel. Flashcards for vocabulary building, and voiceover practices for speaking became the two primary after-class exercises.

Vocabulary practices

Vocabulary is organized by course units

Vocabulary can also be viewed in a list for efficient review and managing

Flashcard exercise enables fast and fun memorization

User can directly watch the source clip where the word appears to strengthen their memory and understanding

Speaking practices via Karaoke mode

Karaoke is a popular entertainment in Japan. The design was focused on bringing the familiar experience of singing-over into the voiceover exercise.

Karaoke mode is also structured by class units

User will voiceover sentences that have the most educational value to their language level

✏️

TAKEAWAY

The major takeaway from project was the importance of appraoching the product from multiple perspectives.

It is important to recognize and fully understand the reasons behind the requests from the stakeholders. Although designing for optimized user experience is a UX designer's main focus, the product has to be feasible and suitable for its particular market.

✏️

DOCUMENTATION

Component library + prototype

Logo & Visual design

Thank you for your time.
Feel free to contact me or view more projects below.