SlideShare uma empresa Scribd logo
1 de 42
ON THE SAME PAGE
simple sketching and storyboarding for
collaboration, research, & content strategy
DEB AOKI
sr. information experience designer, citrix
October 18, 2013
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
I WRITE ABOUT COMICS TOO.

4
MEANWHILE, MOST OF MY JOBS WERE ABOUT
WRITING FOR THE WEB

5
THEN I GOT A JOB AT…

6
And suddenly, my drawing skills came in handy again.

7
NOW I‟M AT…

I still write, but now I mostly draw.
…which is pretty awesome
8
PICTURES > WORDS
WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
WHY DRAW PICTURES?
• Pictures can communicate abstract ideas and user
experiences quickly and powerfully
• Focuses on users‟ needs and problems, rather than on
design, business, or technology concerns or limitations
• Faster and cheaper than coding clickable prototypes
or designing wireframes, or polished page mock-ups
• Can provide a „big picture‟ perspective
of the entire user experience, goals &
messaging
• It‟s fun! And it encourages participation
and informal discussions
10
HOW CAN SKETCHING HELP
WITH CONTENT STRATEGY?
I‟M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
BRAINSTORM IDEAS: shopping cart

PICTURES > WORDS: STORYBOARDING AT EBAY

12
BRAINSTORM IDEAS: user personas

PICTURES > WORDS: STORYBOARDING AT EBAY

13
BRAINSTORM IDEAS: framing problems & goals

PICTURES > WORDS: STORYBOARDING AT EBAY

14
REFINE CONCEPTS : holiday buzz

PICTURES > WORDS: STORYBOARDING AT EBAY

15
PAINT A “BIG PICTURE”: shopping cart

PICTURES > WORDS: STORYBOARDING AT EBAY

16
PAINT A “BIG PICTURE”: thanksgiving 2012

PICTURES > WORDS: STORYBOARDING AT EBAY

17
EXPLAIN HOW IT WORKS: green box user flows

PICTURES > WORDS: STORYBOARDING AT EBAY

18
ILLUSTRATE PAIN POINTS: shopping cart

PICTURES > WORDS: STORYBOARDING AT EBAY

19
ILLUSTRATE PAIN POINTS: too many buttons

PICTURES > WORDS: STORYBOARDING AT EBAY

20
SELL AN IDEA: citrix simply giving campaign

PICTURES > WORDS: STORYBOARDING AT EBAY

21
SELL AN IDEA: student accounts

PICTURES > WORDS: STORYBOARDING AT EBAY

22
TEST A CONCEPT: group gifts

PICTURES > WORDS: STORYBOARDING AT EBAY

23
TEST A CONCEPT: go together

PICTURES > WORDS: STORYBOARDING AT EBAY

24
„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

26
ADD A FEW TWEAKS = DIFFERENT PEOPLE

PICTURES > WORDS: STORYBOARDING AT EBAY

27
CIRCLE + DOTS + LINES = FACES AND EMOTIONS

PICTURES > WORDS: STORYBOARDING AT EBAY

28
WORD BALLOONS… WITHOUT WORDS

PICTURES > WORDS: STORYBOARDING AT EBAY

29
CONNECT CONCEPTS WITH LINES
Direct connection /
action

Tentative action

Convoluted path

Bouncing

PICTURES > WORDS: STORYBOARDING AT EBAY

30
DRAW COMMON CONCEPTS IN A FEW STROKES

idea

lock / security

listen

time

money
cloud

smartphone

laptop

NO!

fast

slow

email
31
DIFFERENT PERSPECTIVES OF USER INTERACTION

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

PICTURES > WORDS: STORYBOARDING AT EBAY

32
USE COLOR TO CONVEY DIFFERENT EMOTIONS /
CONCEPTS / PERSONALITIES

PICTURES > WORDS: STORYBOARDING AT EBAY

