Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp


Published on

Talk on User Experience (UX) Design principles that I gave at Silicon Valley Product Camp on March 23, 2013.

Published in: Business

How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp

  1. 1. { ] How to be A UX Design Army of One Dan Olsen Olsen Solutions Silicon Valley Product Camp March 23, 2013
  2. 2. My  Background  n  Educa/on   n  BS,  Electrical  Engineering,  Northwestern   n  MS,  Industrial  Engineering,  Virginia  Tech   n  MBA,  Stanford   n  Web  development  and  UI  design  courses  n  20  years  of  Product  Management  Experience   n  Managed  submarine  design  for  5  years   n  5  years  at  Intuit,  led  Quicken  Product  Management   n  Led  Product  Management  at  Friendster   n  CEO  &  Cofounder  of  YourVersion  (personalized  news)   n  Product  consultant:  Box,  YouSendIt,  Epocrates   n  Speaker,  Author  “42  Rules  of  Product  Management”     Will  post  slides  to  hYp://    
  3. 3. UX  Design  Army  of  One  n  What  is  “UX  Design”?   n  UX  =  User  experience   n  Designing  the  product  in  a  way  that  :   n  meets  customer  needs   See my other talks n  meets  needs  beYer  than  alterna/ves   n  delivers  a  great  user  experience   Focus of my talk todayn  “UX”  vs.  “UI”  (User  Interface):  UX  is  broader  n  Why  “Army  of  One”?   n  Great  UX  takes    diverse  set  of  people/skills   n  Skills  are  o`en  missing  from  your  product  team   n  Good  product  people  fill  cri/cal  gaps     Copyright  ©  2013  Olsen  Solu/ons  
  4. 4. Gegng  from  PRD  to  Code   Product   Coded  Product   Requirements  Document  (PRD)   Copyright  ©  2013  Olsen  Solu/ons  
  5. 5. Gegng  from  PRD  to  Code   UX   Design   Product   Coded  Product   Requirements  Document  (PRD)   Copyright  ©  2013  Olsen  Solu/ons  
  6. 6. The  UX  Design  Gap  on  Many  Product  Teams   Level Define Design Code 1 Engineering 2 Product Mgmt Engineering 3 Product Mgmt Engineering Product Mgmt Engineering 4 PM Eng UI 5 PM Eng5   Copyright  ©  2013  Olsen  Solu/ons  
  7. 7. Dan’s  UX  Design  Iceberg  What mostpeople seeand react to Visual Design What good product people Interaction think about Design Information Architecture Conceptual Design Copyright  ©  2013  Olsen  Solu/ons  
  8. 8. The  Elements  of  User  Experience   by  Jesse  James  GarreY  Diagram  available  at   Copyright  ©  2013  Olsen  Solu/ons  
  9. 9. User  Experience  Framework  =   Workflow  for  the  Product  Team  Workflow   Coding Product   UI/Interac/on   Visual   Developer   Manager   Designer   Designer   Copyright  ©  2013  Olsen  Solu/ons  
  10. 10. The  Product  A-­‐Team   Visual   UI   Designer   Developer  Designer   Product   Manager   Copyright  ©  2013  Olsen  Solu/ons  
  11. 11. Elements  of  User  Experience  Design   Consists  of  Three  Dis/nct  Elements:   n  Informa/on  Architecture   n  Structure  and  layout  at  both  site  and  page  level   n  How  site  is  structured  (sitemap)   n  How  site  informa/on  is  organized  (site  layout)   n  How  each  page  is  organized  (page  layout)   n  Interac/on  Design   n  How  user  and  product  interact  with  one  another   n  User  flows  (e.g.,  naviga/on  across  mul/ple  pages)   n  User  input  (e.g.,  controls  and  form  design)   n  Visual  Design   n  “How  it  looks”  vs.  “What  it  is”,  o`en  called  “chrome”   n  Fonts,  colors,  graphical  elements  10   Copyright  ©  2013  Olsen  Solu/ons  
  12. 12. Informa/on  Architecture  n  Documents  used   n  Sitemap   n  Show  how  sec/ons  of  website  are  organized   n  Show  major  naviga/on  paYerns   n  Wireframes   n  Show  the  layout  of  components  on  a  page   n  Does  NOT  focus  on  visual  design   n  Black  &  White   n  No  graphics   n  Templates  for  overall  website  and  individual  pages  n  Tools:    Visio,  OmniGraffle,  Axure,  Powerpoint,  Word,   Excel,  Photoshop,  Balsamiq,  whiteboard   Copyright  ©  2013  Olsen  Solu/ons  
  13. 13. Informa/on  Architecture   Sitemap   Copyright  ©  2013  Olsen  Solu/ons  
  14. 14. Informa/on  Architecture   Sitemap   Copyright  ©  2013  Olsen  Solu/ons  
  15. 15. Wireframe  
  16. 16. Napkin  Wireframe  15   Copyright  ©  2013  Olsen  Solu/ons  
  17. 17. Visual  Hierarchy  n  Very  important:  impacts  how  users  scan  &  read  n  Can  you  rank  these  circles  in  order  of  importance?   Copyright  ©  2013  Olsen  Solu/ons  
  18. 18. Visual  Hierarchy  is  Cri/cal  n  Posi/on   n  Top  more  important  than  boYom   n  Le`  more  important  (le`-­‐to-­‐right  languages)  n  Size   n  Larger  more  important  than  smaller  n  Color  &  contrast   n  Brighter/higher  contrast  more  important  than   darker/lower  contrast     Copyright  ©  2013  Olsen  Solu/ons  
  19. 19. Visual  Hierarchy  Example   Eye  Tracking  Heatmap   2 1 3 4 5 6 Copyright  ©  2013  Olsen  Solu/ons  
  20. 20. Eye  Tracking  Heatmap  of   Google  Search  Results  Page  What’s  going  on  here?  Why  the  dropoff?  
  21. 21. Put  Key  Info  &  Ac/ons  Above  The  Fold   Landing  Page  A   Landing  Page  B   The Fold Key action is above the fold Key action is below the fold20   Copyright  ©  2009  O2010  YourVersion   Copyright  ©  lsen  Solu/ons  LLC  
  22. 22. Gestalt  Principles:   How  We  Visually  Perceive  Objects  n  Figure  and  Ground   n  Similarity    n  Proximity   n  Closure   Copyright  ©  2013  Olsen  Solu/ons  
  23. 23. Grids  Ensure  You  Have  Good  Alignment  of  Your  Design  Elements   970  pixel  grid  example   12  columns   Each  68  px  wide  with  14  px  guYer   Copyright  ©  2013  Olsen  Solu/ons  
  24. 24. Can  Use  Grid  to  Make  Blocks  of   Varying  Width   Copyright  ©  2013  Olsen  Solu/ons  
  25. 25. Wireframe  Using  Grid   Copyright  ©  2013  Olsen  Solu/ons  
  26. 26. Interac/on  Design   n  Documents  used   n  Flowchart   n  Combina/on  of  Wireframes  &  Flowcharts   n  Tools:    Visio,  OmniGraffle,  Powerpoint,   Photoshop,  whiteboard   n  May  build  prototype  using  HTML,  jQuery,   Ruby  on  Rails,  Flash,  or  paper   n  Usability  tes/ng  can  help  find  problems  25   Copyright  ©  2013  Olsen  Solu/ons  
  27. 27. Flowchart  showing  condi/onal  logic   Copyright  ©  2013  Olsen  Solu/ons  
  28. 28. Napkin  Flowchart   Copyright  ©  2013  Olsen  Solu/ons  
  29. 29. Combo  Wireframe  &  Flowchart   Copyright  ©  2013  Olsen  Solu/ons  
  30. 30. Visual  Design  n  Documents  used   n  Mockups  (aka  comps)  n  Tools  used:     n  Photoshop   n  Illustrator   n  Fireworks  n  Deliverables   n  Usually  images   n  Can  be  HTML  &  CSS   Copyright  ©  2013  Olsen  Solu/ons  
  31. 31. Visual  Design   Mockup  30   Copyright  ©  2013  Olsen  Solu/ons  
  32. 32. Visual  Design   UI  Spec   Copyright  ©  2013  Olsen  Solu/ons  
  33. 33. Color  Theory  101  n  What  are  the  primary  colors?   n  A:  Red,  Yellow,  Blue   n  B:  Red,  Green,  Blue   Copyright  ©  2013  Olsen  Solu/ons  
  34. 34. Hue  &  Color  Wheel  Primary  Colors   Secondary  Colors   Ter/ary  Colors   Copyright  ©  2013  Olsen  Solu/ons  
  35. 35. Colors  are  Specified  as  RGB  Values   n  For  each  color,  value  can  vary  from  0  to  255   n  Values  are  wriYen  in  hexadecimal  (base  16)   n  Instead  of  1  to  10,  hex  goes  from  1  to  16   n  Since  we  run  out  of  digits,  A  thru  F  are  used   n  A=10,  B=11,  C=12,  D=13,  E=14,  F=15   n  #10  =  16  in  base  10  (1  x  16  +  0  x  1)   Prize n  #FF  =  255    in  base  10  (15  x  16  +  15  x  1)    #  00      00      00   #  FF      00      00   #  FF      FF        FF   #  FF      FF        00   Red  Green  Blue   Red  Green  Blue   Red  Green  Blue   Red  Green  Blue   0   0   0   255   0   0   255   255   255   255   255   0   =  Black   =  Red   =  White   =  Yellow   Copyright  ©  2013  Olsen  Solu/ons  
  36. 36. Tints,  Shades,  and  Tones   n  Tints:  adding  white  to  a  pure  hue     n  Shades:  adding  black  to  a  pure  hue   n  Tones:  adding  gray  to  a  pure  hue:    35   Copyright  ©  2013  Olsen  Solu/ons  
  37. 37. Specifying  Color  PaleYe   Copyright  ©  2013  Olsen  Solu/ons  
  38. 38. Fonts  101  4  common  fonts:  n  Times New Roman n  Courier!n  Arial"n  Helvetica"n  How  is  Courier  different   than  the  other  3  fonts?  n  Most  designs  use  2  fonts   n  one  for  body  text   n  one  for  headings   Copyright  ©  2013  Olsen  Solu/ons  
  39. 39. Fonts  in  a  Browser  n  Web  font  choices  use  to  be  quite  limited  n  Not  any  more,  thanks  to  CSS  @font-­‐face  n  Other  CSS  proper/es  for  controlling  text:   n  font-­‐family   n  color   n  font-­‐size   n  line-­‐height   n  font-­‐weight  (bold)   n  font-­‐style  (italic)   n  text-­‐decora/on  (underline)   n  text-­‐shadow  (CSS3)   Copyright  ©  2013  Olsen  Solu/ons  
  40. 40. What’s  your  Weapon  of  Choice?  n  Visio  /  OmniGraffle  n  Powerpoint  n  Photoshop  /  Illustrator  /   Fireworks  n  Balsamiq  n  Others?   Copyright  ©  2013  Olsen  Solu/ons  
  41. 41. Design  Ar/facts:   Interac/vity  vs.  Fidelity   Alpha Prototype Interactivity Interactive InVision* Wireframe Hand Static Mockup sketch Wireframe Fidelity *hYp://  40   Copyright  ©  2013  Olsen  Solu/ons  
  42. 42. Design  Tools:   Fidelity  vs.  Effort   3 Photoshop ProductDesign Fidelity Manager 2 1 Balsamiq Visio Visual Hand Designer sketch Effort to Create Artifact Copyright  ©  2013  Olsen  Solu/ons  
  43. 43. Why  Balsamiq  Is  Great  n  Super  easy  to  learn  and  use  n  Widget  library  has  most  UI  elements  n  Can  annotate  with  s/cky  notes  n  Can  add  click  naviga/on  between  pages  to   illustrate  a  user  story  n  Can  export  as  PDF  (so  others  don’t  need  to   have  Balsamiq),  mul/ple  pages  in  1  PDF  n  Best  $79  you’ll  spend  n  hYp://   Copyright  ©  2013  Olsen  Solu/ons  
  44. 44. But  wait,  there’s  more!     What  I  didn’t  have  /me  to  cover  n  Understanding  and  priori/zing  customer  needs  n  Iden/fying  your  product  value  proposi/on  n  User  tes/ng  and  design  itera/on  n  Measuring  user  experience  with  analy/cs  n  See  my  other  talks  on  all  of  the  above   hYp://   Copyright  ©  2013  Olsen  Solu/ons  
  45. 45. UX  Army  of  One   Cheat  Sheet  n  Iden/fy  &  fill  gaps  in   your  Product  A-­‐Team  n  Be  sketchy  n  Wireframe   n  Visual  hierarchy   n  Gestalt  principles   n  Flow  n  Mockups   n  Grid,  Color  PaleYe,  Fonts   Copyright  ©  2013  Olsen  Solu/ons  
  46. 46.{ Questions? ] @danolsen