Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DEB AOKI
sr. customer experience designer
citrix
November 2, 2015
DRAWING STORIES
FOR CONTENT
STRATEGY
simple sketching an...
HELLO.
UX Design + Content Strategy + Comics + Manga Nerd = Deb Aoki
I LOVE COMICS. I READ COMICS. I DRAW COMICS.
• Bento Box in the Honolulu Star-Advertiser
3
4
I WRITE ABOUT COMICS TOO.
5
BUT FOR THE LAST 20 YEARS, MOST OF MY JOBS
WERE ABOUT WRITING FOR THE WEB
6
THEN I GOT A CONTENT STRATEGY JOB AT…
And suddenly, my drawing skills came in handy again.
7
8
NOW I’M AT…
I still write, but now I mostly draw.
…which is pretty awesome
LET ME TELL YOU
A STORY…
How I figured out the power of storyboarding for user experience design
THE CHALLENGE: ebay needs a new holiday promotion
10
We did a lot of brainstorming, a lot of sketching, and narrowed it do...
HOLIDAY CONCEPT 1: group deals
11
HOLIDAY CONCEPT 2: ebay game
12
HOLIDAY CONCEPT 3: v.i.p. sales
13
HOLIDAY CONCEPT 4: group gifts
14
I WANT TO DO THIS IDEA BECAUSE…
15
It’s what’s
HOT right
now!
It’s my idea
and it’s the
BEST idea!
This one’s
EASIEST to
b...
We put all 4 ideas in front of online focus groups in US
and UK, and the clear winner was… GROUP GIFTS?!
16
Whuh
?
Huh!? W...
We were able to design and market Group Gifts based on
comments and suggestions from users from the very
start.
17
PICTURES > WORDS
WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
Focuses on
human needs
and concerns
instead of just
technology /
business
needs or
limitations
Participants /
customers
fe...
WHY DRAW PICTURES?
20
• Helps you to communicate that your
concerns are not about you (content
writer), but about the cust...
HOW CAN SKETCHING HELP
WITH CONTENT STRATEGY?
I’M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
BRAINSTORM IDEAS: customer journey mapping
PICTURES > WORDS: STORYBOARDING AT EBAY 22
EXPLAIN HOW IT WORKS: green box user flows
PICTURES > WORDS: STORYBOARDING AT EBAY 23
EXPLAIN HOW IT WORKS: Xenmobile storyboard
PICTURES > WORDS: STORYBOARDING AT EBAY 24
UNDERSTAND CUSTOMERS: user/stakeholder
personas
25
Mobile workers Managers/
employers
Café owners Citrix / GoTo Meeting
De...
UNDERSTAND CUSTOMERS: GoTo Meeting personas
26
The Butler
“You can count on me!”
The Investigator
“I need all the facts”
T...
ILLUSTRATE PAIN POINTS: shopping cart
PICTURES > WORDS: STORYBOARDING AT EBAY 27
ILLUSTRATE PAIN POINTS: san diego sheriff
department
28
SELL AN IDEA: CubeFree app
PICTURES > WORDS: STORYBOARDING AT EBAY 29
DOES ONLY CITRIX
USE DRAWING THIS
WAY?NOPE! There are many other companies who use drawing for product
development, commun...
INTRODUCE A NEW PRODUCT: google chrome comic
By Scott McCloud
31
FOCUS ON CUSTOMER MOMENTS – AirBnB
32
“The storyboard was a galvanizing event in the company. We all now know
what "frames...
SHARE A BIG PICTURE VIEW OF AN IDEA – Twitter
33
““A story map is not a mock, it is a guide to make sure everyone
is solvi...
U.S. HEALTHCARE REFORM… DRAWN ON NAPKINS
34By Dan Roam (“The Back of the Napkin”)
‘BUT I CAN’T DRAW’
If you can draw dots, circles, squares and lines, you can draw.
Yes, you can!
CIRCLE + SQUARE + DOTS + LINES = PEOPLE!
PICTURES > WORDS: STORYBOARDING AT EBAY 36
ADD A FEW TWEAKS = DIFFERENT PEOPLE
PICTURES > WORDS: STORYBOARDING AT EBAY 37
ADD A FEW TWEAKS = different companies, countries
PICTURES > WORDS: STORYBOARDING AT EBAY 38
LETS DRAW PEOPLE: more ways to draw people
PICTURES > WORDS: STORYBOARDING AT EBAY 39
NEED TO DRAW A CROWD?
PRESENTATION TITLE GOES HERE 40
CIRCLE + DOTS + LINES = FACES AND EMOTIONS
PICTURES > WORDS: STORYBOARDING AT EBAY 41
mouth
eyebrows
eyes
ADD FEATURES = DIFFERENT CHARACTERS
PICTURES > WORDS: STORYBOARDING AT EBAY 42
BODY LANGUAGE CAN SAY ALOT
PICTURES > WORDS: STORYBOARDING AT EBAY 43
WORD BALLOONS… WITHOUT WORDS
PICTURES > WORDS: STORYBOARDING AT EBAY 44
CONNECT CONCEPTS WITH LINES
PICTURES > WORDS: STORYBOARDING AT EBAY 45
Direct connection /
action
Tentative action
Convolu...
DRAW COMMON CONCEPTS IN A FEW STROKES
46
idea
lock / security time listen
cloud laptop NO!
money
fast slowsmartphone
email
DRAW TECH CONCEPTS IN A FEW STROKES
cloud
security
servers
Sharing docsSick computer Work from home GoTo Meeting
Old techn...
DIFFERENT PERSPECTIVES OF USER INTERACTION
PICTURES > WORDS: STORYBOARDING AT EBAY 48
CLOSE-UP
Emphasis on
screen/finger
i...
THE LANGUAGE OF
COLOR
How to communicate different personas, experiences, and emotions with
color
USE COLOR TO CONVEY DIFFERENT EMOTIONS /
CONCEPTS / PERSONALITIES
PICTURES > WORDS: STORYBOARDING AT EBAY 50
4 basic white board markers: red, blue, black, green
USE COLOR TO CONVEY DIFFERENT EMOTIONS /
CONCEPTS / PERSONALITIES
PICTURES > WORDS: STORYBOARDING AT EBAY 52
BLACK
basic
p...
DRAWING TIPS: ways to use the 4 colors
53
RED
no
stop
important
error
anger
medical
BLACK
Primary
smoke
book
city
computer...
MORE WAYS TO USE COLOR: for emphasis, emotions
PRESENTATION TITLE GOES HERE 54
COLORS can be an easy way to differentiate personas
PRESENTATION TITLE GOES HERE 55
Female / Male Army / Navy Biz A / Biz ...
6 VISUAL STORYTELLING
TIPS
PLUS: 2 SITUATIONS WHERE IT’S PROBABLY BETTER TO PUT DOWN YOUR
PEN
KEEP YOUR STORY SHORT
57
Your story should be limited to 10-12 panels or less if possible.
If it needs more panels, consid...
SHOWING IT > SAYING IT
58
Let the pictures tell the story.
If you removed the captions, would it still make sense?
KEEP CAPTIONS SHORT AND SIMPLE
59
Captions should be simple, easy to skim. Too much text = visual clutter
LIMIT YOUR COLOR PALETTE
60
Use color selectively to emphasize important things, communicate
differences, or convey emotio...
LEFT TO RIGHT, TOP TO BOTTOM
61
Give the reader a predictable, intuitive path to read your story.
Don’t leave them wonderi...
PICTURES, NOT PERFECTION
62
Speed, simplicity and clarity is more important than making “perfect”
pictures. It doesn’t hav...
SKETCHING ISN’T ALWAYS THE ANSWER
63
It’s difficult to draw what you don’t
understand / can’t visualize.
Beware of situati...
CAN’T DRAW?
THERE’S AN APP FOR
THAT!3 “just add water” solutions when you don’t have time to draw
STORYBOARD APPS: STORYBOARD THAT
65
StoryboardThat is an online app that can create instant storyboards
http://www.storybo...
STORYBOARD APPS: BITSTRIPS
66
BitStrips is another online/mobile app that can create instant storyboards
https://www.bitst...
COMICLIFE: STORYBOARD WITH PHOTOS
67
Apps like ComicLife can make it easy to use your photos to create simple
scenarios / ...
DIGITAL DRAWING: Concepts & Sketchbook Pro
68
http://concepts.tophatch.com/ https://www.sketchbook.com/
CONCEPTS AUTODESK ...
DIGITAL WHITEBOARDS: draw online
together
http://ziteboard.com
ZITEBOARD
https://awwapp.com
A WEB WHITEBOARD
READ  LEARN 
DRAW!
Recommended books, tools, and classes to expand your drawing skills
71
READ ALL ABOUT IT: simple drawing for meetings & ux
DAVID SIBBETTS
Visual Meetings
DAN ROAM
The Back of the Napkin
SUNN...
72
READ ALL ABOUT IT: drawing for visual storytelling
SCOTT McCLOUD
Understanding Comics
Making Comics
Reinventing Comics
...
73
MORE WAYS TO LEARN: workshops and classes
THE GROVE
graphic facilitation services,
classes, and books
www.grove.com
NAP...
QUESTIONS?
THANK YOU!
EMAIL: DEBORA.AOKI@CITRIX.COM
TWITTER: @DEBAOKI
ALSO AT: HTTP://WWW.DEBAOKI.COM
Upcoming SlideShare
Loading in …5
×

Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov. 2015