33
USE COLOR TO CONVEY DIFFERENT EMOTIONS /
CONCEPTS / PERSONALITIES

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
PICTURES > WORDS: STORYBOARDING AT EBAY

34
AS YOU DRAW, ASK THESE QUESTIONS:
•
•
•
•
•
•
•
•
•
•
•
•

Who is the user/customer?
What‟s the problem that we‟re solving for the user?
How are we making their lives better/easier/simpler/happier?
What are they trying to do / What do they want to do?
What‟s most important to them?
What do they need to know?
Why would they click the button / download / sign up? What‟s
in it for them? (benefits)
How is this different/better than similar services/experiences
from other companies? (differentiators)
Does the user have any fears/obstacles?
What if something goes wrong?
What can they do to fix things?
What will they see next? / What will happen?
PICTURES > WORDS: STORYBOARDING AT EBAY

35
5 STEPS FOR
DRAWING
STORYBOARDS
Brainstorm > Script > Sketch > Finalize > Adapt
STEP 1: BRAINSTORM IDEAS / SKETCH

37
STEP 2: WRITE A SCRIPT

38
STEP 3: DRAW ROUGH SKETCHES

39
STEP 4: GET FEEDBACK / FINALIZE ART

40
STEP 5: ADAPT VECTOR LINE ART OR VARIATIONS

41
QUESTIONS?

THANK YOU!
EMAIL: DEBORA.AOKI@CITRIX.COM
TWITTER: @DEBAOKI
ALSO AT:
HTTP://WWW.MANGACOMICSMANGA.COM

Mais conteúdo relacionado

Mais procurados

Steal this presentation
Steal this presentationSteal this presentation
Steal this presentationScott Hoag
 
A crash course to user story mapping
A crash course to user story mappingA crash course to user story mapping
A crash course to user story mappingFrances Place
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.Centerline Digital
 
Swift Paris - Dealing The Cards
Swift Paris - Dealing The CardsSwift Paris - Dealing The Cards
Swift Paris - Dealing The CardsZenly
 
Microinteractions in web and mobile design
Microinteractions in web and mobile designMicrointeractions in web and mobile design
Microinteractions in web and mobile designPablo Peinó Ardura
 
_The Social Skills Guidebook.pdf
_The Social Skills Guidebook.pdf_The Social Skills Guidebook.pdf
_The Social Skills Guidebook.pdfsalam902
 
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to Success
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to SuccessDesign, Promote, Repeat: How Long-Term Marketing Strategies Lead to Success
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to SuccessShortStack
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger PictureMayank Lambhate
 
Extended project presentation
Extended project presentationExtended project presentation
Extended project presentationRyan McDonnell
 
The Top 10 Ugliest Powerpoint Slides
The Top 10 Ugliest Powerpoint SlidesThe Top 10 Ugliest Powerpoint Slides
The Top 10 Ugliest Powerpoint SlidesKevin Nalty
 
Stop Breaking The Basic Rules of Presenting
Stop Breaking The Basic Rules of PresentingStop Breaking The Basic Rules of Presenting
Stop Breaking The Basic Rules of PresentingNed Potter
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths Evan Samek
 
Introduction to user story mapping open camp edition
Introduction to user story mapping open camp editionIntroduction to user story mapping open camp edition
Introduction to user story mapping open camp editionMichael Calleia
 
User Experience Audit by Gridle
User Experience Audit by GridleUser Experience Audit by Gridle
User Experience Audit by GridleClientjoy.io
 
Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer Think 360 Studio
 

Mais procurados (20)

UX & UI Design 101
UX & UI Design 101UX & UI Design 101
UX & UI Design 101
 
Steal this presentation
Steal this presentationSteal this presentation
Steal this presentation
 
A crash course to user story mapping
A crash course to user story mappingA crash course to user story mapping
A crash course to user story mapping
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
 
Swift Paris - Dealing The Cards
Swift Paris - Dealing The CardsSwift Paris - Dealing The Cards
Swift Paris - Dealing The Cards
 
