DuoNarratives: Making it easier to think and speak in a foreign language

A passion project in which I explore Duolingo, its strengths and limitations, and offer a feature addition to help users strengthen their conversational speaking skills. Language learners can practice listening, thinking, and speaking in their target language.

View Design

Methods

  • Research: Interviews, App Reviews, Secondary Research, Usability Testing
  • UX/UI Design: Archetypes, Ideation Workshop, Task Flows, Wireflows, Wireframes, Prototype (Figma)
  • Content Design: Curriculum Design
  • UX Writing: Microcopy, Lesson Content

Role

Stephanie Lin (Product Designer)

Timeline

80hrs / 1month

Project Overview

Imagine shifting the focus of Duolingo from memorizing vocabulary to encouraging thought formation and speaking for language learners.

Please Note: During the development of this project, Duolingo released a similar feature within their paid tier, DuolingoMax known as "DuoRoleplaying" and "Explain my Answer".

Sad face

Problem

Language learners felt limited by features available and weren’t confident in their conversational abilities.

Magic wand

Solution

An AI "Teacher" (Duo) that grades the user's speaking or writing, noting suggestions for improvements.

Figure 1. Highlights of DuoNarratives Feature: Overview, Feedback Summary, and Detailed Feedback

My Design Process

Design process

Figure 2. Design process for DuoNarratives

Discover

Discover: User Interviews to Test my Hypothesis

Rather than additional community support, users felt that Duolingo was ineffective in facilitating their ability to engage in conversation in a new language.

insight 1

Complex community struggles

Learning struggles in the community were complex, with diverse trends observed among heritage and non-heritage learners based on proficiency.

insight 2

Memorization intensive

Prompts had heavy emphasis on memorization and recognition. Users felt there was more emphasis on gamification rather than learning.

insight 3

Lack of practical skills

Despite their Duolingo engagement and progress, users faced challenges with real-time understanding of spoken words and generating fluent responses.

Quote talking about the importance of engaging with a language

Image 1. Insights from a 3-Month Long Duolingo User: Importance of Language Engagement in Skill Building

""

Discover: Strategies for Learning a Language

After getting a better understanding of the problem, I became curious. I spoke with a speech language pathologist to understand: How does learning a language work?

Blocks depicting progression of learning to speak in a language from simple words to complex sentences

Figure 3. Progression of Speaking a New Language

I newly hypothesized that people struggled to speak in a language because they weren't engaged in activities that helped them "think" in the target language.

I confirmed my hypothesis and learned that its also important to provide progression when it comes to language learning. It's not easy to go from a simple word to a full sentence, there needs to be an intermediary step(see Figure 1). When I referenced my interview, all participants struggled with the muscle of thinking of simple sentences in a new language. Duolingo is currently set up for recognition.

""

Discover: Design Patterns

I also gathered and analyzed Duolingo’s branding and company values to help me understand what makes Duolingo memorable and successful.

Highlights of Duolingo brand system

Figure 4. Intersection of UX and Brand Design: Duolingo’s Use of Branding to Create an Immersive Learning Experience

Duolingo's screens feature vibrant colors, simple characters, rounded edges, concise copy, and a clear hierarchy, allowing for easy comprehension at a glance, while also ensuring that most screens are accessible without scrolling. In terms of features, there seems to be a trend of sunsetting community-features including forums and duels and releasing features that support an individual learner’s journey such as the new homepage with its directed lesson map.

Define icon

Define: Archetypes to Identify User Patterns and Goals

One important trend that guided future decision making was that users were not confident when they practicing aloud.

Learning archetypes from user research, a solo learner and a learner who prefers collaborative environment

Figure 5. Brief Exploration of Duolingo’s Diverse Learner Archetypes with Solo and Collaborative Learners

While users had differences when it came to their style of learning: collaborative versus individual environments. Users shared similar goals and pain points.

Overarching Problem

Users feel insecure and uncertain about practicing a new language aloud.

Goal

Feel confident in having a conversation in a new language

Challenges

  • Am I pronouncing the words correctly?
  • How do I practice without memorizing?
  • Did what I say make sense? Why or why not?
Ideate icon

Ideate: Encourage Rapid Ideas and Diverse Perspectives

With my workshop participants, we explored “How might we create effective study spaces within Duolingo?”

