VORDS

VORDS is an English-learning platform providing customized English video content catering to users’ English level and interest.

It immerses users in a vivid conversational context with its interactive caption function, real-time review feature and proficiency tracking system.

MY ROLE

Product Designer

Contract work with Xiaoyou Tech in Shanghai, leading a team of three designers

SCOPE

User Research
Interaction Design
Hi-Fidelity Mockups
User testing

Team: Hao Jiang, Andrew Zhuo, and June Chang

Tool: Sketch / Invision / Adobe Suites

Time: 4 months

OUTCOME

3-step onboarding

This app keeps users informed throughout the on-boarding experience to ensure users can smoothly complete the registration process. With the information collected, the system will quickly tailor learning content based on users’ English level and topics of interest.

Relevant learning content

Millions of popular video contents are provided and tagged with difficulty level, accent, social proof. Icons and tags make video attributes more scannable and readable for quick selection.

Interactive Caption

Users could apply a variety of finger gestures to easily navigate within the captions and vocabularies. I designed both vertical and full-screen learning modes, tailoring to users’ viewing preference and habits.

Powerful vocabulary Card

The Vocabulary Card function provides definitions on click and allows learners to review the words at any time. The number bubble also tracts users’ progress in real-time, which gives a sense of accomplishment as the word count accumulates.

Empathize

Millennials enjoy learning authentic expression from TV shows, but feeling stifled because of constantly pausing, rewinding and taking notes.

INTERVIEW

We interviewed 8 participants between 18-28 who have the experience of learning English via watching videos. We proposed scenarios to think about her motivation, goals, frustrations in English learning through watching videos.

Motivation:

  • Users are self-motivated to learn English when enjoying their favorite TV shows.
  • Users could learn authentic common expression and vocabularies from real conversational setting.
  • Video images provide visual connections to reinforce memory process.

Frustration:

  • Users had a hard time finding suitable videos matching their English level.
  • Finding the definition of new wards when watching videos is inefficient.
  • Vocabularies are forgettable without a systematic review process.

PERSONA

Based on our 8 in-depth interviews, we identified several key findings and translated them into the following persona. We proposed scenarios to think about her motivation, goals, frustrations in English learning through watching videos. This persona provides empathy and guidance for us to focus on user needs during the design process.

COMPETITOR ANALYSIS

We performed competitor analysis of different English Learning apps existing today to identify gaps and must-have features. In addition, we collected some reviews from users to identify reasons why people like or dislike an app as well as features they wish to have.

Key learning:

  • User-friendly UI for language learners with more icons/illustrations and less words.
  • Utilize level, tasks and awards for motivation system.
  • Providing customized and resourceful learning materials.

Define

Designing an app with adaptive learning content, efficient interaction design, and incentive motivation system

DESIGN PRINCIPLE

Based on our research, we concluded guiding principles to inform our design.

Ideate

Brainstorm user flows and features based on design principles

STORY BOARD

I like watching English videos to learn English. But the process could be inefficient.

Now I have VORDS on my phone. I can choose the videos by my English level and my interest.

I could directly click on the words and phrases in the subtitle to look up the translation.

I can easily save the words to my word list for better review.

There is also pronunciation practice after the videos.

When reviewing the words I saved before, I can simply click on them and go back to the original videos.

Now I unlocked several levels in the app and my English is getting better.

PROTOTYPE

Focusing and improving the learning/viewing experience besides the whole app

UI AND TASK FLOW

USABILITY TEST

We recruited 5 interviewees to test our major assumptions using paper prototype and to gather feedbacks from users’ perspective.
Our key findings include:

  • Highlight current subtitle and optimize distance between it and the video.
  • Provide a feedback to assure words have been added after swiping up.
  • Enable users to review the new words learned in the current session.
  • Enhance caption function in the full-screen viewing mode.

IMPROVED FLOW

FINAL DESIGN

A fun and efficient way of learning authentic common expression and vocabularies from your favorite English videos

INTERACTION DESIGN

3-step onboarding

This app keeps users informed throughout the on-boarding experience to ensure users can smoothly complete the registration process,. With the information collected, the system will quickly tailor learning content based on users’ English level and topics of interest.

Relevant learning content

Millions of popular video contents are provided and tagged with difficulty level, accent, social proof. Icons and tags make video attributes more scannable and readable for quick selection.

Interactive Caption

Users could apply a variety of finger gestures to easily navigate within the captions and vocabularies. I designed both vertical and full-screen learning modes, tailoring to users’ viewing preference and habits.

Powerful vocabulary Card

The Vocabulary Card function provides definitions on click and allows learners to review the words at any time. The number bubble also tracts users’ progress in real-time, which gives a sense of accomplishment as the word count accumulates.

DEMONSTRATION VIDEO