Redesigning Khan Academy

Overview

This project is to redesign a website of Khan Academy, a non-profit educational organization offering a variety of free online courses, to make it accessible to people who are blind and use screen readers. It is an individual project in User Experience Design class taught by Regine Gilbert at NYU in 2020 Fall semester.

Problem

People who are blind and use screen readers have trouble with navigating the Khan Academy's website and understanding its educational contents.

Solution

Redesigning the Khan Academy's website with a focus on navigation and educational contents. Due to limitations of resources and time, I focused on the first two lectures of the Intro to HTML course on the Khan Academy, instead of redesigning the whole website.

Deliverable

I published two web pages, Welcom to the web and HTML basics, aiming to improve the screen-reader accessibility. The followings are some of my major design decisions.

Features

Added Report Accessibility button: This is a must-have to hear user feedback.
Stop video autoplay: The video autoplay is a bad practice for accessibility according to Success Criterion 1.4.2 (Audio Control) on WCAG 2.1.

Landmarks

Added three sub-regions to the Content Information - (1) Lecture contents region, (2) Discussion forums regison, and (3) Report accessibility region. This serves two purposes. First, separating the lecture contents from the discussion forum will improve usability because they serves different purposes. Second, users will be able to notice the report accessibility feature easily.

Headings

Removed all the headings that are not relevant to the lecture contents, such as headings related to the landmarks. This is to simplify headings so that users can focus solely on the lecture contents.
Added sub-headings to the lecture contents. Before my redesign, the only heading relevant to the lecture contents was for the lecture title and it was impossible to get a detailed structure of the lecture content.

Design Process

Persona

Erik is 18 years old and has been blind since birth. He just graduated from high school and is enjoying a break before starting college. He likes web browsing with his Mac laptop and VoiceOver and, while web surfing, he accidentaly found the Khan Academy website. So, he decided to use the break to study web development, something he had always wanted to do but never had the opportunity.

Storyboard

Scene 1: Erik is a high school student in Brooklyn who loves to srudy. He is blind and uses a screen reader on his laptop computer. Scene 2: Because of the COVID-19 pandemic, his school is now closed. He is disappointed that he cannot take programming classes he was looking forward to. Scene 3: He looks for free online programming classes and is excited to find Khan Academy. Khan Academy offers a variety of classes such as Math, Physics, History, and of course, Programming. — Storyboard Scenes 1 through 3

Scene 4: From the top page of Lhan Academy, he can easily navigate himself to the programming class with his screen reader. He feels it's a good start. Scene 5: He chooses the class, Intro to HTML/CSS: Making webpages. He is so excited imagining he can make his first website. Scene 6: The first lecture appears to be a video. He can't see the picture, but he manages to understand the content to some extent. He feels ok yet. — Storyboard Scenes 4 through 6

Scene 7: The next lecture is not a video but a text with some images. But he can't understand the content fully because the important parts are explained in the images and they are not well described in the alt text. Scene 8: He begins to feel uneasy that the Khan Academy might not be accessible to the students who are blind like him. He moves on the next lecture with anxiety. Scene 9: Next up is the quiz. There seem to be three options, but the content is hard for him to read on his screen reader and he can't really take the quiz. Now he does not know what to do. — Storyboard Scenes 7 through 9

Scene 10: From the three lectures, he can te;; that Khan Academy is not inclusive to him. With sadness in his heart, he left the Khan Academy. — Storyboard Scene 10

Journey Map

Explaining Erik's journey with 6 elements: User phases, User actionts, User's feeling, Emotional Curve, Opportunities, and Ideas. — Journey Map (see journey map in a larger image)

Secondary Research

Academic papers

Past research analyzed and evaluated the accessibility of various online education services and some also suggested possible improvement. There are many but here are some of the papers:

Online resources

I could know the experience of people who are blind by some resources online resources. There are many but I list some below:

Primary Research

Conducted interviews with two participants who are blind to know their experiences with online education services.

Competitive Analysis

I checked the screen-reader-accessibility of some online education services to compare with Khan Academy; Coursera, EdX, Udemy, and FutureLearn.

Feature Prioritazaion

I used Now-Next-Later method.

Now section has two groups: web accessibility and lecture contents. Web accessibility has five items: accessible page structure, accessible web navigation, accessible website, consistent UI for overall lectures, and labeling to icons. Lecture contens has five items: accessible contents, accessible online code editor, stop video autoplay, image description, and video description. Next sectino has five items: accessible user feedback, show transcript, course navigation, interaction with other students, share help feature. Later sectino has five items: screen reader mode, disability registration, user registration, offline mode, transcript download.

Wireframe

User Testing

To evaluate my prototype, I was able to conduct user testing with one college student who is blind since birth. He was really excited to see the accessible structure and contents of the lecture, saying It's so easy to navigate and use with screen reader. I can see navigate areas and headings on the main text. Headings make me access to the lecture very easily. But he also mentioned about the area of improvement, saying It would be better if the visual materials are provided as text I can access with lecture script.

Limitation and Future Work

Based on that feedback, in the future, I would like to work on making visual contents and visual explanations accessible in words. For example, there are sentences in the lecture video saying This one is the start HTML tag, and then at the bottom there's this end HTML tag, and Let me change the title. Maybe you can actually see as it changes above. But users with visual impairments would have no idea what is going from such sentences.