Tweet
Tweet

Slide 1

Slide 1 text

Dear  Khan  Academy,  

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

And  I’d  like  to  work  for  you.  

Slide 4

Slide 4 text

Why?  

Slide 5

Slide 5 text

This  graph,  and  what  it  implies.  

Slide 6

Slide 6 text

Holy  sh**.  

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

It  involved  some  feedback  and   iteraEon…   I  am  Eny!  

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

In  addiEon  to  creaEng  the  exercise,  

Slide 13

Slide 13 text

I  refactored  exisEng  exercises  

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

It  was  a  great  learning   experience.  

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

A  typical  exercise  

Slide 21

Slide 21 text

Too  much  whitespace  

Slide 22

Slide 22 text

Redundancy  –  which  should  I  look  at?  

Slide 23

Slide 23 text

Redundancy  again…  which  do  people  actually  click  on?  

Slide 24

Slide 24 text

Too  much  text  

Slide 25

Slide 25 text

Hints  are  far  down  the  page;  scrolling  is  not  automaEc  

Slide 26

Slide 26 text

AWer  some  paper  sketches,  

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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  

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Click  for  a  hint…  

Slide 33

Slide 33 text

Hints  panel  appears  

Slide 34

Slide 34 text

Click  again…  

Slide 35

Slide 35 text

Hints  panel  automaEcally  scrolls  to  the   newest  hint  

Slide 36

Slide 36 text

No  more  hints!  Click  to  watch  a  video…  

Slide 37

Slide 37 text

Video  panel  slides  from  leW.  

Slide 38

Slide 38 text

Now,  back  to  the  problem…  

Slide 39

Slide 39 text

Let’s  make  a  guess…  

Slide 40

Slide 40 text

No  cigar.  =(     Let’s  try  again…  

Slide 41

Slide 41 text

Yay!  Onto  the  next  problem…  

Slide 42

Slide 42 text

Voila,  next  problem!  

Slide 43

Slide 43 text

Here’s  an  exercise  with  a  massive   graphie  element  

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

A  few  other  examples:  

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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  

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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…    

Slide 54

Slide 54 text

A  few  disclaimers,  though!  

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

But  these  issues  are  all  solvable.  

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

To  it,  I  can  bring  the  following   things:  

Slide 63

Slide 63 text

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  

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

So,  uh,  who  am  I?  

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

PAST PRESENT Summer  2009   Summer  2008  

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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.  

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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.  

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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.  

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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    

Slide 90

Slide 90 text

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