Decoding Duolingo: How Technology and Design Can Shape Learning Journeys

Birds, beauty, and brains!

Esha Santosh
GDSC VIT Vellore
7 min readApr 4, 2024

--

“Though people say our [social media] presence is “unhinged” and it would seem like you don’t know what Duo will be up to next, we actually know exactly what Duo is doing.”

– Luis von Ahn, CEO and co-founder of Duolingo

As eclectic as the Duolingo social media page may seem, every interface of the app itself is a clear reflection of their mission — to make the language learning journey enjoyable. From custom typography and illustration styles to immersive world-building with animated characters, it transcends traditional language learning, immersing users in a realm where characters and colors redefine the educational adventure.

image source: Megan Barker

Amidst the multitude of language acquisition apps, what distinguishes Duolingo is its unwavering commitment to an interdisciplinary approach to both technology and design. A distinctive design style, enriched by meticulously crafted interactions and gamified learning algorithms, seems to have propelled Duolingo into a league of its own.

image source: Jasmine Vahidsafa

Now, let’s delve into the secret sauce that sets it apart in the competitive digital landscape, keeping learners coming back for more.

Illustrative Language

“Our belief is that language learning is more than just words on a screen: it’s interesting characters, colorful experiences, and beautiful stories.”

- Greg Hartman, Art Director at Duolingo

To enchant learners and foster a love for language, Duolingo ventures into the realm of worldbuilding, capturing the essence of cultural diversity and fostering a connection that goes beyond the words on the screen. In crafting these characters, Duolingo’s illustrative language employs three fundamental shapes: the rounded rectangle, the circle, and the rounded triangle.

image source: Greg Hartman

This distinctive style generates visual intrigue by weaving variations in visual structure and playful colors, making each illustration an unpredictably vibrant narrative in its own right. Humor conveyed by these playful visuals can melt fear away and make learners look forward to coming back to practice every day.

image source: Osman Mansur

A unique hurdle in the language-learning space is the creation of imagery that transcends linguistic and cultural constraints. For example, their well-known streak icon, featuring fire, presents a challenge as expressions like ‘on fire’ do not universally translate. However, the phoenix, being a mythical bird engulfed in flames, serves as a common symbol of power and triumph across cultures. Incorporating this into their new design helped infuse more energy than their earlier illustration (Duo holding up numbered balloons) while remaining consistent with their mascot being an owl.

image source: Kurt Hartfelder

Interestingly, incorporating this with animations increased the likelihood of brand-new learners continuing their journey by +1.7%! This might not sound like a lot — but given the daily influx of new learners, it means that thousands of people stick around to learn more every day, simply because the streak feels more exciting than ever.

Animation

“Most of the graphics we consume nowadays run in software. […] Unlike print, software is interactive. It can change state at any moment while it’s running.”

- Guido Rosso, CEO/Founder of Rive

Captivating motion design can strategically guide the viewers’ gaze, leveraging the instinct of the human eye to prioritize objects in motion. For example, animated skill icons were introduced to make the screen more engaging, hoping to boost user attention. Surprisingly, learners ended up spending more time watching the animations than they did with static illustrations, benefitting both the business and the learners working toward their goals.

image source: Megan Barker

To enhance the learning experience, Duolingo incorporates characters into the majority of their exercises, having them “speak” the sentences that learners translate. The process involves generating speech, running it through in-house speech recognition and pronunciation models, and determining precise timing for each word and phoneme (speech sound). This includes mapping each sound onto a visual representation, known as a viseme, within a set designed based on linguistic features.

image source: Jasmine Vahidsafa

The State Machine feature within Rive allows designers to create interactive components with real-time functionality. By defining parameters and logic, designers can control animations and transitions dynamically, making it an invaluable tool for creating immersive experiences. Its intuitive visual interface streamlines collaboration between designers and developers, enabling seamless integration into app architectures like Duolingo’s.

image source: Jasmine Vahidsafa

Utilizing state machine layers (similar to a game engine), a limited number of assets can be used to generate a virtually unlimited number of combinations seamlessly. This process ensures that the animation of the mouth aligns with pronunciation, delivering a clear visualization of the spoken language and significantly enriching the learning journey.

User Interface and User Experience (UI/UX)

“Learners want to do what’s best for their learning. […] Visual design and gamification mechanisms help communicate what to study and when.”

– Beth Chasse, Product Designer at Duolingo

Highlighting the need for UI/UX to be more than only aesthetically appealing, the incorporation of gamification elements adds an interactive dimension; progress bars and skill-focused cues serve as a guiding companion throughout the language acquisition journey, thereby intricately combining user engagement strategies and effective language learning techniques.

image source: Greg Hartman

To inspire learners to revisit past material while advancing with new lessons, Duolingo adopted the creative approach of gamified spaced repetition by introducing a visual representation of the gradual fading of learned content over time. This involved two iterations of completed levels, strategically breaking the shiny golden milestones periodically, prompting learners to return for additional practice.

image source: Beth Chasse

The thoughtful adjustment of the progress bar to 80% not only plays on the users’ perfectionistic tendencies but also tactfully communicates the integration of spaced repetition as a powerful learning mechanic. User-centric design choices like these not only acknowledge learners’ achievements but also signal that there’s more to explore, thereby promoting continuous engagement.

Data/AI

Duolingo AI models create a customized learning experience, utilizing the A/B testing method for data-driven decision-making and iterative improvements based on user feedback. At the core of the user experience is their Student model, which tracks statistics about every word ever taught, including frequency of exposure and recall accuracy.

In most cases, their custom Birdbrain model combines learner data with available exercise material to determine the exercises in a particular lesson that best match a learner’s knowledge level. Based on these findings, the Session Generator crafts lessons from a diverse pool of prospective exercises.

image source: Klinton Bicknell

Additionally, a custom statistical model that determines the optimal time to practice previously learned words is used to add exercises targeting those words into a lesson. The model predicts the half-life regression for each word in the user’s long-term memory by analyzing the error patterns of millions of language learners on the app.

A student’s word practice history and HLR-predicted forgetting curve. image source: Burr Settles

The same curve is used to strategically space out repetitions of notifications to help users maintain their prized streaks. To prevent excessive repetition, the algorithm is programmed to downgrade notifications that have been recently shown, aligning with the forgetting curve model. This is combined with bandit algorithms, which repeatedly select from a set of notification options, to gradually learn which ones are most effective for encouraging language practice.

Conclusion

Learning a language used to require tutors, textbooks, and tons of cash — now replaced by a screen and a few minutes a day. This prompts the question: with this opportunity, what else could one learn or teach?

This isn’t just about the mechanics of technology or the semantics of design, but the orchestration of interaction design across interfaces that intuitively respond to our needs — an understated symphony poised to reshape our digital encounters. The expansive landscape of technology is no longer confined to simply generating solutions; a deliberate blend of aesthetics and functionality now facilitates immersive experiences that extend beyond mere utility.

In this transformative era, the evolution of language learning serves as a powerful symbol of the broader paradigm shift in education and skill development. The unprecedented simplicity and accessibility of learning today could unlock a new world of knowledge and growth; your journey towards a brighter future could start with just a screen and a few minutes a day :)

image source: Nexus Studios

--

--

Esha Santosh
GDSC VIT Vellore

There's only so much I can say before my thoughts begin to drown in words. In the spaces between them, you might find what's left unsaid :)