PERSONAL PROJECT
Context is a Google Chrome extension that displays websites in your native language and the language you’re trying to learn. I built this in August 2020 as a Google CSSI Scholar and decided to revisit the idea from a designer's perspective.
DURATION

January 14, 2022 - January 21, 2022

STAKEHOLDER

Personal Project

TEAM

Me! (Design & Ideation)

ROLE

I ideated this product based on personal experiences and developed the user research plan. Based on my findings, I designed prototypes of the Chrome extension to learn how to design an unfamiliar type of product.

SKILLS

Product Design
UX/UI Design
User Research
Product Thinking
Prototyping

TOOLS

Figma

Overview

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.

Problem
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.

Solution
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.

Research

Plan of Action
INITIAL THOUGHTS

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.

Competitive Analysis
RESEARCH METHODOLOGY

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.

WEB Platform

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.

Mobile App
Duolingo

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.

computer software

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.

Web platform

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.

web platform

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.

Insights
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
Interviews
RESEARCH METHODOLOGY

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.
Research Summary

What were the main takeaways?

Key Insights
RESEARCH SYNTHESIS

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.

KEY FUNCTIONALITY
Feel encouraged to learn

Users should feel motivated to utilize the Chrome extension and engage with new vocabulary and phrases

Components
  • 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
KEY FUNCTIONALITY
Allow users to see how much they've learned

Users should be able to reflect on their progress and take pride in their accomplishments

Components
  • 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
KEY FUNCTIONALITY
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

Components
  • 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

User Flow

understanding user interactions

Given these insights, I settled on creating a Google Chrome extension that allows users to learn vocabulary and grammar in a new language while browsing their sites of choice. This led a redesigned user experience shown below in a task flow:

Wireframes

ESTABLISHING STRUCTURE

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.

Features

IDEATING SOLUTIONS

After creating low-fidelity mockups based on the user flow, I was able to create high-fidelity mockups. I particularly paid attention to designing the word translation pop-up, as users would be clicking on several translated words every day.

Word Pop-up
key feature
  • Highlighted to emphasize a change: Purple color shows clear difference and spotlights translated word
  • Support for different learners: Provides user with audio of pronunciation of the word, its translation, and its pronounciation
  • Build the word bank: Word cloud icon provides quick way for user to save the word
Progress Dashboard
Key feature
  • Overall Progress Summary: Shows the user their overall progress and their language proficiency level
  • Progress Breakdown: Gives a thorough breakdown of what types of words the user is being exposed to
  • Badges: A reward system that encourages the user to unlock new achievements and collect badges
Word Bank
Key feature
  • Sort the word bank: Allows users to sort words based on frequency, last seen, or first seen
  • Total words learned: Provides a quick metric of how many words the user has learned or saved
  • Easily add words: Users can customize their word bank by inputting their own words
Settings
key feature
  • Tailor the learning experience: User can control how many new words or phrases they are learning and the difficulty of the words
  • Website Permissions: Allows user to quickly turn off Chrome extension on site
  • Information Security: Only requires a name and email, requiring as little user information as possible
Blocked Sites
Key Feature
  • Blocking: Ensures that Context will not translate any words on the specified sites
  • Site name customization: Allows the user to keep track of sites in addition to the URL

Prototype

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.

Word Pop-up
KEY FUNCTIONALITY

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.

Progress Dashboard
KEY FUNCTIONALITY

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.

Word Bank
KEY FUNCTIONALITY

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.

Settings
KEY FUNCTIONALITY

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.

Reflection

How did I feel when working on this project?

I found myself discovering new screens and adding new features to a familiar project from high school. It was super insightful seeing how the design process could lead to an enhanced user experience and features that I didn't think of two years ago, such as badges for incentive or blocked sites. In addition, I really enjoyed working on my own timeline, with this being a personal project. Context was a project I had fun working on outside of any work study or coursework I had. With no expectations or deadlines, I was able to experiment in my designs and see how my design choices could impact the overall experience of the product. In the near future, I hope to bring this extension to life (again) to further my developing / coding skills.

What could I have done differently?

I would have spent more time brainstorming other ways to encourage and motivate users. While badges and progress may work for some, they don't motivate everyone! I think I would extend my initial research and competitive analysis to other learning platforms, games, and creative learning systems to cater to different learning types and preferences. For example, Penn Spark, a club I help oversee on campus, recently helped design and develop Clarifi, a desktop application for students with ADHD that gamifies the learning experience.  I think if I sought out more learning styles and solutions to boost learning and focus, the designs could have been even better and more innovative!