Being Korean American, I wanted an easy way to practice Korean while multitasking. I sought out a solution that would keep me practicing my Korean reading and fluency skills without needing to direct all of my focus on a single app or website. So in July 2020, for my final project for Google CSSI, I ideated and developed Context (formerly Lost in Translation). Now, in 2022, I am switching roles from developer to designer, and have decided to revisit this 2-year-old idea and try designing a new, more user-friendly interface for it.
WHAT DO WE NEED TO FIX?
For language learners, one of the hardest aspects is mastering vocabulary. More than just memorizing or recognizing words, learning a language requires knowing the right way to put words together. Many popular language learning applications focus on utilizing spaced repetition to memorize vocabulary and practice grammar. However, often these lessons focus on formal grammar practices, basic vocabulary, or hearing robotic voices recite basic sentences.
WHAT DO WE PROPOSE?
Context is a Chrome extension that displays your current website in a native and new language to increase familiarity with recognition and usage for words in the other language. This way, users are able to utilize context clues to learn vocabulary, build grammar skills by translating phrases, and ultimately lead to being able to display websites fully in a new language.
Plan of Action
To learn more about existing platforms for language learners, I decided to perform a competitive analysis to better understand how other digital platforms were helping people learn new languages. From the competitive analysis, I hoped to gain more insight into how products and design could encourage people to continue learning a language and how these platforms approach teaching a user a new language, whether it be through starting with vocabulary or translating or something completely different. After exploring existing solutions, with user interviews, I aimed to gain insight into how users prefer to learn a new language and what type of learning style is best.
I identified 5 popular online education and language learning platforms to explore their features and what they were doing right, focusing on how these platforms were motivating users to continue learning, organizing their curriculum, and how the platform was tailored to the learning styles of their target audience.
Khan Academy is an online learning platform tailored to students (primarily K-12) that offers free video tutorials and interactive exercises to learn a variety of subjects. Because it’s tailored primarily to kids, the platform utilizes a point and badge system to gamify learning and encourage students to actively watch tutorials and pay attention.
Duolingo is a mobile language learning application that provides interactive listening, reading, and writing exercises to help users learn a language. By keeping track of lessons completed, experience points from skills practice and lessons, daily activity, and levels, Duolingo makes learning a new language interactive, competitive, and fun.
Rosetta Stone is a language learning software with a series of core lessons and exercises focused on pronunciation, grammar, vocabulary, and listening. The software is tailored to adults, providing a more comprehensive, well-structured language curriculum that is more like a course.
LinkedIn Learning is an online course provider that gives users access to videos taught by industry experts in software, creative, and business skills. Because of its affiliation with industry jobs and LinkedIn, professionals and students feel motivated to learn and earn certificates from participating in these video series.
Codecademy is an online learning platform that offers free coding classes via tutorial videos and interactive exercises. As coding can be checked for correctness, the platform can allow for exercises and provide immediate feedback. As a result, users feel supported as they go through the exercises because they are step-by-step.
COMPETITIVE ANALYSIS SUMMARY
In exploring different learning platforms, I realized that there is no application that allows for immersive learning. All learning platforms are predictable, having either lessons and/or interactive activities that users complete. Furthermore, users who are super busy may feel less motivated to bring their full attention to an app or website.
By displaying translated words on familiar websites, Context allows users to learn via context clues to learn the translations of unfamiliar words in a new language. Furthermore, the Chrome extension is ideal for users who feel that they don’t have time to learn a new language.
Top Social Media Apps
To further determine the user experience of the Chrome extension, I interviewed friends and family members with the goal of understanding how language learners prefer to practice a new language, the difficulties of learning a new language, and their learning preferences. My key takeaways were as follows:
- Many users prefer bite-sized forms of daily language learning over longer weekly lessons. The bottomline was that most people prefer utilizing mobile applications for quick daily language learning, like in Duolingo, as it feels productive without getting in the way of other time commitments and activities.
- A majority of people I spoke to wished that education platforms could quantify progress in addition to gamifying or building a reward system for participating in lessons or completing exercises. By quantifying progress, learners felt that they could be prideful of their progress and feel more motivated to continue.
- The most common difficulty of learning a new language is understanding the situations to use the vocabulary and grammar learned. For example, in Korean, there are formal and informal honorifics that new language learners may find intimidating.
I used affinity diagramming to derive critical insights from the field study and interviews. I found themes in three primary areas: Motivation, Progress, and Customization.
Feel encouraged to learn
Users should feel motivated to utilize the Chrome extension and engage with new vocabulary and phrases
- Mystery badges that are unlocked as the user reaches milestones (more than one language, 100 words learned, etc.)
- Levels of proficiency motivate the user to keep working towards the next level
Allow users to see how much they've learned
Users should be able to reflect on their progress and take pride in their accomplishments
- A method of visualizing user progress in learning vocabulary and grammar
- Keep track of the number of words learned as quantitative feedback on how the user is progressing
Learn a language at your own pace
Users should be able to customize how much effort and time they want to put into learning a new language
- Preset levels of vocabulary and grammar as starting points
- Users have control over the percentage or amount of translated words that will appear per page
- Allow users to easily toggle the extension off and on
I found it difficult limiting my designs to supplement the Chrome browser, as previously I had only designed web and mobile platforms. I settled on 3 main features for Context: a progress dashboard visualizing what the user has learned along with learning badges for encouragement, a word bank of every word or phrase the user has seen or translated, and a settings page that ensures the Chrome extension doesn’t get in the way of important browser usage.
BRINGING DESIGNS TO LIFE
Using Figma, I created animated prototypes. My goal was to further my Figma prototyping proficiency and explore and experiment with different microinteractions and transition types when creating this personal project prototype.
Upon loading a new webpage, random words (specified by level, difficulty, and frequency in the settings) will be translated to the user's language of choice. These words are emphasized by a purple highlight. Upon selecting the translated word, the user can view its translation into their native language, listen to the proper pronunciation of the word, copy the word to their clipboard, add it to their word bank, or open the Chrome extension sidebar.
The progress dashboard view is a visual of the user's progress, with an overarching level view, an individual breakdown of the types of vocabulary and phrases they are mastering, and badges. Badges are awarded to users for completing milestones, such as learning 100 words or maintaining a streak.
The Word Bank is a log of all of the translated words the user has seen on web pages along with the number of times they have selected the word for understanding. Users can also customize their experience by adding specific words they want to be translated when they browse a page.
In the Settings view, users can customize their experience by changing the language they are learning, change the difficulty and rough number of words per page that will be translated, and add any sites to a list of "Blocked sites" that ensure that Context will not run on important websites such as government websites or websites for work.