Make your first UX Comic

Bonny Colville-Hyde

@almostexact

#uxinthecity

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  

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?  

“How do we make badass users?” Kathy Sierra

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  

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  

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  

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  

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  

User research is

Awesome.

Documenting & communicating Human experiences is

hard

‘Deliverables’

Suck

If we don’t engage decision makers, we fail.

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.  

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.  

Communication is

hard

We can engage people with experiences.

People love Stories

People Love Comics

xkcd.com/386  

Why are comics so successful?

Verbal

Non Verbal

Facial Expressions Eye contact Body language Gestures Speech

The magic of non-verbal communication

“…But comics are for kids – My Team wouldn’t get it…”

Charles  Schulz  

BuddyCam:  What  have  we  got?  

•  Brief  •  Stakeholders  •  A  mini  persona  and  some  interview  data  •  A  general  awareness  of  the  market  

How do we turn this into a comic?

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  

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?  

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  

Single panel:

Strip:

Pages:

Yay! Gutters!

? !!!

storytelling

Buy this

Your character

Drawing expressions

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

Drawing figures

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  

TASK!  Make  your  3  panel  comic  

WHO   WHAT   WHY  

Task!  Get  feedback!  

•  Get  into  pairs  and  share  your  comics  •  Collect  feedback:  does  your  comic  communicate  what  you  intended?  

What  would  Bob  and  Jenny  say?!  

Comics in action

Share research (A.K.A: Bringing research to life)

Experienced  

Novice  

Skep<cal     Trus<ng  

BOB  

SUE  

Test ideas with users

Kevin  CHENG,  Yahoo  

Develop personas

Meet ‘Denise’:

Share & explore ideas

Sco`  McCLOUD,  Google  Chrome  

Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  

Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  

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.  

Finding an idea

Via  the  Money  Saving  Expert  forum  

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.  

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

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  

Comic Life

Key points to remember

engage decision makers

Don’t obsess about process

Speak to users as often as possible

Plan!

Make it easy for yourself

Wait for ink to dry before using an eraser

Have fun

Thank you!

@almostexact