Microinteractions in web and mobile design
Microinteractions in web and mobile designMicrointeractions in web and mobile design
Microinteractions in web and mobile design
 
_The Social Skills Guidebook.pdf
_The Social Skills Guidebook.pdf_The Social Skills Guidebook.pdf
_The Social Skills Guidebook.pdf
 
Melewi UX audit
Melewi UX auditMelewi UX audit
Melewi UX audit
 
Storytelling
StorytellingStorytelling
Storytelling
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to Success
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to SuccessDesign, Promote, Repeat: How Long-Term Marketing Strategies Lead to Success
Design, Promote, Repeat: How Long-Term Marketing Strategies Lead to Success
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger Picture
 
Extended project presentation
Extended project presentationExtended project presentation
Extended project presentation
 
The Top 10 Ugliest Powerpoint Slides
The Top 10 Ugliest Powerpoint SlidesThe Top 10 Ugliest Powerpoint Slides
The Top 10 Ugliest Powerpoint Slides
 
Stop Breaking The Basic Rules of Presenting
Stop Breaking The Basic Rules of PresentingStop Breaking The Basic Rules of Presenting
Stop Breaking The Basic Rules of Presenting
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
Introduction to user story mapping open camp edition
Introduction to user story mapping open camp editionIntroduction to user story mapping open camp edition
Introduction to user story mapping open camp edition
 
User Experience Audit by Gridle
User Experience Audit by GridleUser Experience Audit by Gridle
User Experience Audit by Gridle
 
Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer
 

Destaque

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
 
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....Deb Aoki
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX StoryboardingFrank Garofalo
 
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
 
Simple Sketching for Innovation
Simple Sketching for InnovationSimple Sketching for Innovation
Simple Sketching for InnovationDeb Aoki
 
Get Agile - Scrum for UX, Design and Development
Get Agile - Scrum for UX, Design and DevelopmentGet Agile - Scrum for UX, Design and Development
Get Agile - Scrum for UX, Design and DevelopmentPieter Jongerius
 
The UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
The UX Design Pocess in Scrum by John Pagonis and Sotiris SotiropoulosThe UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
The UX Design Pocess in Scrum by John Pagonis and Sotiris SotiropoulosAgile ME
 
Scrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & developmentScrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & developmentPieter Jongerius
 
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)pubsmith
 
The Power of Story in Sustainability
The Power of Story in SustainabilityThe Power of Story in Sustainability
The Power of Story in SustainabilityPark Howell
 
Storytelling in Product Management
Storytelling in Product ManagementStorytelling in Product Management
Storytelling in Product ManagementJeremy Horn
 
Fast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopFast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopPark Howell
 
MOBILE INTERACTION PATTERNS AND NON PATTERNS
MOBILE INTERACTION PATTERNS AND NON PATTERNSMOBILE INTERACTION PATTERNS AND NON PATTERNS
MOBILE INTERACTION PATTERNS AND NON PATTERNSShyamala Prayaga
 
Game Design Thinking for the Enterprise
Game Design Thinking for the EnterpriseGame Design Thinking for the Enterprise
Game Design Thinking for the EnterpriseAnn DeMarle
 
A Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingA Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingKevin Hoxie
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015Katelyn Caillouet
 
Inspirational customer dialogues
Inspirational customer dialoguesInspirational customer dialogues
Inspirational customer dialoguesInSites Consulting
 

Destaque (20)

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
 
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX Storyboarding
 
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
 
Simple Sketching for Innovation
Simple Sketching for InnovationSimple Sketching for Innovation
Simple Sketching for Innovation
 
Get Agile - Scrum for UX, Design and Development
Get Agile - Scrum for UX, Design and DevelopmentGet Agile - Scrum for UX, Design and Development
Get Agile - Scrum for UX, Design and Development
 
The UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
The UX Design Pocess in Scrum by John Pagonis and Sotiris SotiropoulosThe UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
The UX Design Pocess in Scrum by John Pagonis and Sotiris Sotiropoulos
 
