make your first ux comic - ux in the city 2016
TRANSCRIPT
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