work /
Khan Academy Redesign
A brief redesign of the Khan Academy mobile app.
Design Challenge
Scott Liang
The following is a quick redesign of Khan Academy focused on the needs of Debbie, a busy student who fits in supplemental learning during small openings in her schedule (for example, while riding the subway).
An interactive prototype can be found here: https://sketch.cloud/s/8VR5a
Bite-sized opportunities are illustrated in this 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 skipped 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.
To view the interactive prototype, click here.
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!
