Role: UX Designer
Duolingo is the most used language learning app in the world, and its learning-via-gaming approach has changed the e-learning space for the better. However, as a user and language aficionodo myself, I have one major complaint about Duolingo: lack of relevant vocabulary. That's why I designed a feature for Duolingo that would give premium users the option to create their own vocabulary decks, and have these vocabulary words woven into the classic lesson structure.
Read this case study start to finish, or click the headings below to explore different sections.
Problem, Goal, Project Duration and Constraints
Wireframes and Mockups
Key Takeaways, Next Steps
Users love Duolingo for its convenience, ease of use, and overall fun, but when you're learning a language for specific reasons, you probably need a specific vocabulary. Users need a way to integrate their own vocabulary preferences into the app.
Allow users to integrate their own vocabulary preferences into Duolingo.
Understand e-learning standard flows
Integrate the feature with minimal changes to existing UI.
Designing a new feature within Duolingo's existing UI.
Limited prototyping capabilities for game features in Figma.
I started my research by doing a broad sweep of the internet---learning what critics and converts had to say about various language learning apps. I already follow a couple of Youtube vloggers who make content about linguistics and language learning, so I started watching their reviews of Duolingo as well as other language apps. I had two main research goals:
1. To understand the main shortcomings of Duolingo, and
2. What features other language programs had that Duolingo didn't, what made them successful, and how to integrate something similar into Duolingo without disrupting the established flow and feel.
I came across a couple of videos that sparked an idea for me, plus they supported some of the anecdotal evidence I had heard from Duolingo users: that users should be able to customize the content that they are learning, and that they should do this by building their own vocabulary decks. From here, I analyzed the app Lingvist and Quizlet to get a better sense of how I would build this feature.
I noticed that both Lingvist and Quizlet allowed users to scan a document for words, rather than enter them one by one. This could be advantageous for someone looking to build an industry-specific vocabulary, or for someone studying a language as part of a curriculum. The main thing I found interesting about Lingvist was that a user didn't have to create flashcards one by one, but could go ahead and type or scan each words and the definiton would be generated. This seemed like the most seemless application of the deck idea, so it inspired me to create something very similar for Duolingo.
Create a customizable vocabulary deck feature for Duolingo.
Integrate the vocabulary deck feature into Duolingo's "Words" page. This way, as users go to review words from past lessons, they can also customize new vocabulary decks.
Create/edit 5 screens to reflect the new user flow.
Allow users to scan documents or type words in order to create the deck.
This flow takes the user from the main lesson screen to the skills screen where they can practice missed words, except now they have the ability to review other decks they've created. To show this, I added a "Brazilian Slang" deck, and a button for the user to create a new deck. From here, the user is prompted to enter or scan words into a text box and title the deck. Once they tap the check mark, the deck is generated along with translations and pronunciation for each word. After the user clicks "Start +10 XP" at the top of the third screen, and they begin a vocabulary-specific lesson. I avoided creating mockups for each screen in this lesson because it follows the same flow as the classic-lesson structure, except with the vocabulary of my choosing.
Creating a feature within an existing UI helped me to think outside of the box. Working with someone else's design choices allowed me to embrace the realm of design possibilities, rather than default to what I would usually have done.
While gathering ideas for how to incorporate this feature, I had the opportunity to look at different apps and think through how and why they had designed similar features in distinct ways. I realized that while exploring inspiration as a designer, it's important to look at why features may be slightly different between products (e.g, is there a different demographic, different primary use?) and learn from these distinctions so that we can arrive at more effective solutions quicker.
Run user research tests to gather real data to either confirm or reject my hypothesis: that users need customizable vocabulary in Duolingo.
Prototype a complete user flow using Axure, which I don't currently have access to but may be able to capture the game-features within Duolingo that Figma prototyping capabilities could not.
Test the feature with a group of users, note likes, dislikes, confusions, and error rate, then iterate on solutions.