Overview
As a passionate designer, I firmly believe that prioritizing accessibility is integral to crafting exceptional mobile apps. It guarantees legal compliance, elevates user experience, and boosts marketability. Accessibility design is a win-win for all users, fostering a user-friendly and inclusive product. That's why I am thrilled to showcase my case study on enhancing the accessibility of Duolingo's mobile app. Through this endeavor, I aim to exemplify my unwavering commitment to creating accessible and impactful product designs.
Why Redesign Duolingo
I love Duolingo! As a travel enthusiast, I truly enjoy learning new languages with Duolingo and would love to redesign my favorite language-learning app to better understand its product.
Educational purpose: Duolingo strives to make education fun and accessible irrespective of abilities. Enhancing app accessibility ensures equal opportunities for users with disabilities to learn new languages alongside their peers.
User challenge: The app's interface, which includes text, images, and audio, can pose challenges for users with visual, auditory, and cognitive disabilities. By redesigning the app for accessibility, designers can ensure that users with disabilities can use the app effectively.
Legal Compliance: Accessibility is a legal requirement for digital products in many countries. By performing an accessibility audit and redesigning the app, designers can ensure that the app complies with legal regulations.
Brand Reputation: Improving the accessibility of the app can enhance Duolingo's brand reputation and demonstrate the organization's commitment to inclusivity.
Problem
Duolingo is a highly acclaimed educational app renowned for its innovative approach to language learning, providing an extensive array of 39 languages for users to explore. Nevertheless, there exists an opportunity to elevate its accessibility for visually impaired users. While users with auditory impairments can conveniently disable listening exercises, visually impaired individuals heavily rely on the integrated VoiceOver technology. Enhancing the user experience could be achieved by improving action context and enhancing text contrast in the learning exercises. By proactively addressing these accessibility concerns, Duolingo can strengthen its reputation for inclusivity and ensure that all users can actively engage in their language-learning journey.
Solution
In response to users with visual impairments experiencing difficulty using Duolingo's mobile app, my focus was on designing with accessibility for the users with visual impairments in mind. I began by conducting a comprehensive assessment of Duolingo using VoiceOver, identifying areas that required improvements in accessibility. Based on my analysis, I proposed several redesigned solutions for the most commonly encountered screens in Duolingo, ensuring compliance with WCAG 2.1 accessibility guidelines and enhancing overall accessibility for all users.
Role
Figma
VoiceOver
Tools
Figma
VoiceOver
WCAG 2.1
Process
Research
Assessment
Redesign
Next Steps
Retrospect
1.1 User Feedback
To initiate the project, I began by gathering online feedback from users on Duolingo's accessibility, as well as their expectations and requirements for the app. Through this process, it became evident that accessibility was an area of concern that required attention. The anonymous comments and feedback of Duolingo revealed some users' concerns and helped me better understand the needs and preferences of Duolingo's user base. I was then able to focus my efforts on improving accessibility and ensuring that the app met the needs of all users, regardless of their individual abilities.

Key Findings
Users with visual impairment often rely on VoiceOver technology to navigate through the app. (Learn more about VoiceOver here, or watch this video by Apple on VoiceOver!)
Users with visual impairment and who use VoiceOver expressed the need for additional context to assist with language learning.
Insufficient color contrast and small text size can make it difficult for users to read and understand the content.
2.1 Accessibility Audit
Using VoiceOver, I navigated the app to conduct an accessibility audit. While successfully completing beginner Japanese lessons, I encountered several opportunities for improving accessibility in accordance with the WCAG 2.1 guidelines:
Enhance readability by improving contrast ratio and enlarging text sizes.
Ensure effective content detection by VoiceOver by providing explicit object names.
Enable VoiceOver to accurately read the information by refining overlays to avoid confusion.
Facilitate efficient and effective comprehension by enhancing action context within lessons
2.2 More "Perceivable" & "Operable"
The four screens I chose to annotate are frequently seen across Duolingo's mobile app. The first set of screens is presented during language learning lessons, and opportunities to enhance compliance with the "Perceivable" and "Operable" principles of the WCAG accessibility guidelines include:
Enhancing readability and comprehension, the low contrast ratio poses challenges in reading and comprehending the content.
Facilitating seamless navigation using assistive technology, the grouping of chat bubbles and images in the bird and man Comic page (Screen 1) can be further optimized.
Ensuring improved accessibility, the overlay design in the Incorrect Screen (Screen 2) can be made detectable by assistive VoiceOver technology.