6,771 views

Published on

Get in the room earlier by drawing out customer experiences! Deb demonstrates some simple ways to get your team on the same page by sketching and creating visual stories for content strategy and user experience design.

As presented at University of Washington Continuing Education - November 2015

Published in: Design
  • Just got my check for $500 ➣➣➣ https://t.cn/A6ybK1ra
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If u need a hand in making your writing assignments - visit HelpWriting.net for mire detailed information.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Got a new Iphone 6 in just 7 days completing surveys and offers! Now I'm just a few days away from completing and receiving my samsung tablet! Highly recommended! Definitely the best survey site out there!  http://t.cn/AieXAuZz
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov. 2015

  1. 1. DEB AOKI sr. customer experience designer citrix November 2, 2015 DRAWING STORIES FOR CONTENT STRATEGY simple sketching and storyboarding for collaboration, research, and content strategy
  2. 2. HELLO. UX Design + Content Strategy + Comics + Manga Nerd = Deb Aoki
  3. 3. I LOVE COMICS. I READ COMICS. I DRAW COMICS. • Bento Box in the Honolulu Star-Advertiser 3
  4. 4. 4 I WRITE ABOUT COMICS TOO.
  5. 5. 5 BUT FOR THE LAST 20 YEARS, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB
  6. 6. 6 THEN I GOT A CONTENT STRATEGY JOB AT…
  7. 7. And suddenly, my drawing skills came in handy again. 7
  8. 8. 8 NOW I’M AT… I still write, but now I mostly draw. …which is pretty awesome
  9. 9. LET ME TELL YOU A STORY… How I figured out the power of storyboarding for user experience design
  10. 10. THE CHALLENGE: ebay needs a new holiday promotion 10 We did a lot of brainstorming, a lot of sketching, and narrowed it down to 4 ideas…
  11. 11. HOLIDAY CONCEPT 1: group deals 11
  12. 12. HOLIDAY CONCEPT 2: ebay game 12
  13. 13. HOLIDAY CONCEPT 3: v.i.p. sales 13
  14. 14. HOLIDAY CONCEPT 4: group gifts 14
  15. 15. I WANT TO DO THIS IDEA BECAUSE… 15 It’s what’s HOT right now! It’s my idea and it’s the BEST idea! This one’s EASIEST to build! I dunno. Because it’s FUN?
  16. 16. We put all 4 ideas in front of online focus groups in US and UK, and the clear winner was… GROUP GIFTS?! 16 Whuh ? Huh!? Why? Oh wow.
  17. 17. We were able to design and market Group Gifts based on comments and suggestions from users from the very start. 17
  18. 18. PICTURES > WORDS WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
  19. 19. Focuses on human needs and concerns 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?
  20. 20. WHY DRAW PICTURES? 20 • Helps you to communicate that your concerns are not about you (content writer), but about the customer • Gets you in the room earlier in the product design process • Provides an 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 • Can provide a ‘big picture’ perspective of the entire user experience, goals & messaging • Helps get everyone on the team on the same page, clear up anything that’s unclear or unresolved • It’s fun! It encourages participation and informal discussions
  21. 21. HOW CAN SKETCHING HELP WITH CONTENT STRATEGY? I’M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
  22. 22. BRAINSTORM IDEAS: customer journey mapping PICTURES > WORDS: STORYBOARDING AT EBAY 22
  23. 23. EXPLAIN HOW IT WORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 23
  24. 24. EXPLAIN HOW IT WORKS: Xenmobile storyboard PICTURES > WORDS: STORYBOARDING AT EBAY 24
  25. 25. UNDERSTAND CUSTOMERS: user/stakeholder personas 25 Mobile workers Managers/ employers Café owners Citrix / GoTo Meeting Designers/PMs/Devs
  26. 26. UNDERSTAND CUSTOMERS: GoTo Meeting personas 26 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”
  27. 27. ILLUSTRATE PAIN POINTS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 27
  28. 28. ILLUSTRATE PAIN POINTS: san diego sheriff department 28
  29. 29. SELL AN IDEA: CubeFree app PICTURES > WORDS: STORYBOARDING AT EBAY 29
  30. 30. DOES ONLY CITRIX USE DRAWING THIS WAY?NOPE! There are many other companies who use drawing for product development, communication, sales, and education
  31. 31. INTRODUCE A NEW PRODUCT: google chrome comic By Scott McCloud 31
  32. 32. FOCUS ON CUSTOMER MOMENTS – AirBnB 32 “The storyboard was a galvanizing event in the company. We all now know what "frames" of the customer experience we are working to better serve.” - Nate Blecharczyk, Co-Founder & CTO, Airbnb By Nick Sung
  33. 33. SHARE A BIG PICTURE VIEW OF AN IDEA – Twitter 33 ““A story map is not a mock, it is a guide to make sure everyone is solving the same problem, building the same product and pointing at the same piece of paper while making decisions.” - James Buckhouse, Twitter / now Sequoia Capital
  34. 34. U.S. HEALTHCARE REFORM… DRAWN ON NAPKINS 34By Dan Roam (“The Back of the Napkin”)
  35. 35. ‘BUT I CAN’T DRAW’ If you can draw dots, circles, squares and lines, you can draw. Yes, you can!
  36. 36. CIRCLE + SQUARE + DOTS + LINES = PEOPLE! PICTURES > WORDS: STORYBOARDING AT EBAY 36
  37. 37. ADD A FEW TWEAKS = DIFFERENT PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 37
  38. 38. ADD A FEW TWEAKS = different companies, countries PICTURES > WORDS: STORYBOARDING AT EBAY 38
  39. 39. LETS DRAW PEOPLE: more ways to draw people PICTURES > WORDS: STORYBOARDING AT EBAY 39
  40. 40. NEED TO DRAW A CROWD? PRESENTATION TITLE GOES HERE 40
  41. 41. CIRCLE + DOTS + LINES = FACES AND EMOTIONS PICTURES > WORDS: STORYBOARDING AT EBAY 41 mouth eyebrows eyes
  42. 42. ADD FEATURES = DIFFERENT CHARACTERS PICTURES > WORDS: STORYBOARDING AT EBAY 42
  43. 43. BODY LANGUAGE CAN SAY ALOT PICTURES > WORDS: STORYBOARDING AT EBAY 43
  44. 44. WORD BALLOONS… WITHOUT WORDS PICTURES > WORDS: STORYBOARDING AT EBAY 44
  45. 45. CONNECT CONCEPTS WITH LINES PICTURES > WORDS: STORYBOARDING AT EBAY 45 Direct connection / action Tentative action Convoluted path Bouncing
  46. 46. DRAW COMMON CONCEPTS IN A FEW STROKES 46 idea lock / security time listen cloud laptop NO! money fast slowsmartphone email
  47. 47. DRAW TECH CONCEPTS IN A FEW STROKES cloud security servers Sharing docsSick computer Work from home GoTo Meeting Old technology
  48. 48. DIFFERENT PERSPECTIVES OF USER INTERACTION PICTURES > WORDS: STORYBOARDING AT EBAY 48 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
  49. 49. THE LANGUAGE OF COLOR How to communicate different personas, experiences, and emotions with color
  50. 50. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 50
  51. 51. 4 basic white board markers: red, blue, black, green
  52. 52. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 52 BLACK basic primary important info / facts RED important error danger stop GREEN success money nature go BLUE cool water sky masculine
  53. 53. DRAWING TIPS: ways to use the 4 colors 53 RED no stop important error anger medical BLACK Primary smoke book city computer GREEN yes go money success nature BLUE secondary cloud / sky water Twitter/FB blue ribbon
  54. 54. MORE WAYS TO USE COLOR: for emphasis, emotions PRESENTATION TITLE GOES HERE 54
  55. 55. COLORS can be an easy way to differentiate personas PRESENTATION TITLE GOES HERE 55 Female / Male Army / Navy Biz A / Biz B Differences within a group Japan / US / Germany Citrix / Apple / Google
  56. 56. 6 VISUAL STORYTELLING TIPS PLUS: 2 SITUATIONS WHERE IT’S PROBABLY BETTER TO PUT DOWN YOUR PEN
  57. 57. KEEP YOUR STORY SHORT 57 Your story should be limited to 10-12 panels or less if possible. If it needs more panels, consider breaking story into segments. http://beta.snapsupportapp.com/
  58. 58. SHOWING IT > SAYING IT 58 Let the pictures tell the story. If you removed the captions, would it still make sense?
  59. 59. KEEP CAPTIONS SHORT AND SIMPLE 59 Captions should be simple, easy to skim. Too much text = visual clutter
  60. 60. LIMIT YOUR COLOR PALETTE 60 Use color selectively to emphasize important things, communicate differences, or convey emotions. Too many colors can be distracting https://stormifyapp.com/
  61. 61. LEFT TO RIGHT, TOP TO BOTTOM 61 Give the reader a predictable, intuitive path to read your story. Don’t leave them wondering what to look at next. https://crystalpalace.citrix.com/
  62. 62. PICTURES, NOT PERFECTION 62 Speed, simplicity and clarity is more important than making “perfect” pictures. It doesn’t have to be beautiful/detailed to communicate ideas.
  63. 63. SKETCHING ISN’T ALWAYS THE ANSWER 63 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
  64. 64. CAN’T DRAW? THERE’S AN APP FOR THAT!3 “just add water” solutions when you don’t have time to draw
  65. 65. STORYBOARD APPS: STORYBOARD THAT 65 StoryboardThat is an online app that can create instant storyboards http://www.storyboardthat.com/
  66. 66. STORYBOARD APPS: BITSTRIPS 66 BitStrips is another online/mobile app that can create instant storyboards https://www.bitstrips.com
  67. 67. COMICLIFE: STORYBOARD WITH PHOTOS 67 Apps like ComicLife can make it easy to use your photos to create simple scenarios / storyboards from desktop or mobile devices http://comiclife.com/
  68. 68. DIGITAL DRAWING: Concepts & Sketchbook Pro 68 http://concepts.tophatch.com/ https://www.sketchbook.com/ CONCEPTS AUTODESK SKETCHBOOK
  69. 69. DIGITAL WHITEBOARDS: draw online together http://ziteboard.com ZITEBOARD https://awwapp.com A WEB WHITEBOARD
  70. 70. READ  LEARN  DRAW! Recommended books, tools, and classes to expand your drawing skills
  71. 71. 71 READ ALL ABOUT IT: simple drawing for meetings & ux DAVID SIBBETTS Visual Meetings DAN ROAM The Back of the Napkin SUNNI BROWN The Doodle Revolution ED EMBERLEY Drawing Books MARTIN HAUSSMAN Biklablo MIKE ROHDE The Sketchnote Handbook The Sketchnote Workbook
  72. 72. 72 READ ALL ABOUT IT: drawing for visual storytelling SCOTT McCLOUD Understanding Comics Making Comics Reinventing Comics JESSICA ABEL & MATT MADDEN Drawing Words and Writing Pictures Mastering Comics KEVIN CHENG See What I Mean: How to Use Comics to Communicate Ideas
  73. 73. 73 MORE WAYS TO LEARN: workshops and classes THE GROVE graphic facilitation services, classes, and books www.grove.com NAPKIN ACADEMY Online & in-person workshops http://www.napkinacademy.com/ VERBAL TO VISUAL CLASSROOM Blog and online drawing classes http://www.verbaltovisualclassroom.com/ ALPHACHIMP UNIVERSITY Online and in-person workshops http://www.alphachimp.com/learn ing/
  74. 74. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO AT: HTTP://WWW.DEBAOKI.COM

×