Case Study · Accessibility Design · UX Redesign

ENHANCING ACCESSIBILITY
IN DUOLINGO APP

An Inclusive Design Approach for Diverse Learners — redesigning Duolingo to serve users with hearing impairments, vision challenges, motor disabilities, and cognitive differences.

5+
Accessibility improvements
Date
December 2024
Assignment 3
My Role
UX Researcher
UI Designer
Focus
Inclusive Design
Accessibility · WCAG
Platform
iOS Mobile App
Duolingo Redesign
01 — Introduction

Learning a language should be for everyone

Language learning is a powerful tool for personal and professional growth. Duolingo provides engaging tools to help users learn new languages — but like many educational apps, it faces challenges in fully addressing the needs of users with disabilities.

"The proposed solutions will not only enhance the user experience for individuals with specific needs but also improve usability for all learners."

For individuals with hearing and vision impairments, or those with motor or cognitive disabilities, traditional design choices can present significant barriers. This project focuses on redesigning Duolingo to make it more accessible for a diverse user base.

🎯
The Challenge
Duolingo relies heavily on audio, small interactive elements, and animations — all of which create barriers for users with different abilities.
♿
The Goal
Identify pain points, incorporate user feedback, and design inclusive features that make language learning accessible and enjoyable for everyone.
📋
Approach
User interviews, usability testing, surveys, competitive analysis, and accessibility standards (WCAG) guided every design decision.
02 — User Research

Five barriers to accessible learning

Through interviews, usability testing, and surveys with users who have disabilities, five consistent pain points emerged — each directly linked to a design decision that could be improved.

User pain points from research
01
Audio dependency
"Type What You Hear" exercises were completely inaccessible to users with hearing impairments — no alternative formats like phonetic transcriptions were provided.
02
Small interactive elements
Users with motor disabilities encountered frustration when engaging with small tiles or buttons — leading to repeated errors and significant usability issues.
03
Visual challenges
Users with low vision reported difficulties with contrast and layout — particularly in night mode, which ironically made navigation harder rather than easier.
04
No font customisation
The absence of customisable font size settings left users with vision needs unable to adjust the app to their individual reading requirements.
05
Disruptive animations
Movement-heavy elements and disruptive animations overwhelmed neurodivergent users and disoriented those with brain injuries — hindering their ability to navigate and focus on learning.
03 — Persona

Designing for Emma

Persona — Emma Smith

A primary persona was developed to anchor every design decision — representing the intersection of hearing impairment and vision challenges that many real users face simultaneously.

👩
Emma Smith
Age 25 · Montreal, Canada · University Student
Hearing impairment · Vision challenges
Goals
  • Master German for an academic exchange program in Germany
  • Overcome accessibility barriers in language learning apps
  • Participate fully in academic and social activities abroad
Frustrations
  • Struggles with audio cues and spoken German exercises
  • Finds small text and low-contrast colours challenging
  • Language apps rarely provide adequate support for her hearing and vision needs
Problem statement

Problem statement — Emma's user story

"Emma is a student from Montreal who needs an accessible way to learn German, because her hearing impairment and vision challenges make traditional language-learning tools difficult to use."

User Journey Maps

Journey maps traced Emma's experience using Duolingo — revealing exactly where the frustration peaks and where accessibility improvements would have the greatest impact.

User Journey Map 1
User Journey Map 2

User journey maps — Emma's current experience with Duolingo highlighting pain points

04 — Opportunities for Improvement

What the research revealed

The usability studies pointed to four clear design opportunities — each directly addressing one or more of the identified pain points.

🔤
Customisable font & contrast
Add font size controls and colour contrast settings so users can adapt the visual experience to their specific needs.
🔊
Phonetic transcriptions
Provide phonetic text alongside audio exercises — giving users with hearing impairments a way to engage with pronunciation-based content.
👆
Larger touch targets
Simplify interactive elements and enlarge touch targets so users with motor disabilities can navigate without repeated errors.
🧪
Inclusive user testing
Incorporate user testing specifically with individuals who have hearing and vision impairments to inform future design updates.
05 — Design Process

From sketch to accessible screen

01
Research
Interviews, testing & surveys
02
Paper wireframes
Rapid sketch exploration
03
Digital wireframes
Before & after comparisons
04
Usability testing
With impaired users
05
Hi-fi prototype
Final accessible design

Paper Wireframes

Initial sketches explored potential design solutions for each accessibility improvement — focusing on the settings screen, "Type What You Hear" exercise, font size controls, and phonetic transcription placement.

Settings screen
Accessibility toggles
Type what you hear
+ Phonetics toggle
Font size
slider control
Word tiles
+ phonetic text

Paper wireframe sketches — key screens for accessibility improvements

06 — Digital Wireframes

Before & after — three key improvements

Digital wireframes were built in Figma to illustrate the differences between the original design and the updated accessibility-focused design.

Fix 1 — Colour contrast (WCAG compliance)
Colour contrast before and after

Left: original low-contrast design · Right: updated WCAG-compliant colours

Fix 2 — Audio exercises & speech-to-text
Audio accessibility before and after

Left: exercises relied on audio only · Right: phonetic transcriptions + speech-to-text added

Fix 3 — Font size, dark mode & animation controls
Accessibility settings screens

Left: Vision Support with font size slider · Right: Preferences with accessibility toggles

07 — Key Features Designed

Five accessibility improvements

🔤
Font size control
A visual slider in the Vision Support settings lets users choose from Small, Medium, Large, or X-Large text — with a live preview of how their choice looks.
🌙
Dark mode + colour themes
A dark mode toggle reduces eye strain, with customisable colour themes to cater to individual visual preferences and needs.
📝
Phonetic transcriptions
Phonetic text displayed alongside words in audio exercises — allowing users with hearing impairments to understand pronunciation without relying on sound.
🎙️
Speech-to-text input
A microphone option added to text exercises — allowing users with limited mobility or dyslexia to speak their answers instead of typing.
✋
Animation toggle
A preference toggle lets users disable animations entirely — reducing overwhelm for neurodivergent users and those with brain injuries or vestibular disorders.
🔇
Speaking exercise toggle
Users can opt out of speaking exercises entirely through a simple toggle in preferences — removing a major barrier for users with speech impairments or hearing loss.
08 — Accessibility Standards

Designed to WCAG principles

Every design decision was validated against WCAG (Web Content Accessibility Guidelines) — ensuring the redesign meets internationally recognised accessibility standards.

4.5:1
Contrast ratio
Minimum contrast ratio between text and background — meeting WCAG AA standard for normal text throughout the app.
44px
Touch target size
Minimum touch target size for all interactive elements — meeting Apple HIG and WCAG guidelines for motor-accessible design.
4
User groups served
Hearing impaired · visually impaired · motor disabled · neurodivergent — each group addressed with specific design solutions.
09 — Reflection

What I learned

This project deepened my understanding of inclusive design as a practice, not a checklist. Accessibility isn't about adding features for edge cases — it's about recognising that designing for constraints makes the experience better for everyone.

Key insight
Accessibility improvements — like larger touch targets, better contrast, and phonetic text — improved the experience for all users, not just those with disabilities. This is the curb-cut effect in practice.
Design lesson
Testing with users who have disabilities reveals issues that standard usability testing completely misses. Including diverse participants isn't optional — it's how you find the real problems.
Next steps
Conduct a full WCAG 2.2 audit of the prototype, test with assistive technology users (VoiceOver, Switch Access), and explore haptic feedback as an alternative to both audio and visual cues.

Explore the prototype

View the full Figma prototype with all accessibility improvements applied and interactive.

Open in Figma ↗
← Caring Hands All projects End of case studies