marcia lee

here are a few screenshots chronicling the past two months on profiles. the usual disclaimer applies, where pretty much every awesome part is thanks to @jasonrr and @benkomalo…

exhibit a. the first (and thus mildly ugly/embarrassing) screenshot that i could find! from the beginning, we envisioned the new-new-profile page as being a personal and celebratory place, which people could opt-in to sharing with the greater world. we hope that people enjoy morphing their profile into some representation of themselves, proudly rejoicing in their favorite accomplishments.

exhibit b. more moving-things-around. jquery ui was great to prototype the tabs with, although we ultimately moved away from it.

exhibit c. the general structure is looking more and more familiar!

exhibit d. fast forward (many cycles) to today. here is my public profile at http://www.khanacademy.org/profile/marcia! (yes, every over-13-year-old user can claim their own URL!)

exhibit e. a helpful introduction to your new-new-profile page!

exhibit f. one of the neat new ways to customize your space. (a MySpace joke would have been funny here, right?)

exhibit g. the whole point of this is to make ka an enjoyable, engaging, and enriching experience (<– unnecessary adjective usage for alliteration purposes). how will this change behavior, # videos watched, # proficiencies earned, or the amount of awesomeness that a person feels when pondering their education?

anecdotally, user feedback has involved positive excitement and anticipation, and it’s a good sign that people are asking how to find others’ profiles (hint: you can’t right now). watch out for more improvements, like cooler avatars, suggested exercises/videos, and more! feedback always appreciated, whether via email | tweet | carrier pigeon.

ps. we didn’t actually think to claim the “khanacademy” profile url, but i’m glad we didn’t, since someone way more awesome than us has it now. check out his profile here: http://www.khanacademy.org/profile/khanacademy

what a year it’s been at ka! one word comes to mind to summarize the year — growth.

• our team has blossomed from countable on one hand to no longer countable on 2 hands plus 2 feet. if we were a different collection of individuals, quadrupling in size might have been a disaster, but it wasn’t! sure, we’ve had a few existential discussions and moments of ponderous introspection, but what team doesn’t?
• interns++ (they just keep getting smarter!)
• usage++
• press++
• comparisons++ (“we’re ka for _____”, where _____ could be as curious as cooking classes)

but all these plus signs shan’t be mistaken for complacency! there are a hundred million things to change about the ka learning experience. we are not “just videos” nor are we “rote pattern matching”, and the burden is on us to dispel these misconceptions.

hello, 2012.

on your ka profile page, you have an accordion menu to the left, with links:

behold some options for aforementioned links:
#1 — something that we can laugh at now.

#2 — something that we will laugh at in x months.
ka.org/profile/marcia/vital-statistics/focus/last-month

option #1 has a path… and a hash fragment… that has another path… with url parameters… and some portion of that should probably be encoded. …more ellipses… .. . ….. …. …. .and navigating around your profile doesn’t necessarily update the address bar.

option #2 boasts improved url aesthetic/readability/rememberability. clicking on those links still does the right ajax-y thing to bring in the correct graph to the right without a full page reload, but *now* your address bar changes to reflect what you’re actually looking at. and isn’t that what you would expect?

wouldn’t you expect to be able to bookmark the page, or to copy/paste the link, or to control-click the link to open in a new tab, or to refresh the page a gazillion times and See What You Expected To See? hitting the back button takes you back to the thing you last saw, and isn’t that how history should work?

make links work, and make history work. or perish!

fortunately, it took surprisingly few lines of code to transition from #1 to #2, thanks to backbone. i just had to create a router, and let other people’s code do my job. in case you don’t believe how easy it was, i specified some routes like so:

and then i tell backbone to Make It So:

!!!

and the most beautiful thing is that it behaves nicely in internet explorer. since window.history.pushState doth not worketh there, backbone gracefully falls back to a path plus hash fragment like /profile/marcia#/vital-statistics/activity/last-month

