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.211 views

Category:

Design

3 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Make your first UX Comic </p><p>Bonny Colville-Hyde </p><p>@almostexact </p><p>#uxinthecity </p></li><li><p>Intro </p><p> About me What were going to do </p><p>Make a three panel comic Understand the benefits of using comics to communicate user experiences </p><p>Look at different communica</p></li><li><p>The Brief: </p><p> BuddyCam is a new website and mobile app that connects people through photos </p><p> The team at BuddyCam want to understand what their poten</p></li><li><p>How do we make badass users? Kathy Sierra </p></li><li>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</li><li>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</li><li>Omar Omar likes to take silly pictures and funny selfies that make his friends laugh. He enjoys geSng reac</li><li>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</li><li><p>TASK! - Get into pairs - Run a mini depth interview - Find out if your partner uses and photo sharing </p><p>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? </p><p>- MAKE NOTES! </p><p>5 mins </p></li><li><p>User research is </p><p>Awesome. </p></li><li><p>Documenting &amp; communicating Human experiences is </p><p>hard </p></li><li><p>Deliverables </p><p>Suck </p></li><li><p>If we dont engage decision makers, we fail. </p></li><li><p>BuddyCam Stakeholders </p><p>Bob, Owner/Founder/MD/Big Boss Thinks everyone uses the internet and apps just like he does. Has a short a`en</p></li><li><p>BuddyCam Stakeholders </p><p>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 </p></li><li><p>Communication is </p><p>hard </p></li><li><p>We can engage people with experiences. </p></li><li><p>People love Stories </p></li><li><p>People Love Comics </p></li><li><p>xkcd.com/386 </p></li><li><p>Why are comics so successful? </p></li><li><p>Verbal </p><p>Non Verbal </p></li><li><p>Facial Expressions Eye contact Body language Gestures Speech </p></li><li><p>The magic of non-verbal communication </p></li><li><p>But comics are for kids My Team wouldnt get it </p></li><li><p>Charles Schulz </p></li><li><p>BuddyCam: What have we got? </p><p> Brief Stakeholders A mini persona and some interview data A general awareness of the market </p></li><li><p>How do we turn this into a comic? </p></li><li><p>1 2 3 </p><p>4 5 6 </p><p>1: Plan the story 2: Design the characters 3: PracNce the characters emoNons </p><p>4: Draw the comic 5: Get feedback 6: Refine the comic </p></li><li><p>Planning the Story </p><p> Compare your interview data with your persona: what do they have in common? Are there themes? This will become your character and their context </p><p> How can BuddyCam make your character a badass? </p></li><li><p>TASK! </p><p>Plan (dont make) your three panel comic strip 1: Introduce the character &amp; context 2: Show how the product is used 3: Show the outcome </p><p>WHO WHAT WHY </p></li><li><p>Single panel: </p></li><li><p>Strip: </p></li><li><p>Pages: </p></li><li><p>Yay! Gutters! </p></li><li><p>? !!! </p></li><li><p>storytelling </p></li><li><p>Buy this </p></li><li><p>Your character </p></li><li><p>Drawing expressions </p></li><li><p>Sad Neutral Happy </p><p>TASK! - Draw five circles/head shapes - Add expressions on each face: </p><p> Start with sad on the left, and end with happy on the right </p></li><li><p>Drawing figures </p></li><li><p>TASK! - Draw two stick people standing next to </p><p>each other, showing different emotions - The emotions should be opposites </p><p>Happiness Sadness </p><p>Fear Depression </p><p>Amusement Boredom </p><p>Excitement </p><p>Sorrow </p><p>Pride </p><p>Relief </p><p>Shame </p><p>Joy </p></li><li><p>TASK! Make your 3 panel comic </p><p>WHO WHAT WHY </p></li><li><p>Task! Get feedback! </p><p> Get into pairs and share your comics Collect feedback: does your comic communicate what you intended? </p></li><li><p>What would Bob and Jenny say?! </p></li><li><p>Comics in action </p></li><li><p>Share research (A.K.A: Bringing research to life) </p></li><li><p>Experienced </p><p>Novice </p><p>Skep</p></li><li><p>Test ideas with users </p></li><li><p>Kevin CHENG, Yahoo </p></li><li><p>Develop personas </p></li><li><p>Meet Denise: </p></li><li><p>Share &amp; explore ideas </p></li><li><p>Sco` McCLOUD, Google Chrome </p></li><li><p>Comic created for conceptual iOS fitness app Training Buddy </p></li><li><p>Comic created for conceptual iOS fitness app Training Buddy </p></li><li><p>A scenario Were working for an ecommerce photography site called The </p><p>Camera Shop. They sell lots of different cameras and photography gear to a </p><p>variety of customers, though most of them are passionate photographers. </p><p> 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). </p><p> Before they commission a large piece of research, they want to see what insight we can give about this audience. </p><p> We need to quickly create a comic that shares some of the problems and poten</p></li><li><p>Finding an idea </p><p>Via the Money Saving Expert forum </p></li><li><p>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. </p><p> He doesnt want a lot of fancy features, but he does care about the image quality. </p><p> He has up to 100 to spend. He is looking for help to make a decision. </p></li><li><p>Making the story Bob wants to buy a new camera because his current one </p><p>has broken. He wants to replace his camera before he goes on holiday. </p><p> 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. </p><p> 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. </p><p> 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). </p></li><li><p>Planning the comic 1. Introduce Bob 2. Bobs camera has broken </p><p>3. Bob looks for cameras online </p><p>4. Bob gets overwhelmed </p><p>5. Bob finds The Camera Shop </p><p>6. Bob finds The Compact Camera finder </p><p>7. Bob filters compact cameras by price and </p><p>size </p><p>8. Bob finds a camera he is interested in </p><p>9. Bob browses photos taken with the camera </p><p>from Flickr </p><p>10. Bob feels saNsfied and purchases the </p><p>camera </p></li><li><p>Comic Life </p></li><li><p>Key points to remember </p></li><li><p>engage decision makers </p></li><li><p>Dont obsess about process </p></li><li><p>Speak to users as often as possible </p></li><li><p>Plan! </p></li><li><p>Make it easy for yourself </p></li><li><p>Wait for ink to dry before using an eraser </p></li><li><p>Have fun </p></li><li><p>Thank you! </p><p> @almostexact </p></li></ul>