VIVIAN K. LIN

Duolingo

The world’s most popular language learning app that provides personalized education through machine learning algorithms and gamification. An added flashcard feature allows users to incorporate their real world experiences into their learning journey.

ROLE

UX/UI Designer, UX Researcher

SCOPE

80 hours, 3 task flows

TOOLS

Figma, Figjam

Skip to final design

THE PROBLEM

Duolingo users struggle to integrate their real-life language learning experiences with their language learning journey on the platform

Users rely more on real life experiences and conversation to practice speaking and retain the language. Duolingo does not offer a lot of flexibility in skipping lessons which prevents users from practicing common phrases or words that are used in daily conversations or travel.

DISCOVER

The Current User Experience

Janet Kim. 26 — Nurse

“I want to be able to read street signs and talk to people when traveling to Japan”

Start

End

😃

Excited

I’m joining Duolingo to learn Japanese for my upcoming trip to Japan

🙃

Frustrated

Lessons are inflexible and I’m not able to learn helpful words and phrases

😐

Disappointed

I couldn’t keep it a habit and I didn't learn anything useful for my trip to Japan

Start

End

😃

Excited

I’m joining Duolingo to learn Japanese for my upcoming trip to Japan

🙃

Frustrated

Lessons are inflexible and I’m not able to learn helpful words and phrases

😐

Disappointed

I couldn’t keep it a habit and I didn't learn anything useful for my trip to Japan

DEFINE

How might we help immersive language learners connect their real life experience and Duolingo experience?

We know that users prioritize learning functional vocabulary and want to apply their outside knowledge from language classes, friends, pop culture, etc., to Duolingo. Based on user research, I decided to add a study method that is familiar to users and allows for customization — flashcards.

DEFINE

DESIGN

Mid-Fidelity Wireframes

Duolingo's comprehensive brand guidelines made it easier for me to start ideating wireframes in mid-fidelity state. The overall journey of the user flows focused on creating a flashcard, creating a deck, and browsing pre-made decks.

Flashcards Home

Create Flashcard

Created Deck

Pre-made Decks

Flashcard Deck

Integrating New Design

Understanding Duolingo’s brand identity was imperative to creating a prototype that felt familiar to Duolingo users. I utilized pre-created Duoligno illustrations by DesignDrops and created new icons for the flashcard feature.

Illustration: Duo Bird

Identity: Secondary Colors

Adding Icons to Duolingo

New Flashcard Icon

Pre-made flashcard icons

High-Fidelity Prototype

A clickable prototype was designed for 3 flows:

Create a new flashcard
Create new deck and add flashcards
Browse Pre-made Decks

Flashcard homepage

New flashcard

Pre-made decks

Deck flashcards

Custom deck page

TEST

Usability Testing

I conducted moderated usability tests on 5 users — 3 past users and 2 current users. I tested how intuitive it was for users to find and explore the new flashcard feature.

Results

100%

TASK COMPLETION

All tasks were completed successfully

< 1 min

EFFICIENCY

The avg. amount of time to complete each task < 1 minute

The avg. amount of time to complete each task was less than 1 minute

100%

FEEDBACK

All participants noted the tasks were simple and straightforward

Iterating after user feedback

Based on the feedback from usability testing, I aimed to focus my efforts on 3 initiatives within the proposed user flow:

Changing the quick add feature to a search bar
Adding more helpful tips from Duo Bird

Before

After

The original quick add feature was changed to a search bar to avoid user confusion. Your decks was moved up to encourage users to browse decks first.

Before

After

The original quick add feature was changed to a search bar to avoid user confusion. Your decks was moved up to encourage users to browse decks first.

Before

After

Adding more helpful tips from Duo Bird

Before

After

Clarified the purpose of the Add Multiple Words button by improving copy of the button and the tip from Duo Bird.

Before

After

Clarified the purpose of the Add Multiple Words button by improving copy of the button and the tip from Duo Bird.

Before

After

Clarified the purpose of the Add Multiple Words button by improving copy of the button and the tip from Duo Bird.

Final Prototype

Explore the final prototype

REFLECTION

What are the next steps?

I would like to focus on developing the flashcard feature further with a focus on integration with Duolingo lesson plans and collaboration with other users. Additional testing will be needed on the Add Multiple Words button to gauge how users interpret this feature and how helpful it could be when creating a flashcard deck.

I would like to focus on developing the flashcard feature further with a focus on integration with Duolingo lesson plans and collaboration with other users.

Additional testing will be needed on the Add Multiple Words button to gauge how users interpret this feature and how helpful it could be when creating a flashcard deck. I will also look into minor UI notes like adding more color to certain frames.

Allowing users to save words right from their lessons or quests.

Allowing users to save words right from their lessons or quests

Adding levels of depth or difficulty for pre-made flashcard decks

Collaboration on flashcard decks in preparation for upcoming tests or trips

Collaboration on flashcard decks for tests or trips

Allowing users to record voice memos to help with pronunciation, tones, etc

Allowing users to record voice memos to help with pronunciation

Collaboration on flashcard decks in preparation for upcoming tests or trips

Allowing users to record voice memos to help with pronunciation, tones, etc