SlideShare uma empresa Scribd logo
1 de 74
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
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 down to 4 ideas…
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
build!
I dunno.
Because
it’s FUN?
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.
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
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?
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
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
Designers/PMs/Devs
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”
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, communication, sales, and education
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" of the customer experience we are working to better serve.”
- Nate Blecharczyk, Co-Founder & CTO, Airbnb
By Nick Sung
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
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
Convoluted path
Bouncing
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 technology
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
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
primary
important
info / facts
RED
important
error
danger
stop
GREEN
success
money
nature
go
BLUE
cool
water
sky
masculine
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
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 B
Differences within
a group
Japan / US / Germany Citrix / Apple / Google
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, consider breaking story into segments.
http://beta.snapsupportapp.com/
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 emotions. Too many colors can be distracting
https://stormifyapp.com/
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/
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.
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
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.storyboardthat.com/
STORYBOARD APPS: BITSTRIPS
66
BitStrips is another online/mobile app that can create instant storyboards
https://www.bitstrips.com
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/
DIGITAL DRAWING: Concepts & Sketchbook Pro
68
http://concepts.tophatch.com/ https://www.sketchbook.com/
CONCEPTS AUTODESK SKETCHBOOK
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
SUNNI BROWN
The Doodle Revolution
ED EMBERLEY
Drawing Books
MARTIN HAUSSMAN
Biklablo
MIKE ROHDE
The Sketchnote Handbook
The Sketchnote Workbook
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
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/
QUESTIONS?
THANK YOU!
EMAIL: DEBORA.AOKI@CITRIX.COM
TWITTER: @DEBAOKI
ALSO AT: HTTP://WWW.DEBAOKI.COM

Mais conteúdo relacionado

Mais procurados

Painting a Vision for Your Product
Painting a Vision for Your ProductPainting a Vision for Your Product
Painting a Vision for Your ProductAtlassian
 
Strategic management - pitch deck
Strategic management - pitch deckStrategic management - pitch deck
Strategic management - pitch deckSarah Lee
 
What is Needfinding?
What is Needfinding?What is Needfinding?
What is Needfinding?Rizwan Javaid
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
User Story Mapping Workshop
User Story Mapping WorkshopUser Story Mapping Workshop
User Story Mapping WorkshopDana Pylayeva
 
Customer journey mapping and innovation
Customer journey mapping and innovationCustomer journey mapping and innovation
Customer journey mapping and innovationLivework Studio
 
Guerilla Usability Testing
Guerilla Usability TestingGuerilla Usability Testing
Guerilla Usability TestingAndy Budd
 
Design for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More FeaturesDesign for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More FeaturesVitaly Golomb
 
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK
 
From Design Thinking to Design Doing
From Design Thinking to Design Doing From Design Thinking to Design Doing
From Design Thinking to Design Doing Intuit Inc.
 
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...Rosenfeld Media
 
UX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience
UX Vision, Strategy and Teams by Susan Wolfe, Optimal ExperienceUX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience
UX Vision, Strategy and Teams by Susan Wolfe, Optimal ExperienceUIDesign Group
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UXTalisa Chang
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibilityqixingz
 
What is ResearchOps? - Kate Towsey
What is ResearchOps? - Kate TowseyWhat is ResearchOps? - Kate Towsey
What is ResearchOps? - Kate Towseyuxbri
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To UsabilityOvidiu Von M
 
UX STRAT Europe 2021: Ashley Smith, Spotify
UX STRAT Europe 2021: Ashley Smith, SpotifyUX STRAT Europe 2021: Ashley Smith, Spotify
UX STRAT Europe 2021: Ashley Smith, SpotifyUX STRAT
 

Mais procurados (20)

Painting a Vision for Your Product
Painting a Vision for Your ProductPainting a Vision for Your Product
Painting a Vision for Your Product
 
Strategic management - pitch deck
Strategic management - pitch deckStrategic management - pitch deck
Strategic management - pitch deck
 
What is Needfinding?
What is Needfinding?What is Needfinding?
What is Needfinding?
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
User Story Mapping Workshop
User Story Mapping WorkshopUser Story Mapping Workshop
User Story Mapping Workshop
 