An introduction to UX in Scrum
An introduction to UX in ScrumAn introduction to UX in Scrum
An introduction to UX in Scrum
 
Scrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & developmentScrum secrets for integrating UX, design & development
Scrum secrets for integrating UX, design & development
 
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
 
The Power of Story in Sustainability
The Power of Story in SustainabilityThe Power of Story in Sustainability
The Power of Story in Sustainability
 
Storytelling in Product Management
Storytelling in Product ManagementStorytelling in Product Management
Storytelling in Product Management
 
Workshop 3: storyboarding
Workshop 3: storyboardingWorkshop 3: storyboarding
Workshop 3: storyboarding
 
Fast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopFast Pitch Storytelling Workshop
Fast Pitch Storytelling Workshop
 
MOBILE INTERACTION PATTERNS AND NON PATTERNS
MOBILE INTERACTION PATTERNS AND NON PATTERNSMOBILE INTERACTION PATTERNS AND NON PATTERNS
MOBILE INTERACTION PATTERNS AND NON PATTERNS
 
Game Design Thinking for the Enterprise
Game Design Thinking for the EnterpriseGame Design Thinking for the Enterprise
Game Design Thinking for the Enterprise
 
Always-on research
Always-on researchAlways-on research
Always-on research
 
A Workshop on UX Design and Storyboarding
A Workshop on UX Design and StoryboardingA Workshop on UX Design and Storyboarding
A Workshop on UX Design and Storyboarding
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
Inspirational customer dialogues
Inspirational customer dialoguesInspirational customer dialogues
Inspirational customer dialogues
 

Semelhante a Storyboarding csa2013 - Simple sketching for UX, user research & content strategy

Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Deb Aoki
 
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
 
Rejv Program Research Paper
Rejv Program Research PaperRejv Program Research Paper
Rejv Program Research PaperJulie Kwhl
 
Our Startup Branding Journey - What Makes A Brand Memorable?
Our Startup Branding Journey -  What Makes A Brand Memorable?Our Startup Branding Journey -  What Makes A Brand Memorable?
Our Startup Branding Journey - What Makes A Brand Memorable?Customericare
 
Research - Phase I
Research - Phase IResearch - Phase I
Research - Phase Ihmlhmlhml
 
Post-Design: Finding beauty in the invisible, and the changing role of the de...
Post-Design: Finding beauty in the invisible, and the changing role of the de...Post-Design: Finding beauty in the invisible, and the changing role of the de...
Post-Design: Finding beauty in the invisible, and the changing role of the de...Lauren Serota
 
Muhammad Januar - Portfolio 2019
Muhammad Januar - Portfolio 2019Muhammad Januar - Portfolio 2019
Muhammad Januar - Portfolio 2019Januar Muhammad
 
Pitch for my magazine
Pitch for my magazinePitch for my magazine
Pitch for my magazineOliver Omotto
 
Data Storytelling: The Last Mile (A Curration)
Data Storytelling: The Last Mile (A Curration)Data Storytelling: The Last Mile (A Curration)
Data Storytelling: The Last Mile (A Curration)Brittne Kakulla, Ph.D.
 
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
 
Really ugly resumes
Really ugly resumesReally ugly resumes
Really ugly resumesMarco Gorini
 
DePaul College Prep Steam Lab
DePaul College Prep Steam LabDePaul College Prep Steam Lab
DePaul College Prep Steam LabDaniel X. O'Neil
 
Lash Creative Case Study
Lash Creative Case StudyLash Creative Case Study
Lash Creative Case StudyLash Creative
 
Mumbrella social media presentation social ideas final
Mumbrella social media presentation social ideas finalMumbrella social media presentation social ideas final
Mumbrella social media presentation social ideas finalThe Conscience Organistaion
 
EXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationEXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationDorian Dawance
 
Rationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic designRationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic designJames Cotton
 
