Khan Academy Site Design Past, Present, and Process

I used the wayback machine to build this quick look back on the design of the Khan Academy site because, even though I’ve been working on the site for nearly a year, I was curious about how the site design had evolved. The homepage screenshots don’t actually do many of the amazing improvements to the site justice, but I hope it gives some cursory sense of the site at different stages.

I chose the word evolution purposefully. When I started working on the site it wasn’t broken by any means. If there’s any pattern or direct influence from me at all, I hope that it’s one of simplification over time. And although it’s been requested in angry emails that usually start off with some variation of “Your site is lame because…”, I have made it an explicit goal to keep the site as familiar as possible to existing users until we are convinced that we’ve got something so much better that it’s worth putting students through the pain of learning something new.

Angry emailers aside, with an organization as complex and ambitious as the Khan Academy hunting simplicity is a real challenge. To illustrate this, here are just a few of the competing priorities that we consider (roughly in order) when we work on the site design:

  • How clearly do we show what the Khan Academy offers students?
  • How easy is it for them to access those offerings?
  • Does the site make you want to explore/learn?
  • Does the site communicate our vision/philosophy?
  • Ditto for teachers/coaches/parents
  • Ditto for volunteers/donors/contributors?

There are a bunch of other priorities that are more temporal or situational, but just those are incredibly hard to balance, and we have to make choices about what’s important. 

Latest iteration: problems, goals, and design decisions

In brief, here are a some of the problems we identified, the goals that we set, and the choices we made to address those goals.

  • The amount of actual content visible on our most common screen size 1200x800, especially when doing exercises was too limited. On the knowledge map, this is really problematic because of the nature of the map interface. Some users actually thought we had far fewer exercises than we really did.

    Maximize visible content especially on exercise dashboard and exercises

    Design Decision:
    Shrink navigation (weighed in at ~160px tall). Navigation is important for obvious reasons, but students spend lots of time on a single page without using navigation, and it was unreasonably hogging screen real estate.

  • Click tracking over an extended period of time showed us that people were finding the homepage content mushy (people were clicking lots of different places in an attempt to perform the same action). They were coping, but we want to make it clearer.

    Goal: Make call to actions more clear/obvious

    Design Decision:
     Increase visual contrast. Came in the form of reserving gradients and 3D-ness for actions  (and removing it from the header). We also reduced the number of colors used on the site for various things. For reasons that we’re working to correct, we’d wound up sorta testing 41 shades of blue except by accident.

  • Observing new users working on exercises, we could see some users having a hard time visually parsing the page. Couldn’t find help stuff, etc. 

     Reduce visual noise where we can. Try to keep emphasis on key interface elements.

    Design Decision: Avoid major changes to UI, keep existing logical groupings, but try to make the whole thing a little simpler and shift emphasis to key pieces of UI.

In addition to these revisions to the design of the site, our amazing summer intern class also released a bunch of features that work hand-in-hand with the new design. If  you use the site regularly, please let us know what you think in the comments (Please be nice/constructively critical. We’re all friends here, right?). Not a regular user? I encourage you to give it a try and report back.

Process note: Fire and motion is for designers too

Almost every post on a specific design effort on this blog ends with a musing about the future. It’s my spasmodic attempt to give some sense of where we’re headed because as I write each post we already know more about our students than we did the day before. We’re currently measuring the impact and effectiveness of the changes I outlined. Most of the data, and user reactions are really good. We have found some things that didn’t work out as well as we’d hoped, and they’re on our list for the next iterations. 

I’m hopeful that sharing this information is helpful not only as a means of explaining why we change things or make specific choices, but also to uncover some of the less popularized bits of the craft of design. I know that to this day when I hear the word designer I still imagine some cool looking guy slaving away at a drafting table surrounded by beautiful things making something artistically wonderful.

Don’t get me wrong, there is real artistry in design, and I when I see it makes my heart happy. But the designers that I’ve come to really admire are the ones that seem to hold the view that unlike art, design is a craft that produces things that necessarily exist with purpose. The belief that the things designers make are there to communicate, to activate, to persuade, to facilitate, to change or organize the world for another human being. And that these things exist in context with the people that will use them or see them.

As a designer working on software, especially web software, I’m allowed an nearly unprecedented ability to fire and move: to conceive of something, build it, see how well it works, and then change it to make it better. To get closer to Khan Academy’s users and better understand what they’re trying to accomplish and help them do that. To see the thing I’ve designed used in context and be able to change it to make existing and future more successful. And this process isn’t just an artifact of agile web development. There’s strong evidence that even designs that people think of as iconic, as coming into existence fully formed, are really products of the same process

If you’re still reading at this point, I admire your tenacity! You might be interested to know that we’re actually hiring people to help us with this.