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

Other Decks in Programming


  1. Dear  Khan  Academy,  

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

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

  4. Why?  

  5. This  graph,  and  what  it  implies.  

  6. Holy  sh**.  

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

     like  this  one.  
  8. Inspired  by  cool  interacEve  exercises,  I   set  out  to

     make  one  myself.   WOAH…   INTERACTIVE!  
  9. Enter…     Telling  Eme,   interacEve!     (renamed

     to  telling_Eme_2.html)  
  10. It  involved  some  feedback  and   iteraEon…   I  am

  11. With  a  good  deal  of  digging  into  the  uEls  library,

      as  documentaEon  was  sparse.  
  12. In  addiEon  to  creaEng  the  exercise,  

  13. I  refactored  exisEng  exercises  

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

  15. A  few  weeks  ago,  the  exercise  was  pushed   live.

     Thanks,  @beneater  and  @mwahl!  
  16. Wahoo!  Try  it  out  for  yourself:   hQp://www.khanacademy.org/exercise/telling_Eme_2    

  17. It  was  a  great  learning   experience.  

  18. While  making  the  exercise,  I  found   myself  thinking  about

     how  the   Exercises  UI  could  be  improved.  
  19. It’s  very  funcEonal,  but  I  think   there  are  a

     few  weaknesses:  
  20. A  typical  exercise  

  21. Too  much  whitespace  

  22. Redundancy  –  which  should  I  look  at?  

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

  24. Too  much  text  

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

  26. AWer  some  paper  sketches,  

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

  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  
  29. Then,  I  set  out  to  build  a  working   prototype

     using  KA’s  actual   exercises  codebase.  
  30. It  ended  up  looking  a  liQle  different,   but  sEll

     aimed  to  address  issues   idenEfied  with  the  current  design.  
  31. Here  it  is.  Now,  let’s  see  how  it  works…  

  32. Click  for  a  hint…  

  33. Hints  panel  appears  

  34. Click  again…  

  35. Hints  panel  automaEcally  scrolls  to  the   newest  hint  

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

  37. Video  panel  slides  from  leW.  

  38. Now,  back  to  the  problem…  

  39. Let’s  make  a  guess…  

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

  41. Yay!  Onto  the  next  problem…  

  42. Voila,  next  problem!  

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

  44. The  user  can  scroll  down  and     sEll  use

     the  answer  area  buQons   (consistent  with  the  current  design)  
  45. A  few  other  examples:  

  46. None
  47. None
  48. None
  49. None
  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  
  51. The  aim:  a  more  streamlined,  Zen   environment  for  problem-­‐solving

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

     current  design  
  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…    
  54. A  few  disclaimers,  though!  

  55. This  is  meant  to  be  a  discussion   starter,  and

     by  no  means  a  final   design.    
  56. Some  funcEonality,  like  the  beloved   streak  bar,  hasn’t  been

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

  58. For  example,  the  hints  sidebar  is  too   narrow  for

     some  hints  with  graphie   elements.  
  59. But  these  issues  are  all  solvable.  

  60. So,  yerp.  This  is  one  of  the  things   I

     can  do  for  you.  
  61. Here  is  the   hypotheEcal   table.   IKEA  

      VIKA  AMON/ VIKA  CURRY   Table,  white     $39.99  
  62. To  it,  I  can  bring  the  following   things:  

  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  
  64. Plus!  A  hearty  appeEte  for   learning  new  things  and

      internalizing  best  pracEces.  
  65. I  don’t  need  hand-­‐holding.  The   proof  is  in  the

     pudding  past   work.  
  66. But  I’m  also  not  afraid  of   feedback,  because  that’s

     one  of   the  quickest  ways  to  learn.  
  67. So,  uh,  who  am  I?  

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

     in  Silicon  Valley,  
  69. PRESENT In  a  small  group  charged  with   bringing  MicrosoW’s

     search  ads  to   Bing  and  Yahoo!  in  internaEonal   markets.  
  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.  
  71. PRESENT I’d  rather  fight  the  good  fight  and   lose.

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

  73. PAST PRESENT Where  I  majored  in  Electrical  and   Computer

     Engineering  (ECE)  and   minored  in  Computer  Science.  
  74. PAST PRESENT At  Duke,  I  was  very  involved  with  

    our  Engineers  Without  Borders   chapter.  
  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.  
  76. PAST PRESENT Summer  2009   Summer  2008  

  77. PAST PRESENT AWer  my  junior  year,  I  interned  at  a

      venture-­‐funded  clean-­‐tech  startup   called  Redwood  Systems.  
  78. PAST PRESENT A  fellow  intern  and  I  developed  a  

    Python  package  to  simplify  sensor   data  analysis.  We  fondly  named  it   Pynecone.  
  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.  
  80. PAST PRESENT A  screenshot  from  the  animaEon:   no  moEon

      lots  of  moEon  
  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.  
  82. PAST PRESENT Our  idea,  70  Sesame,  was  like   GroupMe

     for  China,  with  features  to   help  with  group  planning  and   polling.  
  83. PAST PRESENT A  screenshot  from  our  demo  video,    

    in  English  for  the  audience:   Full  vid  here:  hQp://stchangg.com/projects/70sesame    
  84. PAST PRESENT However,  we  did  not  conEnue  with   the

     idea  as  we  weren’t  quite  ready   to  do  business  in  China...  
  85. PAST PRESENT (To  be  fair,   this  was  just  

    one  of  several   reasons.)  
  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.  
  87. In  the  future,  I  want  to  build  a    

    {company,  nonprofit,  or  social  movement}     that  helps  people  change  their   mindset  to  achieve  their  goals.  
  88. So,  you  see,  helping  build  out  KA’s   exercises  plazorm

     is  an  exciEng   opportunity  to  learn  firsthand  how   to  do  this  in  educaEon.  
  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    
  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