The Accidental Instructional Designer #ASTD2014
The Accidental Instructional Designer #ASTD2014The Accidental Instructional Designer #ASTD2014
The Accidental Instructional Designer #ASTD2014Cammy Bean
 

Semelhante a Storyboarding csa2013 - Simple sketching for UX, user research & content strategy (20)

Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015
 
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
 
Rejv Program Research Paper
Rejv Program Research PaperRejv Program Research Paper
Rejv Program Research Paper
 
Design Presentation
Design PresentationDesign Presentation
Design Presentation
 
Our Startup Branding Journey - What Makes A Brand Memorable?
Our Startup Branding Journey -  What Makes A Brand Memorable?Our Startup Branding Journey -  What Makes A Brand Memorable?
Our Startup Branding Journey - What Makes A Brand Memorable?
 
Research - Phase I
Research - Phase IResearch - Phase I
Research - Phase I
 
Post-Design: Finding beauty in the invisible, and the changing role of the de...
Post-Design: Finding beauty in the invisible, and the changing role of the de...Post-Design: Finding beauty in the invisible, and the changing role of the de...
Post-Design: Finding beauty in the invisible, and the changing role of the de...
 
Muhammad Januar - Portfolio 2019
Muhammad Januar - Portfolio 2019Muhammad Januar - Portfolio 2019
Muhammad Januar - Portfolio 2019
 
Pitch for my magazine
Pitch for my magazinePitch for my magazine
Pitch for my magazine
 
Data Storytelling: The Last Mile (A Curration)
Data Storytelling: The Last Mile (A Curration)Data Storytelling: The Last Mile (A Curration)
Data Storytelling: The Last Mile (A Curration)
 
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)
 
Really ugly resumes
Really ugly resumesReally ugly resumes
Really ugly resumes
 
DePaul College Prep Steam Lab
DePaul College Prep Steam LabDePaul College Prep Steam Lab
DePaul College Prep Steam Lab
 
Growth. Marketing. Distribution. MASTERCLASS by 500 Startups
Growth. Marketing. Distribution. MASTERCLASS by 500 StartupsGrowth. Marketing. Distribution. MASTERCLASS by 500 Startups
Growth. Marketing. Distribution. MASTERCLASS by 500 Startups
 
Lash Creative Case Study
Lash Creative Case StudyLash Creative Case Study
Lash Creative Case Study
 
Market forms
Market formsMarket forms
Market forms
 
Mumbrella social media presentation social ideas final
Mumbrella social media presentation social ideas finalMumbrella social media presentation social ideas final
Mumbrella social media presentation social ideas final
 
EXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - VisualizationEXPLORA x Pepperclip - Visualization
EXPLORA x Pepperclip - Visualization
 
Rationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic designRationale: the importance of good communication in graphic design
Rationale: the importance of good communication in graphic design
 
The Accidental Instructional Designer #ASTD2014
The Accidental Instructional Designer #ASTD2014The Accidental Instructional Designer #ASTD2014
The Accidental Instructional Designer #ASTD2014
 

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 - 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 (8)

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 - 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

Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 

Último (20)

Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 

