.svg)
January 14, 2022 - January 21, 2022
Personal Project
Me! (Design & Ideation)
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.
Product Design
UX/UI Design
User Research
Product Thinking
Prototyping
Figma
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.
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.
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.
.svg)
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.
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.
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:
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.
Users should feel motivated to utilize the Chrome extension and engage with new vocabulary and phrases
Users should be able to reflect on their progress and take pride in their accomplishments
Users should be able to customize how much effort and time they want to put into learning a new language
.svg)
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:
.svg)
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.
.svg)
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.
.png)
.svg)
.svg)
.svg)
.svg)
.svg)
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.
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.
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!
.svg)