Redesigning Duolingo to be more accessible for users such as the learning, hearing, and visually impaired.

Team

Sarah Kwakkelaar
Shahir Ahmed

My role

UI Designer
UX Researcher

Tools

Figma, FigJam,
Draw.io, Miro

Timeline

Simulated design sprint

Duolingo Redesign

Making language learning more accessible.
01. OVERVIEW

Problem

Despite being the most prominent language-learning platform, Duolingo falls short of certain accessibility standards.

Duolingo has faced criticism for its lack of accessibility features, hindering the learning experience for a significant portion of its diverse user base. To ensure an inclusive learning environment for all, there is a pressing need for Duolingo to elevate its focus on accessibility in their designs.

Solution

In this case study, I give our approach to redesigning Duolingo to enrich the experience for individuals facing dyslexia, visual impairments, and/or hearing impairments. As an added benefit, these enhancements not only accommodate these groups but also elevate usability and enjoyment for all users.

Accessible

Customizable Text Settings

With multiple text options, including a font specifically designed to support users with dyslexia, users can now tailor their experience to be as readable as possible.

Adaptive

Flexible Audio Speed For Listening Exercises

Users can now customize the audio playback to a pace that suits their needs using our sliding scale. This particularly benefits users with hearing impairments, but will undoubtedly come in handy for anybody learning a new language.

Inclusive

Enhancing the Experience for Colorblind Users

Our selection of correction modes fine-tunes the app's color palette to help colorblind users differentiate colors and ensure that they enjoy an optimized visual experience.
02. RESEARCH

Preliminary Research

Identifying Accessibility Gaps Through Public Discourse

I started by conducting research on the specific ways in which Duolingo falls short of accessibility standards.
‍
Usually, we'd go about this by conducting a round of user interviews, but I wanted to simulate real-world time constraints where I'm unable to dedicate the level of thoroughness and attention to detail I'd typically prefer. So, we decided that the next best thing was to scout out reddit forums, particularly r/duolingo, and look for common needs, frustrations, and concerns discussed by users.
We noticed that many users favored the website version of Duolingo because they could use browser extensions to customize the experience in ways that make it more accessible to them. This mass migration and reliance on third-party extensions underscores the detrimental impact of Duolingo's lack of native accessibility features. Some users even took it upon themselves to create solutions. Smart, but never something that users should feel the need to resort to.

For some accessibility issues (particularly those affecting people with learning disabilities), a few users argued for the opposite approach, saying that the whole point of learning is challenging yourself. This emphasizes that abilities vary greatly among individuals, as do their attitudes. There is no one-size-fits-all solution. Instead, users need choices that allow them to tailor their experience to suit their needs.

In the end, we identified the following as the most significant pain points in terms of accessibility.

Users can't tailor their learning experience.
Most learning exercises can't be toggled on/off, which can be frustrating for some users.
Font, text size, and color schemes aren't customizable.
Greater customization would be particularly helpful for those with dyslexia or visual impairments.
Not enough support for individuals with hearing impairments.
This is key given the importance of understanding spoken language.

Empathizing

Understanding:
Visual Impairments

Empathizing

Visual impairments, such as poor vision or color detection, may present significant challenges for users interacting with digital interfaces. Poor contrast, small font sizes, and cluttered layouts can exacerbate these challenges, leading to feelings of frustration and helplessness.

Some users rely on screen readers to access digital content, while others require adjustable size/contrast settings or alternative color schemes to enhance visibility.

Understanding:
Dyslexia

Dyslexia is a common learning disability that primarily hinders a person’s ability to read and write. Someone with dyslexia may experience difficulty reading fluently at an average pace, telling similar words apart, and spelling accurately. This means that they often go about these tasks slowly and are particularly prone to mistakes.

Factors such as font, color, and spacing can play crucial roles in dyslexic individuals' reading experiences. For example, dyslexic individuals generally read faster when the text has a lower color contrast.  
"I wnet to the maerkct and boughrt snome gosreicere. It was a butaiful day outside, sun was shnining and birds were singni. I plucked out some frseh frutis and vebegtels, payigng aittentoin to prkeics and qaulility. Then I cmae back homre to pratere it for dinnre. It was a logn day and I was tiread, but cikono was wroth it in the end."


This is an example of what reading might feel like for someone with moderate to severe dyslexia.

Understanding:
Hearing Impairments

People with hearing impairments may have difficulty perceiving spoken instructions, dialogue, or auditory cues, hindering their ability to fully participate in the audio-based exercises that are so prevalent in Duolingo. Some ways that users may improve their auditory experience include using captions, adjusting playback speed, or employing visual cues (such as lipreading) to enhance audio content.

Competitive Analysis