2.3 More "Understandable" & "Robust"
This second set of screens below is presented at the end of the learning lessons, providing users an opportunity to review learning scores and engage in discussions with others regarding lesson content. Opportunities to enhance compliance with the "Understandable" and "Robust" principles of the WCAG accessibility guidelines include:
Enhancing comprehension by addressing low contrast ratios and small text sizes.
Providing text descriptions for each badge on the Lesson Complete page (Screen 1) to support users relying on VoiceOver technology.
Ensuring detection and seamless interaction with the upvote and downvote buttons on the Discuss page (Screen 2) for users with visual impairments.

3.1 WCAG 2.1 as Redesign Principles
After conducting the heuristic analysis and before beginning any redesign, I took a pause to review and remind myself to focus on designing based on the four main principles of WCAG accessibility standards to create a more inclusive, accessible, and user-friendly language learning experience.

3.2 Redesign




3.3 Optimizing for VoiceOver: A Comparison of Before and After Content Readability
To ensure a seamless user experience, I took into account the reading behavior of VoiceOver and restructure the information hierarchy accordingly. Below are comparisons of the VoiceOver's reading behaviors before and after the redesign. Yellow numbers indicate VoiceOver's reading order.
Less Negligence, more "Operable"
Before: The placement of the dialogue bubbles may lead to VoiceOver users' confusion.
After: Repositioning the dialogue bubbles allow VoiceOver to detect the left bubble first, reading the screen in a logical order for users with visual disabilities.

Less Uncertainty, more "Robust"
Before: As user selects the incorrect message, VoiceOver continues to falsely observing and reading aloud the background hiragana cards (yellow numbers 5 and 6).
After: Incorporating a taller overlay with a higher contrast ratio from the background, alongside correct and incorrect answers ensure VoiceOver receives sufficient context to understand the screen.

Less Obscure, more "Understandable"
Before: VoiceOver only reads the title and numerical value of each badge after identifying the title "Lesson Complete," leaving users to have to guess the meaning of each badge.
After: By providing a description of each numerical value, the redesign enables VoiceOver users to better comprehend the screen's context.

Less Hidden, more "Perceivable"
Before: The low contrast and incorrect component labeling forbid VoiceOver to detect the upvote and downvote buttons under each comment.
After: By improving the contrast ratio and rearranging the upvote button to the left of the number, VoiceOver now reads the information in an order that is easy for users to comprehend.


4.1 Measuring Redesigns
I acknowledge the importance of measuring KPIs. Here are the metrics that I would have measured to evaluate the impact of my redesigns if I had the necessary resources.
Quantitative Metrics (Traffic & Engagement)
Number of new and returning users
Amount of time spent on the app
Net Promoter Score
User error rate
Use of search vs. navigation
Task time and learnability
Qualitative Metrics (User Feedback & Satisfaction)
Task level (ex: single ease question, NASA’s task load index)
Test level (ex: SUS, Standardized User Experience Percentile)
User interviews, polls, and surveys
Focus groups, facilitated discussions
User forums (ex: Reddit, Quora)
In-app user feedback
WCAG Compliance
Looking Back
After reflecting on my redesigns, I hope I had the opportunity to interview individuals with visual impairments to better understand their experiences using Duolingo. Nonetheless, my work provided valuable insights into the effective use of VoiceOver technology, the importance of proper information hierarchy and ample context, and sufficient contrast ratios to enhance readability and usability for users with low vision. This experience further emphasized the critical role of accessibility in creating an inclusive and user-friendly product.
Moving Forward
This project has deepened my understanding of the significance of accessibility in the design process and reaffirmed my commitment to creating products that are inclusive to all users.
Given more time, I would have been delighted to conduct usability tests with people with visual disabilities and measure the success of my redesign with metrics such as user error rate, use of search vs. navigation, and learnability, just to name a few. I would also conduct a competitive analysis of other online learning applications to better identify accessibility design opportunities for Duolingo!