Iterative prototyping and user feedback for better ux design by Dan Olsen

47

Transcript of Iterative prototyping and user feedback for better ux design by Dan Olsen

Page 1: Iterative prototyping and user feedback for better ux design by Dan Olsen
Page 2: Iterative prototyping and user feedback for better ux design by Dan Olsen

DAN Olsen

SEP 22, 2015

Page 3: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

My  Background  n  Educa=on  

n  Engineering  background  n  Stanford  MBA  n  UX  design,  web  and  mobile  coding  

n  Experience  n  Led  Quicken  Product  Management  at  Intuit  n  Led  Product  Management  at  Friendster  n  CEO  &  Cofounder,  TechCrunch  award  winner  YourVersion  n  Product  consultant:  Facebook,  Box,  MicrosoS  n  Organizer:  Lean  Product  &  Lean  UX  Meetup  Silicon  Valley  

 Slides  at  hUp://slideshare.net/dan_o      TwiUer:  @danolsen  

Page 4: Iterative prototyping and user feedback for better ux design by Dan Olsen

What  is  “Lean  Startup”  all  about?  

n  Ar=culate  hypotheses  n  Iden=fy  fastest  way  to  test  n  Keep  scope  small:  minimum  viable  product  (MVP)  

n  Test  with  customers  n  Learn  and  iterate  n  Achieve  product-­‐market  fit  

Copyright  ©  2015  @danolsen  

Sounds  easy,  right?  

Page 5: Iterative prototyping and user feedback for better ux design by Dan Olsen

n Win  a  signed  copy  of  book  n  Tweet  about  this  talk  n  Include  @danolsen  n  Photos  of  slides  are  great  n Hashtags:  

n #leanstartup  n #ux  n #prodmgmt  

n  hUp://=ny.cc/LPP  

Copyright  ©  2015  @danolsen  

Page 6: Iterative prototyping and user feedback for better ux design by Dan Olsen

What  is  Product-­‐Market  Fit?  

Page 7: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

Page 8: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Page 9: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 10: Iterative prototyping and user feedback for better ux design by Dan Olsen

Transporta=on  within  100  miles  of  my  home  

Soccer  Mom      

Speed  Demon  

•  Carry  kids  &  gear  •  Safety  •  Fuel  economy  

•  Go  fast  •  Looks  cool  •  Makes  me  look  cool  

         

Target  Customer  Has  Dis=nct  Needs  High-­‐level  need:    Target  Customer:        

Detailed  needs:      

Ideal  Product:  

Soccer  Mom   Speed  Demon  

Page 11: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 12: Iterative prototyping and user feedback for better ux design by Dan Olsen

   

n  Russians:  pencil  

n  NASA:  space  pen  ($1  M  R&D  cost)  

   

   

Example:  n  Ability  to  write  in  space  (zero  gravity)  

Problem  Space  vs.  Solu=on  Space  n  Problem  Space  

n  A  customer  problem,  need  or  benefit  that  the  product  should  address  

n  A  product  requirement  

n  Solu=on  Space  n  A  specific  implementa=on  to  address  the  need  or  product  requirement    

Copyright  ©  2015  @danolsen  

Page 13: Iterative prototyping and user feedback for better ux design by Dan Olsen

Problem  Space  vs.  Solu=on  Space:  Product  Level  

Problem  Space  (user  benefit)  

Solu=on  Space  (product)  

TurboTax

TaxCut

Pen and paper

Prepare my taxes

File my taxes

Check my taxes

Maximize deductions

Reduce audit risk

Copyright  ©  2015  @danolsen  

Page 14: Iterative prototyping and user feedback for better ux design by Dan Olsen

Priori=zing  Customer  Needs:  Importance  vs.  Sa=sfac=on  

Impo

rtance  of  U

ser  N

eed  

User  Sa=sfac=on  with  Current  Alterna=ves  

Compe==veMarket  Opportunity  

Low   High  

Low  

High  

Not  Worth  Going  ASer  

Copyright  ©  2015  @danolsen  

Page 15: Iterative prototyping and user feedback for better ux design by Dan Olsen

Crea=ng  Customer  Value  

Copyright  ©  2015  @danolsen  

Impo

rtance  of  U

ser  N

eed  

User  Sa=sfac=on  with  the  Product  Low   High  

Low  

High  

Area  =  Customer  Value  Created  

Area  =  Opportunity  to  Create  Customer  Value  

Page 16: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Importance  vs.  Sa=sfac=on    Ask  Users  to  Rate  for  Each  Feature  

Recommended  reading:  “What  Customers  Want”  by  Anthony  Ulwick  

Bad  

Great  

Page 17: Iterative prototyping and user feedback for better ux design by Dan Olsen

Kano  Model:  User  Needs  &  Sa=sfac=on  User  Sa=sfac=on  

User  Dissa=sfac=on  

Performance  (more  is  beUer)  

Delighter  (wow)  

Need  not  met  

Need  fully  met  

Must  Have  

Needs  &  features  migrate  over  =me  

