Skip
Current Issue
This Month's Print Issue

Follow Fast Company

We’ll come to you.

2 minute read

Old-Fashioned Libraries And Handwritten Notes: Learning With Khan Academy’s New iPad App

The free online education platform reveals how its redesigned app came to be.

  • <p>For its revamped iPad app, which has a new, streamlined look, Khan Academy's engineers and designers took inspiration from two decidedly old-fangled sources to help shape its navigation and input design: public libraries and paper scratch-pads. The result is a grid-based layout that displays subject areas like science (aka breadth) from top to bottom and topics like biology and chemistry (aka depth) from left to right.</p>
  • <p>“In our old app, it would sometimes take you eight taps to get down to a third level” where lessons reside, says Matt Wahl, product manager. With the new app, “all of our content is accessible to you in two taps or less.”</p>
  • <p>Khan has also taken steps to tailor parts the interaction design specifically to the iPad. When it comes to math exercises, the iPad app diverges from the browser in an important way that takes advantage of the tablet’s touch screen.</p>
  • <p>A friendly monster guides students through their lessons, and rainbow confetti erupts on screen when students submit correct answers, functioning as a reward mechanism for their progress. “We really want to celebrate the moments of learning,” Wahl says of the animations.</p>
  • <p>A Early brainstorm phase</p>
  • <p>B Early wireframe</p>
  • <p>C Early wireframe 2</p>
  • <p>D Early wireframe 3</p>
  • 01 /08

    For its revamped iPad app, which has a new, streamlined look, Khan Academy's engineers and designers took inspiration from two decidedly old-fangled sources to help shape its navigation and input design: public libraries and paper scratch-pads. The result is a grid-based layout that displays subject areas like science (aka breadth) from top to bottom and topics like biology and chemistry (aka depth) from left to right.

  • 02 /08

    “In our old app, it would sometimes take you eight taps to get down to a third level” where lessons reside, says Matt Wahl, product manager. With the new app, “all of our content is accessible to you in two taps or less.”

  • 03 /08

    Khan has also taken steps to tailor parts the interaction design specifically to the iPad. When it comes to math exercises, the iPad app diverges from the browser in an important way that takes advantage of the tablet’s touch screen.

  • 04 /08

    A friendly monster guides students through their lessons, and rainbow confetti erupts on screen when students submit correct answers, functioning as a reward mechanism for their progress. “We really want to celebrate the moments of learning,” Wahl says of the animations.

  • 05 /08

    A Early brainstorm phase

  • 06 /08

    B Early wireframe

  • 07 /08

    C Early wireframe 2

  • 08 /08

    D Early wireframe 3

Khan Academy has helped to usher education in the 21st century, with thousands of videos and exercises in math and other subjects available for free online to students of all ages. But for its revamped iPad app, which has a new, streamlined look, the new-fangled nonprofit’s engineers and designers took inspiration from two decidedly old-fangled sources to help shape its navigation and input design: public libraries and paper scratch-pads.

"When I was a child I loved visiting the library," says designer May-Li Khoe. "I wound up being homies with the local librarian, who got to know me really well and got to know the kind of books that I was into. What was really special about that experience is that she didn’t hide the library from me; I felt very empowered by the fact that I could walk around and come across something. But she knew me well enough that when I went every week she had a stack of books picked out just for me."

That philosophy of simple navigation paired with tailored recommendations gave the iPad team a solid foundation as they began mocking up ideas. The result is a grid-based layout that displays subject areas like science (aka breadth) from top to bottom and topics like biology and chemistry (aka depth) from left to right.

"The breadth is very clearly vertical, the depth is very clearly horizontal," Khoe says. That framework repeats on both the home page and topic pages, lending consistency to the user experience.

It also has the added benefit of quickly delivering users to Khan Academy’s trove of content, which includes 5,000 videos and 150,000 exercises.

"In our old app, it would sometimes take you eight taps to get down to a third level" where lessons reside, says Matt Wahl, product manager. With the new app, "all of our content is accessible to you in two taps or less."

Khan has also taken steps to tailor parts the interaction design specifically to the iPad. When it comes to math exercises, the iPad app diverges from the browser in an important way that takes advantage of the tablet’s touch screen. Thanks to handwriting recognition built into the app, students can now write their answers by hand, in addition to doing scratch work in a notes area alongside each problem. That small change improves the experience by a degree of magnitude, says Wahl—and at the same time brings Khan Academy in closer alignment with new research on the relationship between handwriting and learning. A study from last year suggests that handwriting helps make learning easier.

"When we write, a unique neural circuit is automatically activated," psychologist Stanislas Dehaene told the New York Times. "It seems that this circuit is contributing in unique ways we didn’t realize. Learning is made easier."

That said, Khan Academy hasn’t gone completely vintage. A friendly monster guides students through their lessons, and rainbow confetti erupts on screen when students submit correct answers, functioning as a reward mechanism for their progress. "We really want to celebrate the moments of learning," Wahl says of the animations.

And in the same way that Khoe’s childhood library found a way to serve patrons of different ages and backgrounds, Khan Academy hopes that its diverse student audience feels similarly at home.

"We walk that fine line of being welcoming and having a personality but not isolating anybody with the visual language," Khoe says. "This particular design direction was chosen with that in mind."

Khan Academy’s updated iPad app became available in the App Store earlier today.

loading