Application to Khan Academy

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