Copyright  ©  2015  @danolsen  

Page 18: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 19: Iterative prototyping and user feedback for better ux design by Dan Olsen

What  is  Your  Value  Proposi=on?  

n Which  user  benefits  are  you  providing?  n How  are  you  beUer  than  compe=tors?     Compe&tor  A   Compe&tor  B   You  

Must  Have  Benefit  1   Y   Y   Y  

Performance  Benefit  1   High   Low   Med  

Performance  Benefit  2   Low   High   Low  

Performance  Benefit  3   Med   Med   High  

Delighter  Benefit  1   Y   -­‐   -­‐  

Delighter  Benefit  2   -­‐   -­‐   Y  

Copyright  ©  2015  @danolsen  

Page 20: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 21: Iterative prototyping and user feedback for better ux design by Dan Olsen

What  is  an  MVP?  

Courtesy  of  Jussi  Pasanen  See  Aaron  Walter’s  book  Designing  for  Emo-on   Copyright  ©  2015  @danolsen  

Page 22: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 23: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  UX  Design  Iceberg  

Copyright  ©  2015  @danolsen  

What most people see and react to

What good product people think about

Page 24: Iterative prototyping and user feedback for better ux design by Dan Olsen

Geqng  Customer  Feedback:  Problem  Space  vs.  Solu=on  Space  

n Customers  CAN’T  ar=culate  problem  space  n Customers  CAN  react  to  solu=on  space  n That’s  why  you  need  something  tangible  to  show  to  customers  to  get  good  feedback  

Copyright  ©  2015  @danolsen  

Page 25: Iterative prototyping and user feedback for better ux design by Dan Olsen

Product  Design  Ar=facts:  Interac=vity  vs.  Fidelity  

Copyright  ©  2015  @danolsen  

Hand  sketch  

Interac=vity  

Fidelity  

Interac=ve  Prototype  

Sta=c  Wireframe*  

Clickable  Wireframe*  

Mockup    

Clickable  Mockup**  

*  Balsamiq:  balsamiq.com  **  InVision:  invisionapp.com  

Live  Product  

Page 26: Iterative prototyping and user feedback for better ux design by Dan Olsen
Page 27: Iterative prototyping and user feedback for better ux design by Dan Olsen

Common  Product  Design  &  User  Tes=ng  Workflow  

Copyright  ©  2015  @danolsen  

Hand  sketches  

Interac=vity  

Fidelity  

Clickable  Wireframes  

Clickable  Mockups  

Live  Product  

Test   Test  

Test  

Page 28: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1. Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3. Define  your  value  proposi=on  4. Specify  your  MVP  feature  set  5. Create  your  MVP  prototype  6. Test  your  MVP  with  customers  

Copyright  ©  2015  @danolsen  

Page 29: Iterative prototyping and user feedback for better ux design by Dan Olsen

Conduc=ng  the  User  Test  

n Types  of  user  tests  n  In-­‐person  moderated  n Remote  moderated  n Remote  unmoderated  

Copyright  ©  2015  @danolsen  

Page 30: Iterative prototyping and user feedback for better ux design by Dan Olsen

Ramen  User  Tes=ng  Session  n  10  -­‐  15  min:  Warm  Up  and  Discovery  

n Understand  user  needs,  priori=es  n  Solu=ons  they  use,  likes  &  dislikes  

n  30  -­‐  50  min:  User  Feedback  on  Prototype  n  Show  user  product/mockup  n  As  non-­‐directed  as  possible:  like  you’re  not  there  n  Avoid  “breaking  character”  n  Ask  ques=ons  to  gain  understanding  

n  5  -­‐  10  min:  Wrap  up  n  Answer  any  ques=ons  or  issues  that  came  up  n  Point  out/explain  features  you  want  to  highlight  n  Ask  them  if  they  would  use  the  product  

Copyright  ©  2015  @danolsen  

Page 31: Iterative prototyping and user feedback for better ux design by Dan Olsen

Dos  &  Don’ts  of  User  Tes=ng  Sessions  n  Do  

n  Explain  to  the  user:  n  Their  feedback  will  help  improve  the  product  n  Not  to  worry  about  hur=ng  your  feelings  n  “Think  Aloud  Protocol”  

n  Try  to  be  a  fly  on  the  wall  n  Ask  non-­‐leading,  open-­‐ended  ques=ons  n  Take  notes  and  review  them  aSerwards  for  take-­‐aways  

n  Don’t  n  Ask  leading  or  close-­‐ended  ques=ons  n  “Help”  the  user  or  explain  the  UI  (e.g.,  “click  over  here”)  n  Respond  to  user  frustra=on  or  ques=ons  (un=l  test  is  over)  n  Get  defensive  n  Blame  the  user  

Copyright  ©  2015  @danolsen  

Page 32: Iterative prototyping and user feedback for better ux design by Dan Olsen

What  Are  You  Going  to  Get  Feedback  &  Learnings  About?  

Problem  Space  All  your  hypotheses  in  the  Product-­‐Market  Fit  Pyramid  

