Focusing on the only time that matters.
Gerald D. Hines College of Architecture
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!