Make Your First UX Comic - UX in the City 2016

Download Make Your First UX Comic - UX in the City 2016

Post on 13-Apr-2017

3.210 views

Category:

Design

3 download

TRANSCRIPT

  • Make your first UX Comic

    Bonny Colville-Hyde

    @almostexact

    #uxinthecity

  • Intro

    About me What were going to do

    Make a three panel comic Understand the benefits of using comics to communicate user experiences

    Look at different communica

  • 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

  • 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
  • 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
  • Omar Omar likes to take silly pictures and funny selfies that make his friends laugh. He enjoys geSng reac
  • 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
  • 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 dont 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

  • 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

  • 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 wouldnt 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 characters 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 (dont 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

  • 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 Were 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 dont 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

  • Finding an idea

    Via the Money Saving Expert forum

  • Whats 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 doesnt 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. Bobs 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

  • Dont 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