Khan Academy Redesign

90 points by woan 15 years ago | 20 comments

duopixel 15 years ago |

While the new design is better visually, it follows a trend that I've seen the past few years and that I don't particularly like: it dedicates almost all of the real estate trying to convince you that the Khan Academy is great, while downplaying the videos which are the actual content of the site.

This is fine for an app or content that is behind a "registerwall", because you must convince the user that registering is worthwhile. But in the Khan Academy the courses a freely available. Instead of presenting me a video of Sal chatting with Bill G on the stage of TED, I'd prefer a video that is likely to expand my understanding of the universe.

jasonrr 15 years ago | |

Totally fair criticism. Like any design effort, it represents a careful priority balancing act. The Khan Academy is trying to do a lot of things, and communicating that effectively is a challenge. For example, not everyone is as knowledgeable as you are about what the Khan Academy offers and why they should care. The good news is that people don't have any trouble finding the videos, so I don't think the design is causing too much damage from the perspective of getting to the content you want.

That said, the sketches/mockups that led us to the current iteration of the design also included both the idea of featured content in the main video carousel and different homepage content for users who are signed in. They didn't make the cut yet, but we haven't forgotten about them.

Ultimately, I agree that we want to make it as efficient as possible to get to the content you want quickly, and I don't think we're there yet.

neovive 15 years ago | | |

Great job on the redesign. I've been following Khan Academy for a long time and the new design is great leap in usability and the playlist feature is excellent. The old site required a lot of in-browser searching and definitely was not as appealing to younger audiences.

BTW: Sal's TED talk was very inspiring and really demonstrated the amazing potential of his work. It's great to see all of the recognition and support he is receiving and the excellent team now in place. His talk even inspired me to start blogging about Education last month -- see the first post on Education2.org [http://www.education2.org/2011/03/welcome-to-education2-org].

rubergly 15 years ago | |

One of the complaints I've recently seen pop up consistently regarding Khan Academy is something to the effect of "Why should I trust this one guy? What does he know?" Prominent displays of Bill Gates helps to convince a random visitor of the site that, yes, this is a big deal and is someone you can trust, which is something a visitor otherwise couldn't possibly know until watching and carefully critiquing several videos. The wall of links is definitely important, especially the "wow' factor of the overwhelming number of videos, but without the proper context, that list of videos could look like a content farm, and a visitor might never be convinced to click through several links in order to see how legitimate they are.

barmstrong 15 years ago |

JQuery mobile seems like an awesome way to get both iPhone and Android support in one fell swoop.

It's still not quite as good as a native app, but it seems like you're getting 90% of the benefit with about 10% of the work. For a dev team strapped for resources it seems like a good option.

te_chris 15 years ago | |

Best thing is, combine it with PhoneGap and you've got a "native" app store submittable app quickly.

zitterbewegung 15 years ago | | |

I have heard the performance of using PhoneGap versus a native android app is quite noticeable. YMMV

Raphael 15 years ago |

I would strongly recommend a black background to go with the blackboard theme of the videos. (Alternatively, switch to whiteboard visuals). It would blend so nicely. Also, the blackboard animation should be in a smooth vector format instead of blurry compressed, bandwidth-intensive videos. Now for words and symbols, I recommend text. You can easily time-release it with JavaScript. For diagrams, maybe something like Graffiti Markup Language. http://www.graffitimarkuplanguage.com/about/

rubergly 15 years ago |

The design looks very slick, and I'm very impressed.

My one complaint is that it seems wrong to have a pseudo-hover state for the entries in the lists. I don't know what standard practice is in mobile web interfaces, but it seems strange that scrolling causes elements to look selected because you have to hit a point in order to start scrolling.

marcomonteiro 15 years ago | |

I noticed that too and wondered if it was by design or a bug in the implementation. I haven looked at the source though so can't answer knowledgeably.

ryanpetrich 15 years ago | | |

It's a side effect of the way iOS implements scrolling--as soon as scrolling starts the web content is "frozen" and only resumes once the scroll is complete. Only way around is to imitate the native scroll using CSS and JavaScript.

tybris 15 years ago |

You can never have enough pictures of Bill Gates.

roryokane 15 years ago |

Clickable link: http://www.khanacademy.org/

I had expected that the image of the redesign would link to the main page, but annoyingly, it does not, nor is there a link anywhere else in the article.

jasonrr 15 years ago | |

Good point! Fixed it in the main article too. Thanks.

krosaen 15 years ago |

fwiw the khan academy runs on app engine and is open source:

https://sites.google.com/a/khanacademy.org/forge/for-develop...

pretty easy to keep up with the progress by running it locally and occasionally syncing.

one note: on my nexus one, the back button in the upper left of the mobile site doesn't work. specifically, after clicking on one of the list items, sliding to the right, I can't go back by hitting the button on the upper left.

albahk 15 years ago |

Logo looks very similar to the Banyan Tree Logo. Banyan Tree is a very famous luxury brand in Asia.