Redesigning Duolingo to be more accessible for users such as the learning, hearing, and visually impaired.
Team
Sarah Kwakkelaar (Research, Ideation, Design) Shahir Ahmed (Research, Testing)
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
Despite being the most prominent language-learning platform, Duolingo falls short of accessibility standards.
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
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
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
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. KEY 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.