Redesigning Khan Academy for busy folks.
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:
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.
Next I interviewed people who have taken Massive Online Open Courses, plus an experienced teacher to hear the perspective of someone who creates courses.
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:
This was enough research to construct a basic persona with:
Next, I determined the product definition and design goals:
To better frame things in context, I also created a quick storyboard:
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.
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.
Below is a diagram of how the information was organized in 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.
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.
Now knowing how the app would be organized, I quickly sketched the layouts for each screen.
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:
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.
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.
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.
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 email@example.com. I'd absolutely love to hear from you :). Cheers!