Role UX/UI Designer, Researcher, Illustrator
Team Size 1 Person
Timeline 8 Weeks
Before & After
Before : Advanced lessons only offer translations
Overview
Duolingo is a language learning app that uses short, game-like lessons so users can practice speaking, reading, writing, vocabulary, and grammar.
Problem Statement
32 out of 39 languages on Duolingo do not offer grammar tips. Adding grammar tips to all languages will further users’ comprehension by allowing them to quickly reference the structure of words/phrases and compare different systems.
Proto-Persona
User Flow
Research
I conducted two rounds of usability testing. Each round had 5 participants. A participant qualified for the usability test if they have tried to learn a language or if they played mobile games.
Two participants were found after guerrilla testing at a local mall.
Three participants were found on Respondent, a remote usability testing website.
Four participants were people I knew personally, so they were tested in person.
Design Process
The first prototype is to gauge whether users have all the information they need in order to retain anything from a new language.
I chose Korean as the test language, because it is a fairly uncommon language so participants would not have any background knowledge to help them.
Design System
Duolingo has a unique and identifiable design system that I wanted to replicate and expand upon in order increase the design's credibility.
First Prototype
“I would have liked to learn how sentences are formed in this language.”
- Participant 3
- Participant 3
None of the participants gained any value from this iteration.
Every participant mentioned visuals such as color, images, and diagrams would help them be more engaged and learn more.
After the first round of usability testing, these were the takeaways:
1. Experiment with simplified content to see if users process more information.
2. Incorporate visuals to make foreign language lessons memorable and meaningful.
3. Improve information hierarchy by using bolded phrases and color.
4. Change the headlines to be less ambiguous.
2. Incorporate visuals to make foreign language lessons memorable and meaningful.
3. Improve information hierarchy by using bolded phrases and color.
4. Change the headlines to be less ambiguous.
Updated Prototype
Taking the time to make illustrations for the prototype significantly boosted participant engagement and understanding.
After a second round of usability testing and A/B testing, here are the findings:
1. During A/B testing, 100% of participants preferred the English headlines.
2. Color coding allowed participants to differentiate nouns from verbs more easily.
3. Participants notably missed audio/pronunciations.
Final Prototype
In the future, I'd like to add pronunciations done by native speakers, because that was a key factor missing from the experience.
I'd also like to create more insightful illustrations that will engage users.
Lessons
Comprehension is closely tied to visual interest. Adding illustrations, color coding, and strategic bolding helps capture the user's attention, which in turn makes them more receptive to learn.
Learning is often done by making associations. I found the participants easily understood where the verb goes in Korean, because they could immediately compare it to how it works in English. If it the participants had nothing to compare it to the lesson wasn't effective. For example, none of the participants memorized the Korean characters, because none of them were familiar with characters.
