Khan Academy

Exercise Redesign

The Problem

On Khan Academy, exercises were demotivating for students because they had to get N-in-a-row correct in order to move on. N-in-a-row was a good way to test for student mastery, but not a great mechanic for practice.

This is the old exercise UI.
This is the old end of task card. Students didn't feel rewarded after they completed an exercise 😔

The Proposal

The leadership team gave us the following proposal to work with because they wanted to solve this problem within the span of two months! If given more time, our team would have wanted to conduct additional research about the pedagogy behind good practice mechanics.

  1. 1. Change the exercise mechanics to Do-N
  2. 2. Allow students to move on if they're stuck
  3. 3. To complete an exercise, a student must receive 70%

The Question Indicator

To start, I decided to tackle (#1) change the exercise mechanics to Do-N. In order to change the exercise mechanics, I had to rethink the question indicator, a persistent bar that shows correctness/incorrectness. The old question indicator was designed for a non discrete number of problems. Below are various explorations:

We went with column C because it flexes for mobile and also shows a discrete number questions. We wanted students to be able to easily count how many more questions they had to complete!

Skipping Questions

Next, we needed to allow students to move on if they're stuck (#2). In the old experience, students had to keep trying a question until they got it correct.

In the new experience, we wanted to encourage students to Try Again, but we also didn't want to force them to. Below, you'll notice that "Or move on to the next question" is less loud than "Try again"!

A Celebration!

Finally, we needed to communicate that receiving 70% means you completed the exercise (#3)! In addition, we wanted to make the entire experience feel rewarding. Here are some initial celebratory iterations:

Below is an iteration for showcasing growth. We wanted students to reach at least 70% and strive for 100%.

Although this exploration showcased growth, students found it difficult to understand how to get completion. Students really wanted to know how many more questions they needed to get right.

We went back to the drawing board and looked at the entire flow. In the content library, all exercises are denoted with a star icon. When the exercise is completed, the icon turns blue!

We brainstormed ways we could tie the star, a display of completion, with the question indicator, a display of correctness!

The explorations above didn't test well with students because we reorder of the question dots. We also tried to use motion, but students were still confused by the dot becoming a star.

Here's the final end card. We decided not to reorder the dots from correct to incorrect, so that it more clearly mapped back to the question indicator. The dark blue background made the green seem more fun and rewarding! Furthermore, only the star fills in when a student reaches 70%. In order to fill the ring and get confetti, a student has to get 100%!

Next Steps

This project was successful in optimizing for practice in the library, but now we want to create a system that allows students to demonstrate mastery




Workshops & Talks

Intro to

Graphic Design

Khan Academy


Review Game