Customer journey mapping and innovation
Customer journey mapping and innovationCustomer journey mapping and innovation
Customer journey mapping and innovation
 
Guerilla Usability Testing
Guerilla Usability TestingGuerilla Usability Testing
Guerilla Usability Testing
 
Design for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More FeaturesDesign for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More Features
 
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Marketing's 7 Deadly Sins
Marketing's 7 Deadly SinsMarketing's 7 Deadly Sins
Marketing's 7 Deadly Sins
 
From Design Thinking to Design Doing
From Design Thinking to Design Doing From Design Thinking to Design Doing
From Design Thinking to Design Doing
 
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...
Real Talk: Proving Value through a Scrappy Playbook (Dianne Que at DesignOps ...
 
UX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience
UX Vision, Strategy and Teams by Susan Wolfe, Optimal ExperienceUX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience
UX Vision, Strategy and Teams by Susan Wolfe, Optimal Experience
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
Copywriting for UX
Copywriting for UXCopywriting for UX
Copywriting for UX
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
What is ResearchOps? - Kate Towsey
What is ResearchOps? - Kate TowseyWhat is ResearchOps? - Kate Towsey
What is ResearchOps? - Kate Towsey
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
UX STRAT Europe 2021: Ashley Smith, Spotify
UX STRAT Europe 2021: Ashley Smith, SpotifyUX STRAT Europe 2021: Ashley Smith, Spotify
UX STRAT Europe 2021: Ashley Smith, Spotify
 

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

SXSW2016 - A Year Without Tech
SXSW2016 - A Year Without TechSXSW2016 - A Year Without Tech
SXSW2016 - A Year Without TechIsobarUS
 
The Secret to Actually Producing Great Visual Storytelling
The Secret to Actually Producing Great Visual StorytellingThe Secret to Actually Producing Great Visual Storytelling
The Secret to Actually Producing Great Visual StorytellingLeslie Bradshaw
 
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]HubSpot
 
How to make your first UX comic (UXScotland)
How to make your first UX comic (UXScotland)How to make your first UX comic (UXScotland)
How to make your first UX comic (UXScotland)Bonny Colville-Hyde
 
Draw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDraw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDeb Aoki
 
SXSW Interactive 2013 Recap
SXSW Interactive 2013 RecapSXSW Interactive 2013 Recap
SXSW Interactive 2013 RecapShawn Cheng
 
