Duolingo Feature

Adding a feature to the Duolingo app, allowing users to favorite especially important words
Role: UX/UI Designer
Duration: June - July, 2023

View Prototype

Learn how I designed new components

to match an existing brand

Research

User Interviews

To determine that this was a common problem among Duolingo's user base, I conducted four in-depth interviews and sent out a survey. In total, I asked 11 Duolingo users about their experiences with the app, and what they wished could be added.

63% of respondents reported going on a trip as a major motivation for using Duolingo

82% of respondents said their language-learning goal was just to learn "common" or "touristy" words

100% of respondents find that there are certain words and phrases more important to remember

Together, this means that many people use Duolingo for travel, and even more have a general need for extra review of the words that they find most important.

Competitive Analysis

I compared Duolingo with its most similar competitors, Memrise and Busuu. I created an account with each one and took a few language lessons to get a feel for the app. In many ways, these apps are very similar. The biggest difference is that while Duolingo features its iconic cartoon characters during the lessons, Memrise and Busuu use film clips of real people speaking to give a more realistic experience. Also, interestingly, Busuu already features a review tab containing favorited words from previous lessons. This shows that there is a demand for this feature.

Define

User Persona

Using the results of my research, I created a user persona: Becca Gilmore. She's a single young professional with a passion for travel. She's always preparing for a new trip, and prides herself on the amount of research she does beforehand to prepare. In addition to the persona page, I created an empathy map using quotes and sentiments from my user research. Becca's primary use of Duolingo is to pick up enough of a language to get around in a foreign country, so she has a list of tourist words that are a high-priority for her to retain.

Task Flow

I focused on three different tasks. This includes the two different screens where users can pick words to favorite, as well as completing the review of the favorited words.

User Flow

Combining the three task flows with the existing Duolingo app flow, I created the full user flow. This includes the user's journey through the usual lesson flow, as well as through the review tab.

Ideate

Mid-Fidelity Wireframes

I created wireframes for the favorites screen, which is linked to from Duolingo's existing review page. I added options for viewing the list, editing the list to add and remove words, and a button to start the review. For the lesson flow, I used screenshots as the base, since just the star icon and toast were being added to that screen.

Design

I followed along as closely as possible with Duolingo's existing branding and design system while creating the design. For instance, characters are displayed at the top of every page, and so I used existing images of the owl, Duo, for the pages I had added. I also used green, their secondary button color, for the actions and toast messages.

Browse screens in Figma

Test

Usability Tests

I conducted unmoderated usability tests with 8 participants, using Maze. I asked each participant to complete 3 simple tasks:
• Add a favorite word from the lesson flow
• Navigate to the favorite words page and add a word
• Navigate to the favorite words page and remove a word

Participants were able to complete these tasks quickly, but the edit button caused the most confusion. Since they expected to be able to add and remove words without toggling the list between a "view" and "edit" mode, 5/8 participants attempted to click to add or remove a word without clicking the edit button first. Participants also called out the remove icons, since they were green rather than the expected red.

Priority Iterations

To streamline the process of editing the list, I removed the edit button. I changed the search bar to have a dual function: searching for words already on the list, or adding new ones. The words that are already in the list appear in gray instead of green.

For the process of deleting a word, I made the remove icon appear when a user swipes on a word. Then they can click the icon to confirm the deletion. Additionally, the remove button is now red, as users expect it to be.

Conclusion

Participants were pleased with the ability to create and manage a list of important words. They found the process straightforward, and said that it would be very useful to have integrated into the app.

Prototype

Other projects:
Rainy Days Health

© Megan Archer 2023