Solu=on  Space  What  users  react  to  

Feature  Set  

UX  Design   Messaging    

Copyright  ©  2015  @danolsen  

Page 33: Iterative prototyping and user feedback for better ux design by Dan Olsen

Itera=ng  Your  Product  Vector  Based  on  User  Feedback  in  Solu=on  Space  Problem  Space  

All  your  hypotheses  Solu=on  Space  

What  users  react  to  

 Customer  Feedback  

Mockups  /  Code  

Copyright  ©  2015  @danolsen  

Page 34: Iterative prototyping and user feedback for better ux design by Dan Olsen

Problem  Space  

Solu=on  Space  

Copyright  ©  2015  @danolsen  

Page 35: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Case  Study  on  Product-­‐Market  Fit:  Marke=ngReport.com  

Page 36: Iterative prototyping and user feedback for better ux design by Dan Olsen

Product-­‐Market  Fit  Case  Study:  Marke=ngReport.com  

n My  client  (CEO)  had  a  new  product  idea  n Team:  me,  CEO,  VP  marke=ng,  UI  designer  n Goal:  

n See  if  there  was  a  business  opportunity  here  n Validate  product-­‐market  fit  quickly,  cheaply  without  wri=ng  a  single  line  of  code  

n Product  Concept  was  “marke=ng  report”  that  let  consumers  control  the  direct  mail  that  they  receive  

Copyright  ©  2015  @danolsen  

Page 37: Iterative prototyping and user feedback for better ux design by Dan Olsen

Clustering  Poten=al  User  Benefits  to  Create  Product  Concepts  

Reduce Junk Mail

Find out what “they” know about you

Money Saving Offers

Compare Yourself to Others

Social Networking

Marketing Report

Marketing Score

Marketing Profile

Save Trees

“Marke=ng  Shield”  Concept  

“Marke=ng  Saver”  Concept  

Copyright  ©  2015  @danolsen  

Page 38: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Page 39: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Page 40: Iterative prototyping and user feedback for better ux design by Dan Olsen

n  Telephone  recruit  of  prospec=ve  customers  n Wrote  screener  to  iden=fy  target  customers  

n Wanted  users  who  work  full-­‐=me  &  use  internet  n Fit  for  opt-­‐in  offers:  use  coupons,  Costco  membership  n Fit  for  an=-­‐junk  mail:  use  paper  shredder,  block  caller  ID  

n  Paid  each  person  $75  n  Scheduled  3  groups  of  2  or  3  people  to  discuss  each  product  concept  for  90  minutes  

n Moderated  each  group  through  the  mockups  to  hear  their  feedback  

Product-­‐Market  Fit  Case  Study:  Recrui=ng  People  

Copyright  ©  2015  @danolsen  

Page 41: Iterative prototyping and user feedback for better ux design by Dan Olsen

Product-­‐Market  Fit  Case  Study:  Findings  on  Concepts  &User  Benefits  

Reduce Junk Mail

Find out what “they” know about you

Money Saving Offers

Compare Yourself to Others

Social Networking

Marketing Report

Marketing Score

Marketing Profile

Save Trees

Legend

Strong appeal

Some appeal

Low appeal

“Shield” Concept “Saver” Concept

Copyright  ©  2015  @danolsen  

Page 42: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

Page 43: Iterative prototyping and user feedback for better ux design by Dan Olsen

Product-­‐Market  Fit  Case  Study:  Summary  

n 4  weeks  from  1st  mee=ng  to  validated  product  concept  with  zero  coding  

n Reasonable  cost  n 1  round  of  itera=on  on  product  concept  n  Iden=fied  compelling  concept  that  users  are  willing  to  pay  $10/month  for  

n Trimmed  away  non-­‐valuable  pieces  n You  can  achieve  similar  results  

Copyright  ©  2015  @danolsen  

Page 44: Iterative prototyping and user feedback for better ux design by Dan Olsen

The  Lean  Product  Process  

1.  Determine  your  target  customer  2.  Iden=fy  underserved  customer  needs  3.  Define  your  value  proposi=on  4.  Specify  your  MVP  feature  set  5.  Create  your  MVP  prototype  6.  Test  your  MVP  with  customers  Iterate:  

 �  Hypothesize-­‐Design-­‐Test-­‐Learn  loop    �  Improve  product-­‐market  fit  

Copyright  ©  2015  @danolsen  

Page 45: Iterative prototyping and user feedback for better ux design by Dan Olsen

Copyright  ©  2015  @danolsen  

The  Lean  Product  Playbook  n Also  covers:  

n UX  design  n Agile  development  n Product  analy=cs    

n Published  by  Wiley  n Hardcover  &  ebook  n Available  on  Amazon:  hUp://=ny.cc/LPP  

Page 46: Iterative prototyping and user feedback for better ux design by Dan Olsen
Page 47: Iterative prototyping and user feedback for better ux design by Dan Olsen

Questions? @danolsen  olsensolu=ons.com  slideshare.net/dan_o  leanproductplaybook.com    Book:  hUp://=ny.cc/LPP