work /
Khan Academy Redesign
work
ux design
No items found.

Redesigning Khan Academy for busy folks.

context /

Design Challenge

team /

Scott Liang

Challenge Accepted!

Not long ago, I received a design challenge with the following prompt: within three days, choose an existing digital product and redesign it for a Chinese audience.

Woah! Any product? A Chinese audience? WeChat who chat? After scratching my head for a hot minute, I decided: OK. This is pretty vague and I know hardly anything about Chinese folks (nor can I read the language). But at the very least I can learn about a Chinese person and design for her. Due to my longtime appreciation for their work, I selected the Khan Academy iOS app to redesign.

What ensued was a wonderfully rich learning experience where I learned about Chinese apps and expectations, MOOCs, and pedagogy. If you'd like to skip to the end product, feel free to check out the following link:

https://sketch.cloud/s/8VR5a

Research

The first person I interviewed was Vicky (name tweaked for anonymity), who grew up in China before recently moving to NYC. I used her description of life back home as the basis of my target demographic.

WIth her I focused on learning about the patterns of usage for Chinese digital products, as well as the trials and tribulations of metropolitan Chinese youths. An example question I asked was: Have a look at your home screen. Which Chinese apps do you frequently use? Please open one and walk me through the last time you used it, describing your thought process for each action.

Key findings are in red

Next I interviewed people who have taken Massive Online Open Courses, plus an experienced teacher to hear the perspective of someone who creates courses.

Key finding are in red

I also investigated a number of Chinese apps to get a sense of the differences between Chinese and Western products. I'd like to share the learnings in another post, but for now a few notable points include:

  • Chinese digital products trend towards "super apps" with massive feature sets (i.e. WeChat).
  • The information density of written Chinese is far greater than that of English.
  • On the flip side, input is difficult so there is a large emphasis on stickers and voice messages.
  • It's all about freemium. Even bike-sharing companies provided bikes for free until they achieve market dominance.
  • Copying is not plagiarism. Mimicking another product (down to the pixel) while adding an extra feature is considered to be innovation.
  • QR codes have gained widespread adoption.
  • You cannot escape the little red notification dot. AAAHH!!
  • UIs are very bright and can frequently be customized by tapping a t-shirt icon.
  • Social features abound. They are expected in just about every digital product.
  • Gamification and user rankings are very common.
  • Most content is downloadable due to deficiencies in mobile internet.

This was enough research to construct a basic persona with:

It's Debbie!

Next, I determined the product definition and design goals:

This helps convert Debbie's goals into the app's goals

To better frame things in context, I also created a quick storyboard:

Small moments in the day are available for learning, e.g. when riding the subway

Ideation

Some of the ideas that I had included a card-based swiping layout, a Duolingo-style game progression system, total integration with WeChat, and a Kindle-style resume feature (more on this later). I was particuarly interested in creating a review module that employed spaced-repetition techniques to help you retain information as you went along. Spaced-repetition is based on the observation that you remember things better when you work harder to recall them. So if you learned, say, the capital of Brasil today (hint: it's not Rio, it's Brasilia!), KA would review it with you tomorrow so that it stuck a little better. A couple of days later, just as it begins to fade, KA would then review it once more. In this sense, the app would "do the studying for you" and save time overall.

A few of the more concrete ideas

I couldn't figure out a way to implement the spaced-repetition methods without dramatically reformatting Khan's content, so shelved it in favor of optimizing the UI for frequent, spontaneous usage.

Information Architecture

Below is a diagram of how the information was organized in the original Khan Academy.

Information Architecture of the original Khan Academy

Notice how each of the Explore, Search, and Bookmarks tabs contained their own Lessons content (videos, articles, and exercises). This made navigation a mess. It forced you to remember which tab you were in to resume your last session—and worse, forced to you to navigate back through all of your previous Lessons to return to a Course list.

The original Khan Academy's clunky navigation

Below is the the information architecture of the redesigned Khan Academy (new or modified elements are in red). The most important thing to notice is that Lessons have been split into their own dynamic view. Think of it like how your most recently-read book in the Kindle app flies in from the bottom, or how the "currently playing" view works in Spotify. Your most recently viewed Lesson track can now be acccessed at any time from the Resume button in the tab bar, making starting where you left off as easy as a single tap.

Additionally, I moved Bookmarks to the first tab to make repeat usage easier (starting with Explore only makes sense when opening the app for the first time), tucked search into the Explore view, and created an entirely new Discussions view.

‍Lessons now occupy their own dynamic view, much like your books do in Kindle

Wireframes

Now knowing how the app would be organized, I quickly sketched the layouts for each screen.

Quick sketches of the screen layouts

Prototype

I then moved on to high-fidelity prototypes. I'd normally create low-fi interactive wireframes to test usability before this stage, but had to skip it due to time constraints. Nevertheless, here's a fleshed-out prototype for you to click through:

https://sketch.cloud/s/8VR5a

Below are the key screens for Khan Academy 2.0. The first three depict quality of life improvements for the Bookmarks, Course Contents, and Explore views. Notice how the tab bar has been reorganized and how Search has been moved to the Explore view.

Bookmarks, Course contents, and Explore

The next three screens depict a revamped Lessons view. Lessons now fly up from the bottom when the Resume button or Course list items are tapped. Under the About segemented control is a horizontal Course progression bar (I found this to be more useful than a list of video thumbnails, which are usually vague black rectangles, anyways). And underneath that is the transcript, which can be scrolled and tapped through with your thumb to navigate the video. The brand new Discussions segmented control provides Q&A functionality that is presently only available on the Khan Academy website.

The revamped Lessons view

Lastly, the following three screens depict a brand new Discussions view (for easy access to your questions and answers) and a tweaked Profile view. The added Streak element is well-suited for the short, spurt usage that Khan Academy 2.0 is redesigned to accommodate.

The new Discussions view and tweaked Profile

To view the interactive prototype, click here. I also translated it to Chinese here, but quickly realized its inadequacies due to how dramatically more information-dense written Chinese is.

Feedback Welcome!

That's all I could get done within the time allotment. But boy, was it a fun an enlightening experience. If you have any ideas or feedback, please feel free to reach out at hello@scottliang.com. I'd absolutely love to hear from you :). Cheers!