work /
Telling Time
work
industrial design
misc

Focusing on the only time that matters.

context /

Gerald D. Hines College of Architecture

team /

Scott Liang

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!