Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Application to Khan Academy

Steph Jang
September 14, 2013

Application to Khan Academy

Steph Jang

September 14, 2013
Tweet

Other Decks in Programming

Transcript

  1. Dear  Khan  Academy,  

    View Slide

  2. I’m  Stephanie,  a.k.a.  stchangg,  
    Pre-­‐unibrow  removal  

    View Slide

  3. And  I’d  like  to  work  for  you.  

    View Slide

  4. Why?  

    View Slide

  5. This  graph,  and  what  it  implies.  

    View Slide

  6. Holy  sh**.  

    View Slide

  7. I’m  so  excited  about  KA’s  ability  to  
    empower  students  like  this  one.  

    View Slide

  8. Inspired  by  cool  interacEve  exercises,  I  
    set  out  to  make  one  myself.  
    WOAH…  
    INTERACTIVE!  

    View Slide

  9. Enter…  
     
    Telling  Eme,  
    interacEve!  
     
    (renamed  to  telling_Eme_2.html)  

    View Slide

  10. It  involved  some  feedback  and  
    iteraEon…  
    I  am  Eny!  

    View Slide

  11. With  a  good  deal  of  digging  into  the  uEls  library,  
    as  documentaEon  was  sparse.  

    View Slide

  12. In  addiEon  to  creaEng  the  exercise,  

    View Slide

  13. I  refactored  exisEng  exercises  

    View Slide

  14. and  added  some  funcEons  to  help  with  
    polar-­‐coordinate  graphing.  

    View Slide

  15. A  few  weeks  ago,  the  exercise  was  pushed  
    live.  Thanks,  @beneater  and  @mwahl!  

    View Slide

  16. Wahoo!  Try  it  out  for  yourself:  
    hQp://www.khanacademy.org/exercise/telling_Eme_2    

    View Slide

  17. It  was  a  great  learning  
    experience.  

    View Slide

  18. While  making  the  exercise,  I  found  
    myself  thinking  about  how  the  
    Exercises  UI  could  be  improved.  

    View Slide

  19. It’s  very  funcEonal,  but  I  think  
    there  are  a  few  weaknesses:  

    View Slide

  20. A  typical  exercise  

    View Slide

  21. Too  much  whitespace  

    View Slide

  22. Redundancy  –  which  should  I  look  at?  

    View Slide

  23. Redundancy  again…  which  do  people  actually  click  on?  

    View Slide

  24. Too  much  text  

    View Slide

  25. Hints  are  far  down  the  page;  scrolling  is  not  automaEc  

    View Slide

  26. AWer  some  paper  sketches,  

    View Slide

  27. I  quickly  mocked  up  the  
    following  low-­‐fidelity  design  

    View Slide

  28. ANSWER  
    Check  answer  
    Get  a  hint  
    Watch  a  video  
    Simple multiplication!
    EXERCISES  
    How  much  wood  would  25  
    woodchucks  chuck  if  a  
    woodchuck  could  chuck  17  
    pieces  of  wood?  
    25  
    HINTS  
    How  many  woodchucks  are  
    there?  25.  
     
    Okay,  now  that  we  have  
    the  number  of  
    woodchucks,  how  much  
    wood  can  each  woodchuck  
    chuck?  17  pieces.  
     
    So  if  each  woodchuck  
    could  chuck  17  pieces  of  
    wood,  and  there  are  25  
    woodchucks  at  work,  we  
    have  25  *  17  pieces  total.  
     
    =  25  *  (10  +  7)    
    =  250  +  (20  +  5)  *  7    
    =  250  +  140  +  35    
    =  250  +  175  
    =  300  +  125  
    =  425  pieces  of  wood  total  
    17   Get  a  hint   0  hints  
    leO  

    View Slide

  29. Then,  I  set  out  to  build  a  working  
    prototype  using  KA’s  actual  
    exercises  codebase.  

    View Slide

  30. It  ended  up  looking  a  liQle  different,  
    but  sEll  aimed  to  address  issues  
    idenEfied  with  the  current  design.  

    View Slide

  31. Here  it  is.  Now,  let’s  see  how  it  works…  

    View Slide

  32. Click  for  a  hint…  

    View Slide

  33. Hints  panel  appears  

    View Slide

  34. Click  again…  

    View Slide

  35. Hints  panel  automaEcally  scrolls  to  the  
    newest  hint  

    View Slide

  36. No  more  hints!  Click  to  watch  a  video…  

    View Slide

  37. Video  panel  slides  from  leW.  

    View Slide

  38. Now,  back  to  the  problem…  

    View Slide

  39. Let’s  make  a  guess…  

    View Slide

  40. No  cigar.  =(    
    Let’s  try  again…  

    View Slide

  41. Yay!  Onto  the  next  problem…  

    View Slide

  42. Voila,  next  problem!  

    View Slide

  43. Here’s  an  exercise  with  a  massive  
    graphie  element  

    View Slide

  44. The  user  can  scroll  down  and    
    sEll  use  the  answer  area  buQons  
    (consistent  with  the  current  design)  

    View Slide

  45. A  few  other  examples:  

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. A  summary  of  the  major  changes  
    Bigger  problem  text  
    Centered  problem  
    Can  view  hints  and  
     problem  together  
    AutomaEc  scrolling  
    for  hints  
    Less  text,    
    bigger  buQons  

    View Slide

  51. The  aim:  a  more  streamlined,  Zen  
    environment  for  problem-­‐solving  

    View Slide

  52. For  reference,  here’s  the  same  exercise,    
    in  the  current  design  

    View Slide

  53. You  can  try  the  mockup  for  
    yourself*  by  cloning  a  branch  of  my  
    repo.  (Link  provided  at  the  end  to  
    hold  your  aQenEon.)  
     
    *Please  use  a  recent  version  of  Chrome  for  best  results.  Other  browsers/versions  have  
    not  been  fully  tested…  
     

    View Slide

  54. A  few  disclaimers,  though!  

    View Slide

  55. This  is  meant  to  be  a  discussion  
    starter,  and  by  no  means  a  final  
    design.    

    View Slide

  56. Some  funcEonality,  like  the  beloved  
    streak  bar,  hasn’t  been  
    incorporated.  

    View Slide

  57. And  this  mockup  doesn’t  play  
    well  with  all  exercises.  

    View Slide

  58. For  example,  the  hints  sidebar  is  too  
    narrow  for  some  hints  with  graphie  
    elements.  

    View Slide

  59. But  these  issues  are  all  solvable.  

    View Slide

  60. So,  yerp.  This  is  one  of  the  things  
    I  can  do  for  you.  

    View Slide

  61. Here  is  the  
    hypotheEcal  
    table.  
    IKEA    
    VIKA  AMON/
    VIKA  CURRY  
    Table,  white  
     
    $39.99  

    View Slide

  62. To  it,  I  can  bring  the  following  
    things:  

    View Slide

  63. Skills  
    -­‐  JavaScript,  jQuery,  Handlebars.js  
    -­‐  HTML,  CSS,  SCSS/Compass,  Photoshop  
    -­‐  Java  
    -­‐  Some  Ruby  on  Rails,  Python,  C++  
     
    Preferred  environment  (but  I  can  adapt)  
    -­‐  Textmate,  vi  
    -­‐  Chrome  Developer  Tools  
    -­‐  Mac  OS  X  
    -­‐  Bash  

    View Slide

  64. Plus!  A  hearty  appeEte  for  
    learning  new  things  and  
    internalizing  best  pracEces.  

    View Slide

  65. I  don’t  need  hand-­‐holding.  The  
    proof  is  in  the  pudding  past  
    work.  

    View Slide

  66. But  I’m  also  not  afraid  of  
    feedback,  because  that’s  one  of  
    the  quickest  ways  to  learn.  

    View Slide

  67. So,  uh,  who  am  I?  

    View Slide

  68. PRESENT
    Currently,  I  work  as  a  PM  for  
    MicrosoW  in  Silicon  Valley,  

    View Slide

  69. PRESENT
    In  a  small  group  charged  with  
    bringing  MicrosoW’s  search  ads  to  
    Bing  and  Yahoo!  in  internaEonal  
    markets.  

    View Slide

  70. PRESENT
    However,  aWer  working,  I’ve  realized  
    how  important  it  is  for  me  to  do  
    work  that’s  imagining  and  creaEng  a  
    beQer  future.  

    View Slide

  71. PRESENT
    I’d  rather  fight  the  good  fight  and  
    lose.  

    View Slide

  72. PAST PRESENT
    In  May  2011,  I  graduated  from  
    Duke  University,  

    View Slide

  73. PAST PRESENT
    Where  I  majored  in  Electrical  and  
    Computer  Engineering  (ECE)  and  
    minored  in  Computer  Science.  

    View Slide

  74. PAST PRESENT
    At  Duke,  I  was  very  involved  with  
    our  Engineers  Without  Borders  
    chapter.  

    View Slide

  75. PAST PRESENT
    I  led  a  10-­‐student  team  which  
    designed  and  built  a  3,000  sq.  W.  
    government-­‐endorsed  health  clinic  
    in  rural  Honduras.  

    View Slide

  76. PAST PRESENT
    Summer  2009  
    Summer  2008  

    View Slide

  77. PAST PRESENT
    AWer  my  junior  year,  I  interned  at  a  
    venture-­‐funded  clean-­‐tech  startup  
    called  Redwood  Systems.  

    View Slide

  78. PAST PRESENT
    A  fellow  intern  and  I  developed  a  
    Python  package  to  simplify  sensor  
    data  analysis.  We  fondly  named  it  
    Pynecone.  

    View Slide

  79. PAST PRESENT
    In  another  project,  I  used  MATLAB  
    to  generate  a  Eme-­‐lapsed  
    visualizaEon  of  moEon  sensor  data  
    for  use  in  VC  and  customer  pitches.  

    View Slide

  80. PAST PRESENT
    A  screenshot  from  the  animaEon:  
    no  moEon  
    lots  of  moEon  

    View Slide

  81. PAST PRESENT
    In  my  senior  year,  I  led  a  team  to  
    second  place  overall  and  a  $10k  
    prize  in  the  university-­‐wide  Duke  
    Start-­‐Up  Challenge.  

    View Slide

  82. PAST PRESENT
    Our  idea,  70  Sesame,  was  like  
    GroupMe  for  China,  with  features  to  
    help  with  group  planning  and  
    polling.  

    View Slide

  83. PAST PRESENT
    A  screenshot  from  our  demo  video,    
    in  English  for  the  audience:  
    Full  vid  here:  hQp://stchangg.com/projects/70sesame    

    View Slide

  84. PAST PRESENT
    However,  we  did  not  conEnue  with  
    the  idea  as  we  weren’t  quite  ready  
    to  do  business  in  China...  

    View Slide

  85. PAST PRESENT
    (To  be  fair,  
    this  was  just  
    one  of  several  
    reasons.)  

    View Slide

  86. PAST PRESENT
    Finally,  before  Duke,  I  went  to  a  
    math  &  science  high  school  where  
    students  worked  in  small  groups  
    during  class,  like  in  KA’s  LASD  pilots.  
    It  was  preQy  great.  

    View Slide

  87. In  the  future,  I  want  to  build  a  
     
    {company,  nonprofit,  or  social  movement}  
     
    that  helps  people  change  their  
    mindset  to  achieve  their  goals.  

    View Slide

  88. So,  you  see,  helping  build  out  KA’s  
    exercises  plazorm  is  an  exciEng  
    opportunity  to  learn  firsthand  how  
    to  do  this  in  educaEon.  

    View Slide

  89. Looking  forward  to  hearing  back  
    from  you!  
    •  hQp://stchangg.com/projects/  
    •  Porzolio  site  with  recent  projects  (2011+)  
    •  hQp://www.linkedin.com/in/stchangg  
    •  More  tradiEonal  resume,  no  side  projects  
     

    View Slide

  90. Code  Links  
    •  Redesign  code:  
    – hQps://github.com/stchangg/khan-­‐exercises/
    tree/redesign    
    •  KA  pull  requests:  
    – Telling  Time  2:  created  the  exercise  
    •  hQps://github.com/Khan/khan-­‐exercises/pull/8913    
    – Slope  of  a  Line:  added  a  problem  type  (interacted  
    with  @marcia)  
    •  hQps://github.com/Khan/khan-­‐exercises/pull/6124  

    View Slide