(Don't) Use Your Words: Visual Communicators Rock!
(Don't) Use Your Words:  Visual Communicators Rock!(Don't) Use Your Words:  Visual Communicators Rock!
(Don't) Use Your Words: Visual Communicators Rock!Katie Laird
 
How to Produce Kick-Ass Ideas
How to Produce Kick-Ass IdeasHow to Produce Kick-Ass Ideas
How to Produce Kick-Ass IdeasInitiative
 
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKeeBirddogB2B
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Digital Surgeons
 
Dear Diary: Practical Guide to Meaningful Respondent Journals
Dear Diary:  Practical Guide to Meaningful Respondent JournalsDear Diary:  Practical Guide to Meaningful Respondent Journals
Dear Diary: Practical Guide to Meaningful Respondent JournalsAbby Leafe
 
Digital portfolio shivangi-pages-deleted
Digital portfolio shivangi-pages-deletedDigital portfolio shivangi-pages-deleted
Digital portfolio shivangi-pages-deletedAmolSawant52
 
Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Clive K. Lavery
 

Semelhante a Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov. 2015 (20)

SXSW2016 - A Year Without Tech
SXSW2016 - A Year Without TechSXSW2016 - A Year Without Tech
SXSW2016 - A Year Without Tech
 
The Secret to Actually Producing Great Visual Storytelling
The Secret to Actually Producing Great Visual StorytellingThe Secret to Actually Producing Great Visual Storytelling
The Secret to Actually Producing Great Visual Storytelling
 
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]
VISUAL STORYTELLING'S STEP TWO I.E., HOW TO ACTUALLY USE IT [INBOUND 2014]
 
How to make your first UX comic (UXScotland)
How to make your first UX comic (UXScotland)How to make your first UX comic (UXScotland)
How to make your first UX comic (UXScotland)
 
Draw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDraw the Line: Better UX With Sketching
Draw the Line: Better UX With Sketching
 
Ma cultural policy and tourism - Social Media Class
Ma cultural policy and tourism - Social Media ClassMa cultural policy and tourism - Social Media Class
Ma cultural policy and tourism - Social Media Class
 
SXSW Interactive 2013 Recap
SXSW Interactive 2013 RecapSXSW Interactive 2013 Recap
SXSW Interactive 2013 Recap
 
My Portfolio
My PortfolioMy Portfolio
My Portfolio
 
(Don't) Use Your Words: Visual Communicators Rock!
(Don't) Use Your Words:  Visual Communicators Rock!(Don't) Use Your Words:  Visual Communicators Rock!
(Don't) Use Your Words: Visual Communicators Rock!
 
Toolkit: The Creative Process
Toolkit: The Creative ProcessToolkit: The Creative Process
Toolkit: The Creative Process
 
Communicating UX
Communicating UXCommunicating UX
Communicating UX
 
How to Produce Kick-Ass Ideas
How to Produce Kick-Ass IdeasHow to Produce Kick-Ass Ideas
How to Produce Kick-Ass Ideas
 
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee
9 Things I Wish I'd Known About B2B Social Media Before I Started - Scot McKee
 
Slideology sample30
Slideology sample30Slideology sample30
Slideology sample30
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
 
Dear Diary: Practical Guide to Meaningful Respondent Journals
Dear Diary:  Practical Guide to Meaningful Respondent JournalsDear Diary:  Practical Guide to Meaningful Respondent Journals
Dear Diary: Practical Guide to Meaningful Respondent Journals
 
Creating Presentation
Creating PresentationCreating Presentation
Creating Presentation
 
BE CREATIVE
BE CREATIVEBE CREATIVE
BE CREATIVE
 
Digital portfolio shivangi-pages-deleted
Digital portfolio shivangi-pages-deletedDigital portfolio shivangi-pages-deleted
Digital portfolio shivangi-pages-deleted
 
Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)
 

Mais de Deb Aoki

Best & Worst Manga - San Diego Comic-Con 2019
Best & Worst Manga - San Diego Comic-Con 2019Best & Worst Manga - San Diego Comic-Con 2019
Best & Worst Manga - San Diego Comic-Con 2019Deb Aoki
 
Best & Worst Manga - San Diego Comic-Con 2018
Best & Worst Manga - San Diego Comic-Con 2018Best & Worst Manga - San Diego Comic-Con 2018
Best & Worst Manga - San Diego Comic-Con 2018Deb Aoki
 
Best and Worst Manga - San Diego Comic-Con 2016
Best and Worst Manga - San Diego Comic-Con 2016Best and Worst Manga - San Diego Comic-Con 2016
Best and Worst Manga - San Diego Comic-Con 2016Deb Aoki
 
Best and Worst Manga - SDCC 2015
Best and Worst Manga - SDCC 2015Best and Worst Manga - SDCC 2015
Best and Worst Manga - SDCC 2015Deb Aoki
 
TCAF 2015 - Gurihiru Spotlight
TCAF 2015 - Gurihiru SpotlightTCAF 2015 - Gurihiru Spotlight
TCAF 2015 - Gurihiru SpotlightDeb Aoki
 
Girl Power! How to create a female-friendly manga collection for your library...
Girl Power! How to create a female-friendly manga collection for your library...Girl Power! How to create a female-friendly manga collection for your library...
Girl Power! How to create a female-friendly manga collection for your library...Deb Aoki
 
eBay Global Content Strategy Presentation - 2008
eBay Global Content Strategy Presentation - 2008eBay Global Content Strategy Presentation - 2008
eBay Global Content Strategy Presentation - 2008Deb Aoki
 
Making a Living in Manga in Japan - San Diego Comic-Con 2014
Making a Living in Manga in Japan - San Diego Comic-Con 2014Making a Living in Manga in Japan - San Diego Comic-Con 2014
Making a Living in Manga in Japan - San Diego Comic-Con 2014Deb Aoki
 
SDCC 2013 - Making a Living in Manga: New Trends Worth Watching
SDCC 2013 - Making a Living in Manga: New Trends Worth WatchingSDCC 2013 - Making a Living in Manga: New Trends Worth Watching
SDCC 2013 - Making a Living in Manga: New Trends Worth WatchingDeb Aoki
 

Mais de Deb Aoki (9)

Best & Worst Manga - San Diego Comic-Con 2019
Best & Worst Manga - San Diego Comic-Con 2019Best & Worst Manga - San Diego Comic-Con 2019
Best & Worst Manga - San Diego Comic-Con 2019
 
Best & Worst Manga - San Diego Comic-Con 2018
Best & Worst Manga - San Diego Comic-Con 2018Best & Worst Manga - San Diego Comic-Con 2018
Best & Worst Manga - San Diego Comic-Con 2018
 
Best and Worst Manga - San Diego Comic-Con 2016
Best and Worst Manga - San Diego Comic-Con 2016Best and Worst Manga - San Diego Comic-Con 2016
Best and Worst Manga - San Diego Comic-Con 2016
 
Best and Worst Manga - SDCC 2015
Best and Worst Manga - SDCC 2015Best and Worst Manga - SDCC 2015
Best and Worst Manga - SDCC 2015
 
TCAF 2015 - Gurihiru Spotlight
TCAF 2015 - Gurihiru SpotlightTCAF 2015 - Gurihiru Spotlight
TCAF 2015 - Gurihiru Spotlight
 
Girl Power! How to create a female-friendly manga collection for your library...
Girl Power! How to create a female-friendly manga collection for your library...Girl Power! How to create a female-friendly manga collection for your library...
Girl Power! How to create a female-friendly manga collection for your library...
 
eBay Global Content Strategy Presentation - 2008
eBay Global Content Strategy Presentation - 2008eBay Global Content Strategy Presentation - 2008
eBay Global Content Strategy Presentation - 2008
 
Making a Living in Manga in Japan - San Diego Comic-Con 2014
Making a Living in Manga in Japan - San Diego Comic-Con 2014Making a Living in Manga in Japan - San Diego Comic-Con 2014
Making a Living in Manga in Japan - San Diego Comic-Con 2014
 
SDCC 2013 - Making a Living in Manga: New Trends Worth Watching
SDCC 2013 - Making a Living in Manga: New Trends Worth WatchingSDCC 2013 - Making a Living in Manga: New Trends Worth Watching
SDCC 2013 - Making a Living in Manga: New Trends Worth Watching
 

Último

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 

Último (20)

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 

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

  • 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. 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 ABOUT COMICS TOO.
  • 5. 5 BUT FOR THE LAST 20 YEARS, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB
  • 6. 6 THEN I GOT A CONTENT STRATEGY JOB AT…
  • 7. And suddenly, my drawing skills came in handy again. 7
  • 8. 8 NOW I’M AT… I still write, but now I mostly draw. …which is pretty awesome
  • 9. LET ME TELL YOU A STORY… How I figured out the power of storyboarding for user experience design
  • 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. HOLIDAY CONCEPT 1: group deals 11
  • 12. HOLIDAY CONCEPT 2: ebay game 12
  • 13. HOLIDAY CONCEPT 3: v.i.p. sales 13
  • 14. HOLIDAY CONCEPT 4: group gifts 14
  • 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. 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. We were able to design and market Group Gifts based on comments and suggestions from users from the very start. 17
  • 18. PICTURES > WORDS WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
  • 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. 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. HOW CAN SKETCHING HELP WITH CONTENT STRATEGY? I’M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
  • 22. BRAINSTORM IDEAS: customer journey mapping PICTURES > WORDS: STORYBOARDING AT EBAY 22
  • 23. EXPLAIN HOW IT WORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 23
  • 24. EXPLAIN HOW IT WORKS: Xenmobile storyboard PICTURES > WORDS: STORYBOARDING AT EBAY 24
  • 25. UNDERSTAND CUSTOMERS: user/stakeholder personas 25 Mobile workers Managers/ employers Café owners Citrix / GoTo Meeting Designers/PMs/Devs
  • 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. ILLUSTRATE PAIN POINTS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 27
  • 28. ILLUSTRATE PAIN POINTS: san diego sheriff department 28
  • 29. SELL AN IDEA: CubeFree app PICTURES > WORDS: STORYBOARDING AT EBAY 29
  • 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. INTRODUCE A NEW PRODUCT: google chrome comic By Scott McCloud 31
  • 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. 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. U.S. HEALTHCARE REFORM… DRAWN ON NAPKINS 34By Dan Roam (“The Back of the Napkin”)
  • 35. ‘BUT I CAN’T DRAW’ If you can draw dots, circles, squares and lines, you can draw. Yes, you can!
  • 36. CIRCLE + SQUARE + DOTS + LINES = PEOPLE! PICTURES > WORDS: STORYBOARDING AT EBAY 36
  • 37. ADD A FEW TWEAKS = DIFFERENT PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 37
  • 38. ADD A FEW TWEAKS = different companies, countries PICTURES > WORDS: STORYBOARDING AT EBAY 38
  • 39. LETS DRAW PEOPLE: more ways to draw people PICTURES > WORDS: STORYBOARDING AT EBAY 39
  • 40. NEED TO DRAW A CROWD? PRESENTATION TITLE GOES HERE 40
  • 41. CIRCLE + DOTS + LINES = FACES AND EMOTIONS PICTURES > WORDS: STORYBOARDING AT EBAY 41 mouth eyebrows eyes
  • 42. ADD FEATURES = DIFFERENT CHARACTERS PICTURES > WORDS: STORYBOARDING AT EBAY 42
  • 43. BODY LANGUAGE CAN SAY ALOT PICTURES > WORDS: STORYBOARDING AT EBAY 43
  • 44. WORD BALLOONS… WITHOUT WORDS PICTURES > WORDS: STORYBOARDING AT EBAY 44
  • 45. CONNECT CONCEPTS WITH LINES PICTURES > WORDS: STORYBOARDING AT EBAY 45 Direct connection / action Tentative action Convoluted path Bouncing
  • 46. DRAW COMMON CONCEPTS IN A FEW STROKES 46 idea lock / security time listen cloud laptop NO! money fast slowsmartphone email
  • 47. DRAW TECH CONCEPTS IN A FEW STROKES cloud security servers Sharing docsSick computer Work from home GoTo Meeting Old technology
  • 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. THE LANGUAGE OF COLOR How to communicate different personas, experiences, and emotions with color
  • 50. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 50
  • 51. 4 basic white board markers: red, blue, black, green
  • 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. 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. MORE WAYS TO USE COLOR: for emphasis, emotions PRESENTATION TITLE GOES HERE 54
  • 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. 6 VISUAL STORYTELLING TIPS PLUS: 2 SITUATIONS WHERE IT’S PROBABLY BETTER TO PUT DOWN YOUR PEN
  • 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. SHOWING IT > SAYING IT 58 Let the pictures tell the story. If you removed the captions, would it still make sense?
  • 59. KEEP CAPTIONS SHORT AND SIMPLE 59 Captions should be simple, easy to skim. Too much text = visual clutter
  • 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. 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. 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. 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. CAN’T DRAW? THERE’S AN APP FOR THAT!3 “just add water” solutions when you don’t have time to draw
  • 65. STORYBOARD APPS: STORYBOARD THAT 65 StoryboardThat is an online app that can create instant storyboards http://www.storyboardthat.com/
  • 66. STORYBOARD APPS: BITSTRIPS 66 BitStrips is another online/mobile app that can create instant storyboards https://www.bitstrips.com
  • 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. DIGITAL DRAWING: Concepts & Sketchbook Pro 68 http://concepts.tophatch.com/ https://www.sketchbook.com/ CONCEPTS AUTODESK SKETCHBOOK
  • 69. DIGITAL WHITEBOARDS: draw online together http://ziteboard.com ZITEBOARD https://awwapp.com A WEB WHITEBOARD
  • 70. READ  LEARN  DRAW! Recommended books, tools, and classes to expand your drawing skills
  • 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 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 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. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO AT: HTTP://WWW.DEBAOKI.COM

Notas do Editor

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  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. When I worked at eBay, a group of us were given a challenge – come up with a new, exciting holiday promotion to encourage people to do more gift shopping on eBay. We had a one day brainstorming session, which included people from different departments / skills / experience (marketing, design, technology, business development) to come up with ideas. I drew up quick storyboards for each idea on flip-chart paper and we shared them to do an initial gut check to see if these ideas made sense from a user point of view. Our next step: to test it with users.
  9. Idea 1 – groupon type deal, where people would be encouraged to share the deal with friends, and if enough people bought it, then the price would go down, and continue to go down as more people buy.
  10. Idea 2 – online “complete the word” game – with each purchase, a buyer would get a “game piece” to complete the word “ebay” to win gift cards and prizes.
  11. Idea 3 – private sales – frequent buyers would unlock access to exclusive deals after their november/december purchases exceed a set amount.
  12. Idea 4 – group gifts
  13. 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. 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.
  14. 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. 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.
  15. Thanks to the feedback we got from the user testing we got a few things: Data about the viability of the idea based on actual customer responses – not based on any one person’s desires, personal or professional agenda, or business/technical limitations Early feedback about what users liked / didn’t like about the concept – we used this to address problems ahead of time in our design and programming, and leveraged themes that resonated most favorably to write our marketing copy. We were able to launch the product within 3 months of that initial test
  16. Here's why storyboarding can be more effective than just dry powerpoint decks with pie charts, bulletpoints and screenshots:
  17. 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.
  18. 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. 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 Focuses on our users' needs. It reminds us that what we do / what we make impacts PEOPLE (our users), vs. just focusing on nitpicking page design, or focusing too much on the what our technology can/can't deliver, or what makes $ for the business.  It’s not about me, it’s about the customer – Too often, content strategists’ input can be too easily dismissed (“that’s just your opinion” / “you’re just the writer”). When you draw stories from the customer’s point of view, then it’s more clear that you’re advocating for the end user, not just for you/your ego/your department/your role in the project. Gets you in the room earlier – Too often, content strategists are called in last into a project – “just write the text here.” But by drawing, I was allowed into the planning process much earlier than I used to be, and was able to do a better job later in the process too, because I knew the key messages to convey, I really understood the hows and whys of the product and I really understood who the audience was.
  19. There are a couple of different ways we use drawing/storyboarding at eBay:
  20. 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.
  21. 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.
  22. 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
  23. 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.
  24. 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.
  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 – The citrix user research team went to the San Diego Sheriff’s Department to observe them using our XenMobile products while out on the streets, doing their job. This is one of five scenarios I drew, where an officer was speeding off to help his partner at a crime scene, but needed to check the location on his phone. The department’s security policies required a password that required many characters and a mix of upper and lower and numbers, which can be very difficult to enter while driving.
  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. There are a couple of different ways I’ve used storyboarding and sketching at eBay and at Citrix.
  29. To introduce new products – google chrome comic
  30. https://medium.com/design-story/story-map-3cc64033128e
  31. There are a couple of different ways we use drawing/storyboarding at eBay:
  32. Note how I draw the female body more like a triangle / flared shape instead of a rectangle – this is a quick way to show a ‘dress’
  33. Add some details, you get different people!
  34. Circle, box, dots and lines = a person!
  35. 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/
  36. 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!
  37. Body language Sometimes you don’t even need a facial expression to show what’s happening, what the mood or action is
  38. 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.
  39. Inside Out – the colors were picked purposefully for each character. Blue – feeling blue – sadness Yellow for joy – a happy, sunshine color Purple – for fear / anxiety Disgust – green was picked because disgust was supposed to look like brocolli Red for ANGER. Like fire! Like hot rage!
  40. 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
  41. 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.
  42. Circle, box, dots and lines = a person!
  43. 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
  44. 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
  45. There are a couple of different ways we use drawing/storyboarding at eBay:
  46. 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.
  47. 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?
  48. 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
  49. 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.
  50. 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.
  51. Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
  52. 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.
  53. Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
  54. Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
  55. Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
  56. Digital drawing apps are inexpensive alternatives to photoshop. CONCEPTS is an ipad app that’s easy to use, has lot of flexible controls. SKETCHBOOK and SKETCHBOOK PRO from Autodesk has versions for mobile phones, tablets and desktop use.
  57. Can’t all be in the same room? Try these online whiteboard programs / websites
  58. Read! Learn! Draw! Here are some recommended books, classes and organizations you can check out for more info.
  59. 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
  60. 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
  61. 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/