Uploaded byDeb Aoki
Drawing Stories for Product Development - May 2015
This document summarizes Deb Aoki's presentation on using simple sketching and storyboarding for product development. Some key points: - Drawings can help teams communicate abstract ideas and user experiences more quickly and powerfully than text alone. It provides a "big picture" perspective. - Sketching is a fast, cheap, and fun way to get everyone on the same page, clarify vague ideas, and explore concepts before extensive design or development. - Examples are provided of how sketching can help with brainstorming, understanding customers, illustrating pain points, selling ideas, testing concepts, and more. - Tips include keeping stories short and simple, using color selectively, and asking
More Related Content
Similar to Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015
- 1. DEB AOKI sr. informationexperience designer citrix EI Product Management Community of Practice Monthly Meeting May 21, 2015 DRAWING STORIES FOR PRODUCT DEVELOPMENT simple sketching and storyboarding for collaboration, research, and user-centric product design
- 2. HELLO. UX Design +Content Strategy + Comics + Manga Nerd = Deb Aoki
- 3. I LOVE COMICS.I READ COMICS. I DRAW COMICS. • Bento Box in the Honolulu Star-Advertiser 3
- 4. 4 I WRITE ABOUTCOMICS TOO.
- 5. 5 MEANWHILE, MOST OFMY JOBS WERE ABOUT WRITING FOR THE WEB
- 6. 6 THEN I GOTA CONTENT STRATEGY JOB AT…
- 7. And suddenly, mydrawing skills came in handy again. 7
- 8. 8 NOW I’M AT… Istill write, but now I mostly draw. …which is pretty awesome
- 9. PICTURES > WORDS WHYWRITE WHEN YOU CAN DRAW IT INSTEAD?
- 10. Focuses on human needs andconcerns instead of just technology / business needs or limitations Participants / customers feel heard and understood Visuals are memorable and can lead to new insights Drawings are more FUN! and more engaging than just text WHY DRAW PICTURES?
- 11. PICTURES CAN HELPYOUR TEAM COMMUNICATE AND FOCUS ON YOUR CUSTOMERS’ NEEDS 11 • Pictures can communicate quickly and powerfully, especially abstract ideas and user experiences. It’s a universal language! • It’s very persuasive! Pictures can evoke emotions, empathy, and inspire action • Provides a ‘big picture’ perspective of the entire user experience, goals & messaging • Emphasizes that concerns are about customers, not just about your opinions as a designer/researcher/product manager/engineer
- 12. DRAWING IS AFAST, CHEAP AND FUN WAY TO CHECK IDEAS, GET ON THE SAME PAGE 12 • Easy way to check the end-to-end experience to check for gaps, potential issues. If you can’t illustrate it, it may not make sense / may not matter to user • Helps get everyone on the same page, clears up anything that’s vague or unresolved • Faster and cheaper than coding clickable prototypes or designing wireframes, or polished page mock-ups • It’s informal and fun! so it encourages participation and open discussions
- 13. HOW CAN SKETCHINGHELP WITH PRODUCT DESIGN? I’M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
- 14. BRAINSTORM IDEAS: shoppingcart PICTURES > WORDS: STORYBOARDING AT EBAY 14
- 15. BRAINSTORM IDEAS: customerjourney mapping PICTURES > WORDS: STORYBOARDING AT EBAY 15
- 16. BRAINSTORM IDEAS: visionworkshops PICTURES > WORDS: STORYBOARDING AT EBAY 16
- 17. PAINT A “BIGPICTURE”: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 17
- 18. PAINT A “BIGPICTURE”: thanksgiving 2012 PICTURES > WORDS: STORYBOARDING AT EBAY 18
- 19. EXPLAIN HOW ITWORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 19
- 20. EXPLAIN HOW ITWORKS: xenmobile storyboard PICTURES > WORDS: STORYBOARDING AT EBAY 20
- 21. UNDERSTAND CUSTOMERS: user/stakeholder personas 21 Mobileworkers Managers/ employers Café owners Citrix / GoTo Meeting Designers/PMs/Devs
- 22. UNDERSTAND CUSTOMERS: gotomeeting personas 22 The Butler “You can count on me!” The Investigator “I need all the facts” The Facilitator “I’m here to help” The Networker “I connect people” The Sprinter “Let’s get this done quickly” The Preparer “I need time to plan carefully”
- 23. UNDERSTAND CUSTOMERS: customerinterviews 23
- 24. ILLUSTRATE PAIN POINTS:shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 24
- 25. ILLUSTRATE PAIN POINTS:too many buttons PICTURES > WORDS: STORYBOARDING AT EBAY 25
- 26. SELL AN IDEA:cubefree app PICTURES > WORDS: STORYBOARDING AT EBAY 26
- 27. SHARE IDEAS: innovationsummit meeting notes PICTURES > WORDS: STORYBOARDING AT EBAY 27
- 28. TEST A CONCEPT:group gifts PICTURES > WORDS: STORYBOARDING AT EBAY 28
- 29. TEST A CONCEPT:go together PICTURES > WORDS: STORYBOARDING AT EBAY 29
- 30. PICTURES > WORDS:STORYBOARDING AT EBAY 30 TEST A CONCEPT: cloud workspace services
- 31. ‘BUT I CAN’TDRAW’ If you can draw dots, circles, squares and lines, you can draw. Yes, you can!
- 32. CIRCLE + SQUARE+ DOTS + LINES = PEOPLE! PICTURES > WORDS: STORYBOARDING AT EBAY 32
- 33. ADD A FEWTWEAKS = DIFFERENT PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 33
- 34. MORE WAYS TODRAW PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 34 DAVE GRAY Gamestorming BRANDY AGERBECK The Graphic Facilitator’s Guide
- 35. MORE WAYS TODRAW PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 35 DAVID SIBBETTS Visual Meetings DAN ROAM The Back of the Napkin
- 36. EVEN MORE WAYSTO DRAW PEOPLE PRESENTATION TITLE GOES HERE 36 MIKE ROHDE The Sketchnote Handbook MARTIN HAUSSMAN Biklablo
- 37. CIRCLE + DOTS+ LINES = FACES AND EMOTIONS PICTURES > WORDS: STORYBOARDING AT EBAY 37
- 38. ADD FEATURES =DIFFERENT CHARACTERS PICTURES > WORDS: STORYBOARDING AT EBAY 38
- 39. BODY LANGUAGE CANSAY ALOT PICTURES > WORDS: STORYBOARDING AT EBAY 39
- 40. WORD BALLOONS… WITHOUTWORDS PICTURES > WORDS: STORYBOARDING AT EBAY 40
- 41. CONNECT CONCEPTS WITHLINES PICTURES > WORDS: STORYBOARDING AT EBAY 41 Direct connection / action Tentative action Convoluted path Bouncing
- 42. DRAW COMMON CONCEPTSIN A FEW STROKES 42 idea lock / security time listen cloud laptop NO! money fast slowsmartphone email
- 43. DRAW COMMON PLACESIN A FEW STROKES
- 44. DIFFERENT PERSPECTIVES OFUSER INTERACTION PICTURES > WORDS: STORYBOARDING AT EBAY 44 CLOSE-UP Emphasis on screen/finger interaction MID-TORSO Emphasis on screen SEMI-CLOSE Emphasis on device / human context/use FULL BODY Emphasis on ‘real world’ context/place of use
- 45. THE LANGUAGE OF COLOR Howto communicate different personas, experiences, and emotions with color
- 46. USE COLOR TOCONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 46
- 47. USE COLOR TOCONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 47 BLACK – Most important info / facts GREY – Secondary info / tentative RED – important / error / danger / stop GREEN – success / money / nature / go BLUE – calm / cool / water / sky / masculine ORANGE – cheerful / hot / caution PINK – fun / playful / youthful / feminine PURPLE – regal / sophisticated / serious BROWN – earthy / simple / dirty YELLOW – bright / accents / hard to read as text
- 48. USE COLOR SELECTIVELYfor emphasis, convey emotions PRESENTATION TITLE GOES HERE 48
- 49. COLORS can bean easy way to differentiate personas PRESENTATION TITLE GOES HERE 49 Female / Male Army / Navy Biz A / Biz B Differences within a group Japan / US / Germany Citrix / Apple / Google
- 50. COLORS can showdifferent users’ experiences Colors can indicate different groups of people, make it easier to show user interactions in a physical environment
- 51. COLORS can bean easy way to follow flow of information Colors can indicate different teams / stakeholders, make it easier to follow information flows
- 52. 6 VISUAL STORYTELLING TIPS PLUS:2 SITUATIONS WHERE IT’S PROBABLY BETTER TO PUT DOWN YOUR PEN
- 53. KEEP YOUR STORYSHORT 53 Your story should be limited to 10-12 panels or less if possible. If it needs more panels, consider breaking story into segments.
- 54. SHOWING IT >SAYING IT 54 Let the pictures tell the story. If you removed the captions, would it still make sense?
- 55. KEEP CAPTIONS SHORTAND SIMPLE 55 Captions should be simple, easy to skim. Too much text = visual clutter
- 56. LIMIT YOUR COLORPALETTE 56 Use color selectively to emphasize important things, communicate differences, or convey emotions. Too many colors can be distracting
- 57. LEFT TO RIGHT,TOP TO BOTTOM 57 Give the reader a predictable, intuitive path to read your story. Don’t leave them wondering what to look at next.
- 58. PICTURES, NOT PERFECTION 58 Speed,simplicity and clarity is more important than making “perfect” pictures. It doesn’t have to be beautiful/detailed to communicate ideas.
- 59. SKETCHING ISN’T ALWAYSTHE ANSWER 59 It’s difficult to draw what you don’t understand / can’t visualize Beware of situations where the speakers are using a lot of unfamiliar or complex/industry- specific terms/acronyms/concepts Know your audience Sometimes a “cartoon”/“comic” isn’t appropriate when the topic is serious / politically sensitive. It can feel “cutesy,” disrespectful / un-businesslike in some situations
- 60. ASK LISTEN DRAW! Lather, rinse, repeat
- 61. AS YOU DRAW,ASK THESE QUESTIONS: PICTURES > WORDS: STORYBOARDING AT EBAY 61 Who is the user/customer? • What’s most important to them? • What are they trying to do / What do they want to do? • Does the user have any fears/obstacles? What’s the problem that we’re solving for the user? • What do they need to know before trying this? • What are their motivations and needs? What’s at stake? What’s in it for them? (benefits) • Why would they click the button/download / sign up? • How are we making their lives better/easier/simpler? • What happens if they don’t use this? • What would they do instead?
- 62. AS YOU DRAW,ASK THESE QUESTIONS: PICTURES > WORDS: STORYBOARDING AT EBAY 62 How is this different/better than similar services / experiences from other companies? (differentiators) • Why would they choose this? • Why would they opt to not try this? What if something goes wrong? • What can they do to fix things? • What will they see next? / What will happen? • Where can they get help? These questions can provide clarity of purpose and help to create a shared vision for your project
- 63. READ LEARN DRAW! Recommended books, classes and organizations to get started
- 64. 64 READ ALL ABOUTIT: drawing for meetings & ux BRANDY AGERBECK The Graphic Facilitator’s Guide DAVID SIBBETTS Visual Meetings DAN ROAM The Back of the Napkin KEVIN CHENG See What I Mean: How to Use Comics to Communicate Ideas SUNNI BROWN The Doodle Revolution JEANNEL KING Draw Forth
- 65. 65 READ ALL ABOUTIT: drawing, comics, and sketchnotes SCOTT McCLOUD Understanding Comics Making Comics ED EMBERLEY Drawing Books MIKE ROHDE The Sketchnote Handbook The Sketchnote Workbook MARTIN HAUSSMAN Biklablo JESSICA ABEL & MATT MADDEN Drawing Words and Writing Pictures Mastering Comics
- 66. 66 MORE WAYS TOLEARN: workshops and classes IFVP Professional group for graphic facilitators http://ifvpcommunity.ning.com/ THE GROVE graphic facilitation services, classes, and books www.grove.com KOMMUNIKATIONSLOTSEN Graphic facilitation classes & services http://kommunikationslotsen.de VERBAL TO VISUAL CLASSROOM Blog and online drawing classes http://www.verbaltovisualclassroom.com/
- 67. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER:@DEBAOKI ALSO AT: HTTP://WWW.MANGACOMICSMANGA.COM
Editor's Notes
- #3 Hi, I'm Deb Aoki. By day, I'm a “senior information experience designer” at Citrix, which is a fancy way of saying that I’m basically a hybrid of a content strategist, a user experience designer, and a storyteller.
- #4 But I also have another life: I draw comics. Throughout high school and college, I drew comics for my friends, then for my high school and college newspapers, then for various "alternative" newspapers, then eventually a "mainstream" newspaper, The Honolulu Advertiser, which is now the Honolulu Star-Advertiser. My comic strip Bento Box has been featured in The Advertiser since 1996.
- #5 I'm also a semi-professional nerd. I write about manga (Japanese comics) for Publishers Weekly, Anime News Network, and my own site, MangaComicsManga.com.
- #6 For many years, my day job has been mostly about writing – I've worked at Microsoft/MSN, Ogilvy and Mather, Kaiser Permanente, Disney Store, Citysearch and Art.com, mostly as a web / marketing writer. Drawing was just something fun I did on the side.
- #7 Then in 2007, I started work at eBay. That's where I found out that my super-fun, kinda-nerdy hobby of drawing comics could be useful in my day-to-day work in the user experience design.
- #8 In the process of being a content strategist at eBay, I found myself using drawing more and more to communicate and collaborate with my team members.
- #9 Then I got my job at Citrix. And that’s when my day-to-day work became more about drawing than writing. I do a lot of things at Citrix, but mostly, I guess you could say I’m someone who helps them tell stories.
- #10 Here's why storyboarding can be more effective than just dry powerpoint decks with pie charts, bulletpoints and screenshots:
- #11 There are lots of reasons to draw pictures. It helps to focus the attention on human needs and concerns, rather than the technology / business needs or limitations. When I do sketchnoting/graphic facilitation and draw/write what participants say, they feel heard and understood. Visuals are very memorable! And can help spark others creativity It’s more fun – it’s way more engaging to see pictures than just a screen full of text and bulletpoints.
- #12 It communicates ideas quickly and powerfully. Pictures can convey ideas more concisely than just text. Universally understandable - Pictures can make information easier to digest, especially when you're presenting to people for whom English is not their first language. Provides ‘big picture’ perspective. Too often, stakeholders get focused on “their part” of the project/product. By pulling back, and looking at the whole end-to-end user experience, it can help everyone get on the same page about goals and key messages Persuasive –Describing customer pain points is different than showing a customer looking lost, frustrated or angry. Pictures like this create empathy for the customer, inspires immediate action Captures attention. Cuts through powerpoint clip art fatigue to get noticed and understood Emphasis on the customer experience. By telling the story from the customer’s point of view, it shows that the concerns you’re raising are on the customers’ behalf, not your agenda/personal opinion
- #13 Faster and cheaper than coding - Drawing offers a quick way to hash out ideas and get rough concepts in front of users, rather than designing detailed page mockups/wireframes, or wrestling code to create clickable prototypes for testing. Check the end to end experience for gaps, potential issues – By following what the user sees / goes through from end to end, you can often identify gaps / things that would otherwise be missed when stakeholders/team members focus on looking at the project based on their scope of responsibility. If you can’t illustrate it, maybe it doesn’t make sense. A lot of times, tech / business team members fall back on terminology to explain things than really explaining what something is, how it works, how it impacts the user in specific ways. If I can’t visualize it, that means I don’t understand it and I can’t draw it. Asking questions so I can draw a picture of the situation can be a useful technique to provide a “gut-check”/”reality check for a project. Get the team on the same page - Pictures can help confirm a shared understanding, or point out areas/issues that need to be discussed and resolved. It encourages participation. Pictures can convey ideas more concisely than just text. Pictures also inspires people to chime in / participate because they’re playful / not “final” ideas
- #14 There are a couple of different ways I’ve used storyboarding and sketching at eBay and at Citrix.
- #15 To brainstorm ideas – or to refine concepts Believe it or not, eBay did not have a shopping cart on our site for many years. We have a lot of different sellers, that each accept different payment methods, offer different shipping options, and on and on. It was so complicated that several teams tried several times to do it, and gave up. So we had a bunch of brainstorming sessions to try to wrap our heads around the problem and possible solutions – and sketching was a big part of getting everyone on the same page.
- #16 Brainstorming: customer journey mapping – This is an example of a workshop where I met with various stakeholders from the business, design and technical development groups to map out what the various touch points / stages that a customer would go through as they become aware of Citrix Workspace Services through trying it, then buying it, then installing/troubleshooting it, and then on to being a loyal/happy user of the product (or not). I initially drew the steps on colored post it notes, then refined them onto more finished drawings on index cards, and taped them on a white board to show the steps on a timeline. We used colored dots to indicate happy/unhappy moments and crucial decision points. This allowed us to move steps around, add/remove/edit steps, and later present and discuss them.
- #17 Brainstorming: vision workshop This was from a 1-day workshop with Citrix’s mobility apps group as we tried to help them envision what our company would look like, be perceived as in 2020 (5 years) This was done live in front of the group on large sheets of butcher paper.
- #18 Paint a big picture – shopping cart This shows the buyers’ shopping ‘journey’ – as they go from ‘just browsing’ to ‘let me throw my money at you, eBay!” I wanted to show where the various pages were on the ‘intent to buy’ spectrum, and how things like merchandising and promotions can distract a user at that moment when they are ready to buy. Note the colors on the arrow – Blue indicating a “cool” mood, when the shopper is “just looking” to Green, when the shopper is ready to checkout and pay.
- #19 Paint a big picture – Thanksgiving 2012 We did this about… 2 years ago. We had a lot of new projects / improvements on our product roadmap, but eBay being eBay, a lot of times, it’s hard to see the forest for the trees. That is, everyone focuses on their own project and doesn’t see how it impacts users as a whole. The story was about an eBay employee who goes home for Thanksgiving dinner, and gets bombarded with questions and complaints from his relatives about eBay. Then we pick up the story 2 years later, when he returns for Thanksgiving, and all his relatives tell him about their recent good experiences shopping on eBay. Everyone’s happy except the skeptical uncle… who comes around by the end of the story. The artwork was converted to vector format, so it could be blown up, and the monochrome characters were laid out over the color pages, so they’d pop. The entire story was presented as a skit at the company meeting, and distributed as a printed comic book.
- #20 How it works: Green Box Green box is a program where eBay teams up with the USPS to offer sturdy, reusable boxes to sellers that are delivered to the seller, then later returned to the post office, or simply used again. This diagram uses the red boxes to show the seller’s part of the process, the blue boxes illustrate the buyer’s role, and the green arrows and box show the progress of the box. We used this diagram to show at a glance how the product would work at a new product idea fair. The idea won the top prize that year, and was eventually made into a real product at eBay.
- #21 How it works: XenMobile storyboard For the Fall 2013 release of XenMobile, I worked with the product managers and marketing department to create this 2-page comic strip showing how a user could use the new features in XenMobile. This comic strip was featured on the Citrix Xenmobile website: http://www.citrix.com/products/xenmobile/overview.html
- #22 UNDERSTAND CUSTOMERS: user personas - Another way I use sketching is to create quick user personas – to put a face on the different types of people who use a product/service. In this case, this was for CubeFree, an app designed to be used by mobile workers who work from cafes/shared workspaces. Needed to represent the workers, the workers’ managers/employers, the café owners, and the citrix product teams.
- #23 Brainstorming: user personas – Here’s another example of user personas – this was for GoTo Meeting, to show the different personality types / needs of users I try to show the personality traits in their facial expressions, body language. I also try to vary the ages, ethnicities, etc. to show diversity whenever possible.
- #24 Understanding Customers – Here’s one page of a sketch I did with a Citrix sales executive, talking about his customer’s issues with security and onboarding. By sketching what our customers were telling us, it was a way for us to show that we REALLY listened to what they had to say, and a way to share these insights with our sales and product development organization.
- #25 Illustrate pain points: shopping cart One unique aspect of using a shopping cart on eBay is that many of the items on sale are one-of-a-kind, or available in very limited quantities. But we also couldn’t reserve items if someone put it in their cart – the items had to remain available to other buyers. So I used the metaphor of someone going tot the supermarket to buy cereal – he puts the cereal in his cart, then he remembers he needs milk. So while he’s looking at his milk, someone snatches his cereal away and buys it before he does. Illustrating the problem by using everyday, non-website situations really helped us to see how these situations would be really frustrating to users.
- #26 Illustrate pain points: too many buttons One thing that happens in eBay is that we offer our users a lot of different ways to buy something or save it for later. So one of the by-products of that is a page with a lot of buttons! Quite often, we design based on what our one improvement/change would look like on the site – but often, we don’t take into account the cumulative effect of many changes made by many teams to the same page. This page was part of a story about a user who hears about a cool thermostat, then tries to go to eBay to buy it – and along the way, is confronted with a dizzying array of choices.
- #27 Sell an idea – Cubefree This is a simple storyboard presentation for Cubefree, a Citrix Innovation project created by a small team of designers/devs. It’s a mobile app that helps mobile workers find cafes/shared workspaces nearby to work in, see ratings of a café’s wifi, noise level, crowds/seat availability, share a table with a friend, share ratings with other users, and be invited to try other Citrix mobile work apps like GoTo Meeting. This presentation helped the team get further funding to develop and market the app. It’s now available on the Apple App store. http://www.citrix.com/go/cubefree.html
- #28 SHARE ideas –Innovation Summit meeting notes I attended the Innovation Summit with design thinking leads from Nordstrom, Fidelity, JetBlue and Citrix, and took notes about what was discussed and taught at the 2-day sessions. This ended up being over 12 pages of notes that were distributed to the various attendees as a way to remember and share what we learned.
- #29 Test a concept – Group Gifts This was part of a series of four concepts for holiday promotions that we put in front of focus groups in the US and UK. Rather than have them look at page mocks, we drew stories that showed real life situations where people would use the product and why. One concept was favored by the people from the business side, because it was a variation on Groupon, which was really hot at the time. Another concept was favored by the technical / product development side because it would be the simplest to build Another concept was favored by the designers, because they thought it would be the most attractive / interesting / different idea to explore. All three of these concepts were beaten handily by this one: Group Gifts. To our surprise, this particular concept, group gifts ended up being the idea that resonated best with users. They could see themselves doing the things shown in the storyboard – that’s something that wouldn’t have been as immediately apparent or understandable to the users if we just showed them a series of page mock-ups.
- #30 Test a concept – Go Together This was another early concept we put in front of users that helped determine the development of this product. In this case, Go Together was geared to make it easier for friends to buy tickets for a concert or sports event as a group, and get seats together, and get reimbursed easily. We couldn’t decide if it would make more sense to have the primary ticket buyer buy the tickets first, and then try to get reimbursed later, or to wait to get the monies first before buying the tickets. These quick illustrations of the pros and cons of each scenario were put in front of users who were asked which tradeoffs (pay first/worry about being reimbursed later vs. get reimbursed first, then buy tickets later) made the most sense to them.
- #31 Different colors / different perspectives This is a storyboard illustrating Citrix Workspace Services, a cloud-based service that allows IT admins to create virtual desktops quickly from the cloud instead of installing it on onsite servers. The blue boxes indicate the point of view of the IT admin. The purple boxes indicate the point of view of the end user, a new manager who needs to have her desktop available quickly when she’s hired, and later, to get desktops created for contract employees quickly, then later removed when the contractors’ projects end. It was a good way to test our hypotheses about whether this product would resonate with our customers’ needs, and get their feedback on what they were most interested in early on in the development process.
- #32 There are a couple of different ways we use drawing/storyboarding at eBay:
- #33 Circle, box, dots and lines = a person!
- #34 Add some details, you get different people!
- #35 More ways to draw people Like Dave Gray – author of GameStorming Like Brandy Agerbeck, author of The Graphic facilitator’s guide
- #36 More way to draw people, Like David Sibbetts, founder of The Grove and author of Visual Meetings: How Graphics, Sticky Notes and Idea Mapping can Transform Group Productivity http://amzn.to/1FdGfJY Like Dan Roam, author of The Back of the Napkin http://amzn.to/1lAEoSy
- #37 Or draw people like Mike Rohde, the author of The Sketchnote Handbook and The Sketchnote Workbook http://amzn.to/1LprJ3E http://amzn.to/1CnNq0w Or draw people in a just a few strokes, the Bikablo way! Bikablo by Martin Haussman http://us.neuland.com/literature/
- #38 Drawing faces with different emotions is as simple as using a few dots and lines. Eyebrows and mouths can do a lot to make a face expressive!
- #39 Add a few extras and you’ve got people with different personalities, ages, and genders.
- #40 Body language Sometimes you don’t even need a facial expression to show what’s happening, what the mood or action is
- #41 You don’t necessarily need to put words in your word balloons!
- #42 Solid lines indicate direct connections and actions, while dotted lines can indicate tentative or actions/paths that happen only sometimes.
- #43 You don’t have to learn how to draw everything in the world, but just a few key things that illustrate commonly used business concepts.
- #44 The same principle can be used to draw different places. You don’t have to add too much detail – just enough to give the viewer an indication of the place you’re talking about.
- #45 When you do storyboards, try to vary the point of view / what’s in the frame. This will make your storyboards more interesting to look at.
- #47 The five rangers! The red one is always the leader, the blue one is the quiet but effective 2nd in command. Yellow ranger is the comic relief. Green ranger is the young, eager one, while pink ranger is always the chick. Shotaro Ishinomori tapped into the simple language of color to convey different personalities.
- #48 Use color in your sketching to convey different concepts. For example, I use red for emphasis or error conditions, green = money, success / happy paths, etc.
- #49 Color to convey emphasis, emotions Red is an eye-catching color that can draw attention to important things, show emotions like anger or love, or can show a “stop” or “no” sign to show that something is not allowed Blue is a peaceful color that can be used to show dreaminess, seriousness, water, depression, air, etc. Green is good for money / success / “go” Yellow can be happy, show illumination, or can show caution
- #50 Colors to differentiate personas Gender – pinks/purples/red/orange can be used to indicate female, blues/greens can be used to indicate male Pastels can indicate babies / youth / cuteness Use colors associated with the group – for example, Green for army, blue for navy Simply use different colors to show different/rival groups of people. You can emphasize their differences by giving them different shaped heads Solids/Open – Need to show differentiation within a group? Try solids and open versions Nationality – make use of flag colors/designs to show people from different countries Use company colors and logos to indicate players from different companies. Here’s Citrix “C” / Apple / Google
- #51 Colors to show different user flows This was a diagram I created to show how customers and various Citrix employees would interact at one of our trade show events.
- #52 Colors to differentiate personas Used different colors to indicate different groups of stakeholders in Citrix content creation. Purple = product manager Dark Blue = Technical / Developers / Architects Red = Content Strategy / Technical Writers Green = Marketing / Sales Aqua = Worldwide Readiness / Technical/Customer Support / Education
- #53 There are a couple of different ways we use drawing/storyboarding at eBay:
- #54 Keep it short and simple if possible – remember that people’s attention spans are finite. Keep your story concise, and mercilessly edit out steps/panels if it isn’t essential to telling your story / conveying important info. Stick to one idea / action per panel if possible. This one is for “Snap Support” an app that lets users ask for tech help using their phone / camera to communicate with a support tech.
- #55 Showing it is greater than saying it – Let the pictures tell the story whenever possible. If you removed the captions, would it still make sense?
- #56 Short text – keep captions short and easy to skim. Giving the reader too much text to digest slows down the story, makes it harder to understand. It also creates visual clutter. Shorter text is more powerful, easier to digest, makes the content more memorable
- #57 Limit your color palette – Resist the urge to use every color in your story. Selectively used color can draw the eye to important things. Too much color = the viewer doesn’t know where to look. Color can also be used as way to heighten emotion, convey information. Use it thoughtfully. I usually stick to one ‘emphasis’ color, a complementary/support color in a lighter tone, and the rest in blacks and greys. I tend to use minimal colors when I use screenshots in a story, so that the screenshots “pop” – have greater emphasis than the pictures.
- #58 Left to right / top to bottom – in general, reading comics is like reading text. People are used to reading from left to right, from the top left corner to the bottom right corner. Don’t confuse readers by making a complex layout. Japanese comics are right to left, but since we’re mostly talking about western/English audiences, don’t worry about it.
- #59 Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- #60 Sketching isn’t always the answer I’ve been put in situations where I’ve been asked to draw during meetings when I had no idea what the speakers were talking about. It’s really hard to interpret concepts into pictures when you don’t know what’s being said. I’ve also encountered situations where the people I’m working with are so used to talking in tech or business lingo that they simply can’t break things down into “human” terms / point of view unless I spend a lot of extra time trying to prod them to provide “real world” examples, or explain things in “plain english” in a way that I can grasp what they’re really saying well enough to interpret what they’re saying into drawings If it’s a more collaborative setting where I can stop the speaker and say “can you explain what you mean by that?” or “can you give me an example?” without holding up the flow of the meeting, then I can usually get by. You don’t want to be in a situation where you’re slowing things down unnecessarily. In those cases, it’s better to spend more time listening and asking questions later than interrupting the flow of the discussion. Know your audience: sometimes a sketch can feel too “cutesy” and “gimmicky” in certain situations. Comics are sometimes thought of as “kid stuff” and can feel inappropriate in certain situations. Remember, it’s not about you creating a “work of art” that only you can understand and appreciate. If it doesn’t help you communicate and collaborate with your team, then it’s probably a good idea to put down your pen and wait for another opportunity to use your drawing skills.
- #61 Ask! Listen! Draw!
- #62 Who is the customer? Identify their needs, their limitations, their hopes/desires, their fears What is the problem we’re trying to solve? Ask why we’re creating the solution, and really ask if we’re solving an actual user need, vs. pushing something that is technically feasible or something that only has benefits for the business Understand the motivations for the user. Are we really making their lives easier/letting them do something faster, cheaper, etc? If they didn’t have this, would they be able to accomplish the same things faster/easier/cheaper? What’s in it for them? How do they benefit by using this product/service?
- #63 How is this different than our similar services? Your product/service doesn’t exist in a vacuum. Customers will be comparing it with other ways to solve the same problem. How does your product/service measure up? What makes your product/service more compelling/better than the competition? What if something goes wrong? Ask what the user should do if they have any problems or questions. Have we provided an intutive way for them to self-help/ solve their problems on their own? Where can they get help? Asking these questions early in the design process can help iron out potential issues up front, and provide clarity and focus later as you write content
- #64 Read! Learn! Draw! Here are some recommended books, classes and organizations you can check out for more info.
- #65 Suggested Reading The Graphic Facilitator’s Guide: How to Use your listening, thinking and drawing skills to make meaning by Brandy Agerbeck http://amzn.to/1mgfJsY Visual Meetings: How Graphics, Sticky Notes and Idea Mapping can Transform Group Productivity by David Sibbetts http://amzn.to/1FdGfJY The Back of the Napkin by Dan Roam http://amzn.to/1lAEoSy See What I Mean: How to Use Comics to Communicate Ideas by Kevin Cheng http://amzn.to/WM2pjY The Doodle Revolution: Unlock the Power to Think Differently by Sunni Brown http://amzn.to/1cQbDnN Draw Forth: how to host your own visual conversations without having to be a professional artist or a full-on facilitator by Jeannel King http://amzn.to/1Gsixvp
- #66 Suggested Reading Ed Emberly’s Drawing Books – Make A World and Faces http://amzn.to/1Be4iEk http://amzn.to/1SiwNvg Understanding Comics and Making Comics by Scott McCloud http://amzn.to/1xMm2d1 http://amzn.to/1IGMIAj The Sketchnote Handbook and The Sketchnote Workbook by Mike Rohde http://amzn.to/1LprJ3E http://amzn.to/1CnNq0w Bikablo by Martin Haussman http://us.neuland.com/literature/ Drawing Words and Making Pictures by Jessica Abel and Matt Madden http://amzn.to/1kU4uFy Mastering Comics by Jessica Abel and Matt MaddenEndFragment http://amzn.to/1kZdq8k
- #67 Classes and Organizations The Grove teaches graphic facilitation classes at the Presidio in SF. They also have lots of books and tools for graphic recorders. It’s founded by David Sibbett, who wrote “Visual Meetings” The Verbal to Visual Classroom offers self-guided online classes, along with videos and guided assignments for a fairly reasonable price International Forum of Visual Practitioners is a professional group for graphic facilitators and recorders. They have an annual conference where they share ideas and techniques, and a directory where you can find and hire a graphic recorder/facilitator. Kommunikationslotsen is a Germany-based consultantcy that teaches classes and offers graphic facilitation services in both German and English. The founder is the creator of the Biklablo series of books/style of drawing. ALSO: CENTER FOR GRAPHIC FACILITATION Blog and online drawing classes http://www.graphicfacilitation.blogs.com NEULAND Graphic facilitation books and supplies http://www.neuland.com/