Snippet of ideation workshop

Image 2. Exploring Potential Feature Additions to Duolingo in an Ideation Workshop

I hosted a 1-hour workshop with a few UX designers and developers. First, I debriefed my participants. Then, we did a quick 5-minute brainstorming activity followed up a 25-minute in-depth activity where participants explored an idea they thought was promising. This in-depth activity (pictured above) included 1) the big idea, 2) important details, 3) hypothesis/impact, and 4) potential challenges. I ended with a wrap-up discussion where we discussed feasibility and effort.

""

Ideate: Choosing DuoNarratives

Based on my research, I chose "DuoNarratives" because it best fit existing Duolingo business and design efforts. The following key traits of DuoNarratives also mirror existing efforts to improve their service.

Best Match for Problem

Engaging Prompts

Added personal prompts to create an immersive and thought-provoking learning experience

Alignment with Duolingo

Progressive Learning

Integrated a system of increasing difficulty to help users build the skills necessary to have a conversation

Reflects Existing Efforts

AI Feedback

Promote self-awareness and learning through error corrections can help learners improve their weaknesses

""

Design: Refining the Solution Through Wireflows

I used wireflows to identify components and patterns I could use from the existing Duolingo system and which components and patterns I needed to create. After I finalized the wireflows, my previous research on Duolingo's design system allowed me to seamlessly move towards hi-fidelity and prototyping.

Image 3. Sketching Wireflows for DuoNarratives

Test icon

Testing: Identifying Key Usability Concerns

Testing revealed many weaknesses in the design, with the biggest issue being that users (n=5) could not accurately interpret the feedback from AI. This issue was the most complex and required me to explore potential solutions in low-fidelity wireframes.

0%

of users were able to complete the feedback task in the first pass.

40%

of users completed Task 2 after receiving a debrief.

100%

of users believed the feature concept would be effective for learning.

User described needed a text description

Image 4. Insights from A DuoNarrative Test Participant

I conducted moderated usability tests with 5 participants over Zoom. Each session lasted approximately 45-minutes. Participants were asked to located the new feature and accurately interpret the feedback from AI. Users were tested in Mandarin (Task 1) and Spanish (Task 2). They were not required to have knowledge of either as the goal was to test the design and not the nature of the content, though language content errors did add some levels of confusion.

""

Testing: Zooming in on the Usability Concerns

Issue 1: Confused by color codes

Highlights of color code on DuoNarratives

Figure 6. Confusing Speech Components Discovered During Usability Tests

Challenges

  • The color codes were not what user was expecting (see Figure 5); expectation of red = wrong, and green = correct

Solution

  • Streamline colors to match semantic color standards

Issue 2: Confused by speech direction

Figure 7. Confusing Speech Components Discovered During Usability Tests

Challenges

  • Didn’t know which speech bubble was user and which was Duo (note various directions within Figure 5)
  • Could not identify submission versus AI corrected version

Solution

  • Denote Duo with an avatar
  • Follow up every sentence with a "Duo" version

Design: Zooming Out to Fix the Elephant in the Room

The most critical usability issue was the heavy cognitive load on users. This problem was complex since there were multiple parts adding to their cognitive load (see Issue 1 and 2 above) as well as the overwhelming amount of information provided on the feedback screen, language content errors, and the constraints of the existing design system. I used lo-fi to help me explore alternatives quickly.

Duolingo friend quest challenge screen

Image 5. Simplifying color codes within Detail Feedback Screen

V1 - Closest to Original Design

Pros
  • least amount of effort
  • closest to existing design system
  • solves who said what
Cons
  • heavy cognitive load for user
  • feature is not as valuable
Duolingo friend quest challenge screen

Image 6. Simplifying color codes and adding an accordion within Detail Feedback Screen

V2 - Workaround Solution

Pros
  • still similar to existing design system
  • collapsible tip saves some time on reading through feedback
Cons
  • heavy cognitive load for the user
  • feature is not as valuable
Duolingo friend quest challenge screen

Image 7. Adding a feedback overview and brief feedback screen before Detail Feedback Screen

V3 - Ideal Solution

Pros
  • increases user control and freedom
  • decreases cognitive load
  • added business value/feature scalability
Cons
  • most effort implementation
  • new components not in the existing system

Final Design: Enhancing the Experience and Scalability