Examples of mockups, designs, and iteration

Last modified: April 18, 2012

See Design Iteration at Khan for more information about our process of iterating before we code.


  • A new report for teachers
    • Marcia's blog highlights how simple sketch iterations helped create a brand new report out of thin air.
  • Concepts for core profile page
    • An initial layout for the trophy case, avatar, and more.


Mockups with lightweight functional descriptions

  • Class lists / Study groups
    • Desmond used this spec to lay out the ability for coaches to split their classes into multiple lists of students.
  • Video discussion
    • This older mockup (warning, eyeballs are in danger of old logos and layouts) preceded v0.1 of below-video student communication.

Very simple mockups and nothing else

  • New and Noteworthy
    • Jason mocked this up before we introduced "New and Noteworthy" featured videos and exercises on our homepage.

Perhaps the wrong way to go about things

  • Badge spotlights
    • For badge spotlights to integrate into opengraph, marcos started off with a bunch of ideas, the first being the passport which he had recently seen here
    • still running with this idea, marcos doodled this and liked it
    • then went into illustrator and started off with a sketch of a few treatments
    • But... this was sort of unsustainable and visual scope creep (we can't make a whole new badge metaphor overnight!) where did these tear-offs come from? and also, look at how much prettier the doodly idea was before (maybe i'm just really bad at illustrator). Still, i wanted to see it through (argh!!), so i trudged on and made a totally superfluous pattern for the tear-off:
    • ok, so that's just all over the place, and probably too indulgent. Let's see.... Well, if you look at the google doc above, you sort of see that we mention foursquare's badges as a semi-guiding principle of people that have 'done this right', ok, so maybe marcos should have just tried that instead:
    • hmm... well, yeah, i guess that's ok, more sketches
    • yeah, man, those look pretty computer-y/default except for that thing in the bottom left, which has this sort of blaze of glory thing go
    • there's something there... more doodling 

      except wait... haven't we seen that before? i mean, that looks eerily like that first totally all over the place badge that marcos made. ugh!!! what the what?!
    • more illustrator sketching using this idea, images go clockwise from upper right 

      the upper left and top middle sort of get at this idea that feels right from the sketch. 
    • let's enhance 

      but look at that weird wedge, we've gotten some of the powermode aesthetics in here but without being too heavy-handed (i think) but at the same time, the grid is sort of unresolved and it's not quite ready.
    • enhance again 
    • huh, well, not bad. could be better, but let's be honest, it's shippable right here. Lots of the elements are optimistic because we don't have them yet and they need computing. There will be other things that we can tune after we release, but the kernel of the idea is totally usable.
    • This will ship in a v .1 state like this: 
    • here the styles from powermode have been recovered and the interesting stats on the right hand corner are missing, but the nice stats aren't around (we'll have to add in methods to badges.py to enable them accessible and we'll throw in facepile data soon enough as well)
    • But wait, there's more. Look at that gigantic pot belly that badge is sporting. I'm all for a dignified amount of whitespace but that's a bit overkill! how about we move that messaging to the side as per the original plan with the facepile
      The decision to ship the v0.1 is probably defensible, but it was a total forest/trees moment. I knew it, desmond knew it, stephanie knew it and the fix was a 2-3 minute thing with testing, so again, the moral here is to step back and see if you can make something awesome.

  • I'm not sure this is actually a good way to go about this. All along the way, I would talk through some ideas and then throw a screenshot in Slack and get some feedback.
  • crucial through all this is knowing and trusting which feedback you listen to and developing something which is improved by the things you are constantly hearing.
  • the other thing is that if you love some idea, you can stick with it and it will grow into something different and interesting but it retain the heart and spirit of the thing you wanted to make in the first place.