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.

Make Your First UX Comic - UX in the City 2016


Published on

Slides from my worskshop in which participants were guided through the process of making a simple user experience comic.

Published in: Design
  • Be the first to comment

Make Your First UX Comic - UX in the City 2016

  1. 1. Make your first UX Comic Bonny Colville-Hyde @almostexact
  2. 2. Intro   •  About  me   •  What  we’re  going  to  do   – Make  a  three  panel  comic   – Understand  the  benefits  of  using  comics  to   communicate  user  experiences   – Look  at  different  communica<on  problems  comics   can  solve  
  3. 3. The  Brief:   •  BuddyCam  is  a  new  website  and  mobile  app   that  connects  people  through  photos   •  The  team  at  BuddyCam  want  to  understand   what  their  poten<al  audience  would  like  to   achieve  from  using  their  service     What  can  BuddyCam  do  to  make  their  service   the  best  for  the  photo  sharing  audience?  
  4. 4. “How do we make badass users?” Kathy Sierra
  5. 5. Mark   Mark  uses  social  media  and  photo  sharing  apps  to  promote  his  blog   about  woodwork.  He  likes  tracking  how  many  likes  his  posts   receive,  and  uses  tools  like  Google  Analy<cs  to  see  which  sites   refer  the  most  traffic  to  his  site.     He  wants  to  generate  interest  in  his  blog,  get  more  visitors  and  find   poten<al  sponsors  or  opportuni<es  to  create  an  income  from  his   hobby.     “How  can  I  connect  with  the  right  people?”   “Which  photos  are  most  popular?”   Tools:   •  Mobile  phone  camera   •  DSLR  camera   Use:   •  Checks  every  day   •  Posts  new  photos  most  days   •  Comments  on  other  photos   now  and  then   MOST  RECENT  PHOTOS:  Timber  planks,  a  handmade  table,  carved  detail  on  a  table  leg  
  6. 6. Amy   Amy  uses  social  media  and  photo  sharing  apps  to  share  pictures  of   her  day  to  day  life,  and  her  daughter  with  friends  and  family.  She   likes  connec<ng  with  other  mums  who  share  her  values  and   interests.   She  wants  to  feel  part  of  a  community  where  she  can  connect  with   people  and  form  a  network.       “I  love  seeing  what  my  friends  are  up  to”   “Sharing  pictures  makes  me  feel  closer  to  my  friends  and  family”   Tools:   •  Mobile  phone  camera   •  Tablet  camera   •  Digital  camera   Use:   •  Checks  mul<ple  <mes  a  day   •  Posts  photos  at  least  once  a  day   •  Comments  several  <mes  a  day   MOST  RECENT  PHOTOS:  her  daughter  playing  in  the  garden,  a  child’s  toy  bear,  flowers  in  a  vase  
  7. 7. Omar   Omar  likes  to  take  silly  pictures  and  funny  selfies  that  make  his   friends  laugh.  He  enjoys  geSng  reac<ons  to  his  posts,  and  seeing   what  his  friends  have  to  share.  He  doesn’t  heavily  monitor  stats,   but  gets  a  kick  when  a  post  receives  more  likes  than  usual.   He  wants  to  look  good  (or  goofy)  for  his  friends,  and  never  seem   boring.     “70  Likes!  That’s  my  best  yet!”   “I  oGen  plan  photos,  get  props  and  things  like  that:  to  make  them   as  good  as  possible”   Tools:   •  Mobile  phone  camera   •  Laptop  webcam   Use:   •  Checks  most  days   •  Posts  every  few  days   •  Comments  most  days   MOST  RECENT  PHOTOS:  a  cat  wearing  sunglasses,  a  selfie  in  front  of  a  huge  cake,  a  photo  of  a  friend  
  8. 8. Laura   Laura  is  a  social  media  manager  for  a  company  that  designs  and   makes  t-­‐shirts.  She  uses  photo  sharing  apps  to  promote  their   products  and  engage  with  customers.  She  ac<vely  measures  and   monitors  the  communi<es  he  par<cipates  in.   She  wants  to  know  her  <me  is  being  used  produc<vely,  and  that   customers  have  a  good  experience  engaging  with  her  and  the   company  she  works  for.     “Why  do  some  photos  get  so  many  more  likes  than  others?”   “How  can  I  find  people  posJng  photos  of  our  t-­‐shirts?”   Tools:   •  Mobile  phone  camera   •  DSLR  camera   •  Desktop  computer   Use:   •  Checks  mul<ple  <mes  a  day   •  Posts  once  or  twice  a  day   •  Comments  throughout  the  day   MOST  RECENT  PHOTOS:  a  t-­‐shirt  being  printed,  a  repost  of  a  customer  photo,  a  t-­‐shirt  being   modelled  
  9. 9. TASK!   -­‐  Get  into  pairs   -­‐  Run  a  mini  depth  interview   -­‐  Find  out  if  your  partner  uses  and  photo  sharing   apps/services  –  which  ones?   -­‐  How  do  they  use  them?   -­‐  Why  do  they  use  them?   -­‐  What  was  the  last  photo  they  shared?  Why?   -­‐  What  do  they  feel  about  the  service?   -­‐  MAKE  NOTES!   5  mins  
  10. 10. User research is Awesome.
  11. 11. Documenting & communicating Human experiences is hard
  12. 12. ‘Deliverables’ Suck
  13. 13. If we don’t engage decision makers, we fail.
  14. 14. BuddyCam  Stakeholders   Bob,  Owner/Founder/MD/Big  Boss   Thinks  everyone  uses  the  internet  and   apps  just  like  he  does.   Has  a  short  a`en<on  span,  combined   with  a  busy  schedule.   He  wants  to  grow  a  community  of   BuddyCam  users  to  make  a  success  of   his  business.  
  15. 15. BuddyCam  Stakeholders   Jenny,  Product  Manager   Wants  to  make  decisions  quickly,  so   she  can  get  new  features  scoped  and   into  development  sprints.   Thinks  they  should  release  features   and  test  what  they  do  later  on.   She  wants  to  deliver  features  on  <me   and  in  budget.  
  16. 16. Communication is hard
  17. 17. We can engage people with experiences.
  18. 18. People love Stories
  19. 19. People Love Comics
  20. 20.  
  21. 21. Why are comics so successful?
  22. 22. Verbal Non Verbal
  23. 23. Facial Expressions Eye contact Body language Gestures Speech
  24. 24. The magic of non-verbal communication
  25. 25. “…But comics are for kids – My Team wouldn’t get it…”
  26. 26. Charles  Schulz  
  27. 27. BuddyCam:  What  have  we  got?   •  Brief   •  Stakeholders   •  A  mini  persona  and  some  interview  data   •  A  general  awareness  of  the  market  
  28. 28. How do we turn this into a comic?
  29. 29. 1   2   3   4   5   6   1:  Plan  the  story   2:  Design  the  characters   3:  PracNce  the  character’s   emoNons   4:  Draw  the  comic   5:  Get  feedback   6:  Refine  the  comic  
  30. 30. Planning  the  Story   •  Compare  your  interview  data  with  your   persona:  what  do  they  have  in  common?  Are   there  themes?  This  will  become  your   character  and  their  context   •  How  can  BuddyCam  make  your  character  a   badass?  
  31. 31. TASK!   Plan  (don’t  make)  your  three  panel  comic  strip   –  1:  Introduce  the  character  &  context   –  2:  Show  how  the  product  is  used   –  3:  Show  the  outcome   WHO   WHAT   WHY  
  32. 32. Single panel:
  33. 33. Strip:
  34. 34. Pages:
  35. 35. Yay! Gutters!
  36. 36. ? !!!
  37. 37. storytelling
  38. 38. Buy this
  39. 39. Your character
  40. 40. Drawing expressions
  41. 41. Sad   Neutral   Happy   TASK! -  Draw five circles/head shapes -  Add expressions on each face: Start with sad on the left, and end with happy on the right
  42. 42. Drawing figures
  43. 43. TASK! -  Draw two stick people standing next to each other, showing different emotions -  The emotions should be opposites Happiness   Sadness   Fear   Depression   Amusement   Boredom   Excitement   Sorrow   Pride   Relief   Shame   Joy  
  44. 44. TASK!  Make  your  3  panel  comic   WHO   WHAT   WHY  
  45. 45. Task!  Get  feedback!   •  Get  into  pairs  and  share  your  comics   •  Collect  feedback:  does  your  comic   communicate  what  you  intended?  
  46. 46. What  would  Bob  and  Jenny  say?!  
  47. 47. Comics in action
  48. 48. Share research (A.K.A: Bringing research to life)
  49. 49. Experienced   Novice   Skep<cal     Trus<ng   BOB   SUE  
  50. 50. Test ideas with users
  51. 51. Kevin  CHENG,  Yahoo  
  52. 52. Develop personas
  53. 53. Meet ‘Denise’:
  54. 54. Share & explore ideas
  55. 55. Sco`  McCLOUD,  Google  Chrome  
  56. 56. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  
  57. 57. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  
  58. 58. A scenario •  We’re  working  for  an  ecommerce  photography  site  called  ‘The   Camera  Shop’.   •  They  sell  lots  of  different  cameras  and  photography  gear  to  a   variety  of  customers,  though  most  of  them  are  passionate   photographers.   •  They  want  to  know  how  they  can  appeal  to  customers  who  don’t   consider  themselves  photographers  and  who  spend  less  on   cameras  (because  there  are  a  lot  more  of  these  people  than  the   passionate  photographers).   •  Before  they  commission  a  large  piece  of  research,  they  want  to  see   what  insight  we  can  give  about  this  audience.   •  We  need  to  quickly  create  a  comic  that  shares  some  of  the   problems  and  poten<al  solu<ons  The  Camera  Shop  could  provide   to  laymen  photographers.  
  59. 59. Finding an idea Via  the  Money  Saving  Expert  forum  
  60. 60. What’s going on here? •  ‘Bob’  wants  to  buy  a  new  compact  camera.   •  He  has  shopped  around,  but  has  been   overwhelmed  by  the  variety  and  choice  of   cameras.   •  He  doesn’t  want  a  lot  of  fancy  features,  but  he   does  care  about  the  image  quality.   •  He  has  up  to  £100  to  spend.   •  He  is  looking  for  help  to  make  a  decision.  
  61. 61. Making the story •  Bob  wants  to  buy  a  new  camera  because  his  current  one   has  broken.  He  wants  to  replace  his  camera  before  he  goes   on  holiday.   •  He  has  looked  on  several  websites,  but  has  been   overwhelmed  by  the  choice.  He  needs  help  to  refine   appropriate  cameras  into  a  more  manageable  shortlist,  or   even  to  find  the  best  one  for  him.   •  The  site  or  app  needs  to  allow  him  to  control  his  searching   and  browsing  so  he  can  manage  the  volume  of  results.  It   needs  to  give  him  choice  but  not  overwhelm  him.   •  He  needs  to  be  able  to  look  at  cameras  based  on  their  size   (he  wants  it  to  be  compact),  their  image  quality  (it  needs  to   take  nice  pictures)  and  its  price  (it  must  be  under  £100).  
  62. 62. Planning  the  comic   1.  Introduce  Bob   2.  Bob’s  camera  has   broken   3.  Bob  looks  for  cameras   online   4.  Bob  gets   overwhelmed   5.  Bob  finds  The  Camera   Shop   6.  Bob  finds  ‘The   Compact  Camera’  finder   7.  Bob  filters  compact   cameras  by  price  and   size   8.  Bob  finds  a  camera  he   is  interested  in   9.  Bob  browses  photos   taken  with  the  camera   from  Flickr   10.  Bob  feels  saNsfied   and  purchases  the   camera  
  63. 63. Comic Life
  64. 64. Key points to remember
  65. 65. engage decision makers
  66. 66. Don’t obsess about process
  67. 67. Speak to users as often as possible
  68. 68. Plan!
  69. 69. Make it easy for yourself
  70. 70. Wait for ink to dry before using an eraser
  71. 71. Have fun
  72. 72. Thank you! @almostexact