Storyboarding csa2013 - Simple sketching for UX, user research & content strategy

  • 1. ON THE SAME PAGE simple sketching and storyboarding for collaboration, research, & content strategy DEB AOKI sr. information experience designer, citrix October 18, 2013
  • 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. I WRITE ABOUT COMICS TOO. 4
  • 5. MEANWHILE, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB 5
  • 6. THEN I GOT A JOB AT… 6
  • 7. 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 8
  • 9. PICTURES > WORDS WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
  • 10. WHY DRAW PICTURES? • Pictures can communicate abstract ideas and user experiences quickly and powerfully • Focuses on users‟ needs and problems, rather than on design, business, or technology concerns or limitations • Faster and cheaper than coding clickable prototypes or designing wireframes, or polished page mock-ups • Can provide a „big picture‟ perspective of the entire user experience, goals & messaging • It‟s fun! And it encourages participation and informal discussions 10
  • 11. HOW CAN SKETCHING HELP WITH CONTENT STRATEGY? I‟M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
  • 12. BRAINSTORM IDEAS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 12
  • 13. BRAINSTORM IDEAS: user personas PICTURES > WORDS: STORYBOARDING AT EBAY 13
  • 14. BRAINSTORM IDEAS: framing problems & goals PICTURES > WORDS: STORYBOARDING AT EBAY 14
  • 15. REFINE CONCEPTS : holiday buzz PICTURES > WORDS: STORYBOARDING AT EBAY 15
  • 16. PAINT A “BIG PICTURE”: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 16
  • 17. PAINT A “BIG PICTURE”: thanksgiving 2012 PICTURES > WORDS: STORYBOARDING AT EBAY 17
  • 18. EXPLAIN HOW IT WORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 18
  • 19. ILLUSTRATE PAIN POINTS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 19
  • 20. ILLUSTRATE PAIN POINTS: too many buttons PICTURES > WORDS: STORYBOARDING AT EBAY 20
  • 21. SELL AN IDEA: citrix simply giving campaign PICTURES > WORDS: STORYBOARDING AT EBAY 21
  • 22. SELL AN IDEA: student accounts PICTURES > WORDS: STORYBOARDING AT EBAY 22
  • 23. TEST A CONCEPT: group gifts PICTURES > WORDS: STORYBOARDING AT EBAY 23
  • 24. TEST A CONCEPT: go together PICTURES > WORDS: STORYBOARDING AT EBAY 24
  • 25. „BUT I CAN‟T DRAW‟ If you can draw dots, circles, squares and lines, you can draw. Yes, you can!
  • 26. CIRCLE + SQUARE + DOTS + LINES = PEOPLE! PICTURES > WORDS: STORYBOARDING AT EBAY 26
  • 27. ADD A FEW TWEAKS = DIFFERENT PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 27
  • 28. CIRCLE + DOTS + LINES = FACES AND EMOTIONS PICTURES > WORDS: STORYBOARDING AT EBAY 28
  • 29. WORD BALLOONS… WITHOUT WORDS PICTURES > WORDS: STORYBOARDING AT EBAY 29
  • 30. CONNECT CONCEPTS WITH LINES Direct connection / action Tentative action Convoluted path Bouncing PICTURES > WORDS: STORYBOARDING AT EBAY 30
  • 31. DRAW COMMON CONCEPTS IN A FEW STROKES idea lock / security listen time money cloud smartphone laptop NO! fast slow email 31
  • 32. DIFFERENT PERSPECTIVES OF USER INTERACTION 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 PICTURES > WORDS: STORYBOARDING AT EBAY 32
  • 33. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 33
  • 34. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES 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 PICTURES > WORDS: STORYBOARDING AT EBAY 34
  • 35. AS YOU DRAW, ASK THESE QUESTIONS: • • • • • • • • • • • • Who is the user/customer? What‟s the problem that we‟re solving for the user? How are we making their lives better/easier/simpler/happier? What are they trying to do / What do they want to do? What‟s most important to them? What do they need to know? Why would they click the button / download / sign up? What‟s in it for them? (benefits) How is this different/better than similar services/experiences from other companies? (differentiators) Does the user have any fears/obstacles? What if something goes wrong? What can they do to fix things? What will they see next? / What will happen? PICTURES > WORDS: STORYBOARDING AT EBAY 35
  • 36. 5 STEPS FOR DRAWING STORYBOARDS Brainstorm > Script > Sketch > Finalize > Adapt
  • 37. STEP 1: BRAINSTORM IDEAS / SKETCH 37
  • 38. STEP 2: WRITE A SCRIPT 38
  • 39. STEP 3: DRAW ROUGH SKETCHES 39
  • 40. STEP 4: GET FEEDBACK / FINALIZE ART 40
  • 41. STEP 5: ADAPT VECTOR LINE ART OR VARIATIONS 41
  • 42. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO AT: HTTP://WWW.MANGACOMICSMANGA.COM

