LingoRead

A web app enabling language learners to read with ease in their target language
ROLES
  • UX Design: User Interviews, Competitive Analysis, Persona, User Flows, Wireframing, Usability Testing
  • UI Design: Lo-fi & hi-fi prototyping
project context
  • Sring 2022 (7 weeks)
  • Conceptual Individual Project
Tools
  • Whimsical
  • Figma
ProblemSolutionUser ResearchUser FlowFeaturesWireframingTestingReflection
THE PROBLEM
Language learners struggle to read in their target language
For most language learners, it’s desirable to be able to read natively in their target language. That being said, the hassle of opening various apps to look up phrases and manually taking notes of new vocabulary can make reading seem like hard work and steer learners away from making future attempts. There lacks a streamlined tool for them to read extensively and comprehensively.
DESIGN CHALLENGE
How might we help language learners read in their target language with ease and learn along the way?
THE SOLUTION
LingoRead helps language learners better understand reading materials through smart and comprehensive translations.

Quick translate

When stuck on an unfamiliar word or phrase, learners can quickly select or drag to select and translate. In the translation sidebar, they can also save the selected vocabulary to review later.

Comprehensive translation

Unlike other ebook platforms, learners can translate not only words but long phrases and view their closest translation in context, as well as their grammar tense. To better understand how the word is used in other contexts, there are examples provided which are extracted from other books in the platform. By suggesting recommendations in the form of examples, learners can save these materials to read later and reinforce their vocabulary through repeated exposure.

Bilingual mode

In Bilingual mode, learners can hover and see the corresponding translated sentence on the right side of the screen. Translation is still available as a popup modal when clicking on a word or dragging over a phrase.

Flashcard revision

Learners can easily review words and phrases they have saved through interactive flashcards with example sentences from the original book.

USER RESEARCH
Primary

In-depth interviews (7)

Secondary

Competitive Analysis

Language blogs & vlogs

Synthesis

Affinity Mapping

Persona

‍

A week of user interviews
To uncover unmet needs, desires, and frustrations regarding the problem space, I conducted in-depth interviews with 7 language learners from beginners to intermediate levels. From the start, I was interested in how people read and the tools they use to translate and interpret foreign text.
RESEARCH GOALS
  • What motivates learners to improve their skills
  • Language learning methods and platforms
  • Experience and goals for reading in target language
  • Preferred reading medium
  • Tools used to read and translate foreign books
MAJOR THEMES
I grouped the insights into 3 key themes that would inform my design going forward:

1. Translation

Dictionary translation displays several meanings they have to decide which meaning fits.

‍

Many struggle with the grammar structure, although they already know what the vocabulary means

‍

2. Reading experience

If the material is beyond their level, they get discouraged having to look everything up and tend to give up.
‍

The majority try to read by themselves first then look up words they don’t know later.

3. Learn from reading

5/7 don’t revisit vocab they’ve highlighted. A way they use to build vocabulary is to get more exposure.

‍
2/7 review phrases encountered using flashcards and spaced repetition.

As all 7 participants usually use a computer to access learning materials and are unable to read for too long on a small phone screen, I decided that a web application would be the most suitable digital platform for the final product.
From the research learnings, I created two personas
USER FLOWS
Identifying gaps with user flows
From the recurring themes identified in the research stage, I created 3 user scenarios to further define gaps and opportunities. These scenarios are later used to conceptualize possible solutions with user app flows.
Flow 1 focuses on translation. During the user interviews, many users voiced how it was burdensome to open several external apps for translations, along with the decision paralysis that comes with trying to figure out which meaning in the dictionary would fit into the context they were reading in. The app flow then seeks to solve this pain point by providing a comprehensive translation tool with meanings in context so they can quickly look up and understand the text better.
In flow 2, I wanted to address how learners can save and learn the vocabulary and grammar tense they’ve encountered while reading. The interviews revealed that learners oftentimes couldn’t figure out what the reading meant due to its sentence structure or that they’d learned but forgotten the grammar tense being used in context. Now, instead of looking that up separately, they can view the grammar tense and conjugations in the app and save that to review later.
Flow 3 explores how learners can review content from the readings. The initial insights were split between learners who actively use flashcards for revision and those who subconsciously “review” by being exposed to related content. As the latter took up the majority of the user group, I tried to implement it by suggesting other reading materials on the platform that include the word they’ve looked up. The final concept basically had the system source other books/short stories for the same word and use that as example sentences in the translation bar.
FEATURE PRIORTIZATION
I then decided on the essential features to include in this iteration
MVP
01

Translation & grammar

02

Example sentences

03

Notes

04

Save vocab

05

Bilingual mode

06

Flashcards

FUTURE ITERATIONS
01

Quizzes

02

Share quotes

03

Reading challenges

WIREFRAMING
Mapping out wireframes and app flows
Although LingoRead plans to offer content in several languages, I designed the wireframes in French due to my personal familiarity with the language.
TESTING
Usability testing with the lo-fi prototype
To evaluate the prototype, I conducted a moderated remote usability study with 5 French learners. The participants were asked to share their screen and think aloud as they go through the tasks. After each task or if they get stuck during a task, the session would pause and I would ask them follow-up questions on their experience navigating the prototype.

My main goal for the initial testing was to evaluate the translation sidebar as well as bilingual mode and secondary features such as quotes and saving book recommendations.
User tasks
  • Browse books & choose one to read
  • Look up word & phrase
  • Save word
  • Save book from example sentence
  • Read in Bilingual mode
  • View & translate quote highlights
Results
  • 4 out of 5 participants found the app relatively easy to navigate with clear hierarchy and labels.
  • Users believed that this app would be very helpful for language learners and highlighted the bilingual mode as their favorite feature.
  • Some raised that they would prefer to see all of the meanings when looking up single words instead of just the closest meaning in context (this was later revised in the final design).
  • The list of saved words and quizzes, or Quizlet import were some anticipated features for future iterations.
REFLECTION
What I’ve learned & next steps
This was the first ever UX project where I got to recruit and conduct in-depth user interviews and it was fascinating to hear how others approach learning and absorbing foreign content as a language enthusiast myself.

During the usability tests, some raised the opportunity of reviewing the vocab they’ve saved while reading. This feature was not considered in the early stages as the discovery interviews revealed that the majority did not review the notes they took while reading (the user group from the initial interviews was different from the user testing group due to scheduling conflicts). To address this, I later included a flashcard feature in the final design but the exploration of other types of quizzes would surely benefit and further refine this product.
Next project
Jores