this is just one of many interesting nuggets sitting in https://khanacademy.kilnhg.com/Repo/Website/Group/profiles, which will not see the light of production until the new year. more on what we’re cooking up in profiles later.

Anti-intellectualism has been a constant thread winding its way through our political and cultural life, nurtured by the false notion that democracy means that ‘my ignorance is just as good as your knowledge.’

– Isaac Asimov

h/t @jasonrr

Behold, a story in picture form. At the end of this adventure, I hope to have conveyed some sense or feeling about our “process” at KA. But, you can be the judge of that.

We begin on the class profile page, which looks something like this.

How might we take this progress report and make it More Awesome? Say, make it easier for a coach to glean useful and actionable information? Can we show less in order to show more?

Sketch 1. One row, one exercise, different segments’ sizes are proportional to students’ progress. Scan up/down, instead of both up/down + left/right.

Sketch 2. What might happen.

Sketch 3. Get feedback! This is where Jason provides the brilliant idea of some expansion action that drills down and provides detailed student data. A long list of students under struggling or proficient still provides visceral uh-oh or oh-yay feelings. The possibilities are endless! Might you decide here to pair a struggling student with a proficient student?

.

Screenshot 300. Wherein you learn that I have much to learn about CSS.

Closer…

Learning handlebars.

Abiding by our site’s color scheme.

Like a perfectly timed cooking show, look at what we deployed earlier today! This is a real-life class, on the easy exercises, with lots of blue and orange to the right.

The same class on the harder exercises, notice the weight to the left in the bleak gray land of Unstarted.

What happens when you click on a row. The horizontally stacked segments metamorphose into a bar graph of sorts, with all of your students’ names listed alongside.

You can probably see the changes here and there between the screenshots, but I’ve listed some of them below. We have Jason, Marcos, and Matt and their feedback to thank for that!

• left to right ordering of status is swapped
• exercise name moved to the left to reduce vertical space
• shows number of students per segment, unless the segment is too skinny
• shows legend up top to remind you what the different colors mean
• cursor changes to convey “hey-you-click-me!”
• major improvements to the experience of clicking and expanding a row. easeInOutCubic is your friend, as is fading-in in sequence and slower, while fading-out in parallel and faster.
• truncate long student names with text-overflow: ellipsis

Without a doubt, the behind-the-scenes-code-action is also less appalling because of the Bens (Kamens, Komalo, Alpert) and the singular Desmond.

And there we have it, the lightweight collaborative + iterative spiral from idea to sketch to okay to better. I’m excited to chat with some coaches/teachers on Friday, and that’s how we can get from better to best.

Yay!

it is always such a relief to open ie and to see what i expected to see. :: collective exhale ::

there’s been a resurgence of greenpeace canvassers around the neighborhood, and these friendly folk share fun or frightening facts about the world and its imminent demise.

have 30 seconds to save the pandas?

sometimes i politely decline (even though i have nothing against pandas!), and sometimes i listen until the walk sign appears.

today, i saw another canvasser on the corner, and pre-empted him with what i had heard from his canvassing comrade the other day. he was taken aback, but then emoted “right on” with his smile.

i returned to my desk, looked up the veracity of what i had just said, and learned it was off by a factor of 1000.

goodbye!

Drum roll….
https://github.com/marcia/sesame
…cymbals, clash!

When users file issues on Khan Academy exercises, some information (the exercise name, the seed, and the problem type) is also sent so that we can reproduce the errant behavior.

Steps to open the referenced problem from the github issue page:
– Select info with cursor
– Copy info
– Open new tab
– Start typing beginning of “localhost/khan-exercises/exercises”
– Hit tab to autocomplete
– Paste info
– Hit enter

Steps involved with sesame:
– Type “o”

YAY!

P.S. It’s named “sesame” like “open sesame!” I thought my immense wit was obvious, but perhaps not so!

That was so easy! 900+ open issues is not daunting at all!