Notas do Editor

  1. Hi, I'm Deb Aoki. By day, I'm a content strategist at eBay, which is a fancy way of saying that I write a lot of text you see on eBay: headlines, body copy, button/interaction text, error messages and emails. My job is to try to write web content that's clear, straightforward and friendly.\
  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 About.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 conceptsBelieve 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. Here's why storyboarding can be more effective than just dry powerpoint decks with pie charts, bulletpoints and screenshots:
  9. 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 communicates ideas quickly and powerfully. Pictures can convey ideas more concisely than just text. Pictures also inspires people to chime in / participate because they’re playful / not “final” ideasUniversally understandable - Pictures can make information easier to digest, especially when you're presenting to people for whom English is not their first language.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.
  10. There are a couple of different ways we use drawing/storyboarding at eBay:
  11. To brainstorm ideas – or to refine conceptsBelieve 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.
  12. Brainstorming: 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 eBay. What they like / don’t like about eBay, what they do on eBay, what they buy or sell on eBay, and what frustrates them about eBay.
  13. Brainstorming: 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 eBay. What they like / don’t like about eBay, what they do on eBay, what they buy or sell on eBay, and what frustrates them about eBay.
  14. Refine concepts - Two years ago, our product team wanted to explore new ways to buy on eBay. We brainstormed and came up with several concepts – then narrowed it down to six ideas that we liked the most. I then did sketches of quick walk-through of each of the ideas, then we narrowed it down to four that we put in front of users to see their reactions.
  15. Paint a big picture – shopping cartThis 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.
  16. Paint a big picture – Thanksgiving 2012We 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.
  17. How it works: Green BoxGreen 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.
  18. Illustrate pain points: shopping cartOne 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.
  19. Illustrate pain points: too many buttonsOne 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.
  20. Sell an idea – Student accountsThis is a one-page summary of an idea presented at another new product fair. It’s kind of crowded, but it explains the how, why and how it works of this particular product in one page.
  21. Sell an idea – Student accountsThis is a one-page summary of an idea presented at another new product fair. It’s kind of crowded, but it explains the how, why and how it works of this particular product in one page.
  22. Test a concept – Group GiftsThis 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.
  23. Test a concept – Go TogetherThis 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.
  24. There are a couple of different ways we use drawing/storyboarding at eBay:
  25. 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. ShotaroIshinomori tapped into the simple language of color to convey different personalities.
  26. 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.
  27. Brainstorm / sketchUsually, the first thing I do when I get asked to do a visualization/storyboarding project is get the key people in the room, and start brainstorming and sketching. At this point, my sketches are often very rough because it’s more important that I do it quickly and capture the ideas.
  28. Write a scriptAfter narrowing down the scenarios that need to be illustrated, I work on a script. Sometimes I’ll use storyboard sheets with blocks / lines for written text to block out the scenes.It often helps for me to draw it out too, since there’s a limit to what you can cram into one panel – and that’s not always apparent when you write what you think will fit in a panel. I try to keep it to one idea per panel.
  29. Draw rough sketchesOnce I have a sense of the story, then I rough out what the panels will look like. The artwork is a little more finished than it was at the brainstorm stage, but not quite polished – this lets people know that they can still feel free to offer comments / suggestions for changes w/o feeling like they’re making me “go back to the drawing board.”
  30. Feedback / finalizeI always allow for a lot of back and forth to make sure that the story reads smoothly and is as concise and clear as possible.
  31. Adapt to vector art or vertical/geographical variationsDepending on how the illustrations/storyboards will be used, I’ll sometimes do variations.For example, if it’s going to be blown up into large-scale/poster-sized presentations, then I’ll adapt the illustrations into vector line art with Illustrator.Other types of variations can include adapting the story for different verticals (fashion, tech, motors) or different geographies (europe, asia, etc.)