Next, I looked into popular web extensions to understand how users currently navigate accessibility gaps.

Empathizing

During my preliminary research, I discovered earlier that many users use the help of browser extensions to navigate Duolingo's accessibility gaps. As such, I decided to try some of the popular ones to gain firsthand insight into how common pain points can be remedied, even if only to a certain extent. I found that some popular accessibility-enhancing features include:

1. Text to speech

2. Thorough customization (fonts, text sizes, colors, audio speed, etc.)

3. Highlighting words according to part of speech

4. Supplemental textual/visual definitions for words

03. IDEATION

Brainstorming

Exploring & Prioritizing Accessible Features

Now that I had a better understanding of the effectiveness and popularity of specific accessible features among my user base, I was much better positioned to brainstorm ideas on how I could enhance Duolingo's native design to improve its accessibility.

My first feature idea was a universal solution: add on/off toggles for all exercise types, allowing users to tailor their lessons to their personal preferences. However, I wondered: aside from enabling a user to skip a certain exercise, how can we improve the experience of said exercise so that the user may no longer need to skip it? Guided by this question, I jotted down every idea that came to mind and grouped them according to what user demographic they'd be most beneficial for.
Next, I had to narrow down and select only a handful of features to include in my redesign, so I evaluated these ideas using a value vs. effort matrix. My goal here was to settle on at least one feature for every target group, and ranking them based on user impact and technical feasibility helped me do so.
For example, speech-to-text would certainly make it easier for the hard-of-hearing to answer a verbal question, but that defeats the purpose of spoken language. What I want instead is to provide aids that preserve the nature of the exercise and merely make it more manageable, such as an audio speed slider. This way, we preserve the exercise's learning benefits. It was important to keep context in mind as I went about this, as certain accessibility features made less sense in the context of Duolingo

After some thought, I settled on the following core functions.

04. DESIGN

Results

From Wireframes to Final Accessible Designs

After leveraging my research findings to hone in on core functionalities to implement, I drafted wireframes and my partner, Shahir, presented them to peers to conduct some guerrilla testing. Then, with the feedback to guide us, we transitioned to digital tools and created high-fidelity prototypes of my redesigns. Check 'em out!

Redesign

Inclusive Text Customization

WIREFRAME
FINAL

Approach

To address readability issues commonly reported by users with dyslexia or poor vision, we implemented several solutions. First, we provided a variety of font options including OpenDyslexic, a font specifically designed to be a readable as possible for individuals with dyslexia. Additionally, users can also personalize their font size and weight. Altogether, this comprehensive approach empowers users to optimize the app's readability.

Redesign

Adjustable Audio Playback Speed

WIREFRAME
FINAL

Approach

When it came to listening exercises, there were only two options for audio playback speeds: regular and slow. Users wanted more control over playback speeds beyond these limited options, so we implemented a sliding scale for precise adjustment and tucked it away in the settings page to maintain a clean interface. The rationale behind this is that users will likely only adjust their speed once or twice, so having the slider be immediately visible for every listening exercise is a redundant and inefficient use of space.

Redesign

Tailored Color Grading for Colorblindness

WIREFRAME
FINAL

Approach

To enhance the Duolingo experience for users with colorblindness, we aimed to introduce a form of color customization. I initially considered allowing users to choose from pre-defined color schemes, but after consulting potential users, I pivoted towards implementing color correction modes designed to compensate for certain types of colorblindness. This approach is akin to those found in iOS and Android operating systems and promises greater reliability in addressing colorblindness.

Redesign

Flexible Lesson Plans

WIREFRAME
FINAL

Approach

Ultimately, the recurring theme in this case study is that users want a greater ability to personalize the app to their needs. This was no less the case when it came to lesson plans and learning methods. To give users more autonomy over their lesson plans, we made it a possibility to switch any type of exercise on or off by adding toggles in the preferences page. For added convenience, we also added a playback speed slider under "listening exercises", enabling users to modify it outside of a lesson.
05. TAKEAWAYS
This project was particularly fun because it marked my first time redesigning within an established design system and its constraints. Plus, immersing myself in a project centered around accessibility taught me valuable lessons that will surely stick with me in my future works. sights I'm taking away from this project:

The best designs are driven by empathy and accessibility.

Challenges faced by users with different abilities should be considered early and consistently in the design process, rather than be treated as an afterthought. Besides, by addressing the needs of a specific user group, you often benefit a larger audience as well.

Good designs are adaptable and personalizable.

To make a design inclusive to everyone, it's good to embrace flexibility in design solutions and accommodate a wide range of preferences.

Stay in the loop.

As I did my research for this project, I realized that accessible design guidelines evolve over the years. Staying updated on best practices and emerging technologies is important to continually producing accessible designs.
made by me with <3 and this album