Steph Jang
September 14, 2013
47k

Steph Jang

September 14, 2013

Transcript

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  Eny!

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:

17. It  was  a  great  learning
experience.

18. While  making  the  exercise,  I  found
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-­‐ﬁdelity  design

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  diﬀerent,
but  sEll  aimed  to  address  issues
idenEﬁed  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

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. 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

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

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

49. You  can  try  the  mockup  for
yourself*  by  cloning  a  branch  of  my
repo.  (Link  provided  at  the  end  to

*Please  use  a  recent  version  of  Chrome  for  best  results.  Other  browsers/versions  have
not  been  fully  tested…

50. A  few  disclaimers,  though!

51. This  is  meant  to  be  a  discussion
starter,  and  by  no  means  a  ﬁnal
design.

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

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

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

55. But  these  issues  are  all  solvable.

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

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

\$39.99

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

59. 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

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

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

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

63. So,  uh,  who  am  I?

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

65. PRESENT
In  a  small  group  charged  with
Bing  and  Yahoo!  in  internaEonal
markets.

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

67. PRESENT
I’d  rather  ﬁght  the  good  ﬁght  and
lose.

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

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

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

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

72. PAST PRESENT
Summer  2009
Summer  2008

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

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

75. 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.

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

77. 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.

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

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

80. PAST PRESENT
However,  we  did  not  conEnue  with
the  idea  as  we  weren’t  quite  ready

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

82. 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.

83. In  the  future,  I  want  to  build  a

{company,  nonproﬁt,  or  social  movement}

that  helps  people  change  their
mindset  to  achieve  their  goals.

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

85. Looking  forward  to  hearing  back
from  you!
•  hQp://stchangg.com/projects/
•  Porzolio  site  with  recent  projects  (2011+)