SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
MAKE YOUR STICK FIGURES WORK HARDER
The 3 C’s of Sketching

Jason Ulaszek @webbit

Sketch Camp Chicago
November 2, 2013
INTRO
So, this sketching thing...

2
THE 3 C’S OF SKETCHING
1. Communication
2. Context
3. Collaboration

@webbit
EXERCISE
Let’s warm up.

4
URBAN PUPS
It’s important to socialize your dog and make sure they get enough
exercise, but for people who live in cities, this can be especially
difficult to manage. Hectic schedules combined with limited access
to dog-friendly public space results in many dogs spending their
days cooped up in apartments.
Urban Pups is a new service that allows dog owners to swap pet
care tips, find dog-friendly parks, and share insights and
experiences. Whether you’re looking for a dog park in your area or
just looking for house training suggestions, Urban Pups can help
keep all of the pups in your community happy and healthy.

@webbit
YOUR ASSIGNMENT (PART 1)
You’ve been hired to lead the UX practice at Urban Pups. As the lead UX
designer, you’re now responsible for helping set the experience design strategy
and direction for the soon-to-be-released mobile application. Until now, the
company has only provided their service via a desktop site.
Your team consists of a junior UX designer, a project manager and a front-end
developer. They’ve been doing the best they can to support the sales and
marketing business stakeholders, but they haven’t been following much of a
design process. This could be a great opportunity to introduce some sketching!
1. Draw the experience of a sketching activity.
2. Consider communicating the process, the context of the experience and
collaboration amongst team members.
3. You have 5 minutes.
@webbit
COMMUNICATION
Sketches communicate. You should too.

7
“

Communication is one of the
largest hurdles we face in the
product design process.

”

Aaron Irizarry
Product Designer, Nasdaq
@aaroni

@webbit
SKETCHING CAN HELP
•
•
•
•

Quickly communicates ideas & direction (early)
Helps avoid roadblocks by inviting discussion
Visually communicates concepts, flows & designs
Engaging and fun - builds dynamic team
environment

@webbit
WE USE IT TO COMMUNICATE
THE EXPERIENCE

@webbit
TO COMMUNICATE OUR FOCUS

OR

@webbit
OR EVEN
BUSINESS
IDEAS...

Source: “twttr sketch”, Jack Dorsey
March 24th, 2006
http://bit.ly/bKQPrd

@webbit
OR PHYSICAL PRODUCTS

Source: “Early sketch book”, Harley Davidson Museum,
Milwaukee, Wisconsin

@webbit
OR SERVICES

http://bit.ly/Htn4lS
@webbit
BUT, EQUALLY IMPORTANT...

Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD

@webbit
COMMUNICATE EVALUATION

Source: “Sketching Interfaces”, Michael Angeles
http://slidesha.re/SVgjaD

@webbit
COMMUNICATE THE PLAN

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
SAMPLE PLAN - SKETCHBOARDING

@webbit
SHOW & TELL THE STORY
OF THE PROCESS
@webbit
IT WILL HELP SET EXPECTATIONS

@webbit
KEY ELEMENTS TO COMMUNICATE
✓ Assumptions
✓ Structure

you’re making

and flow of the process

✓ Roles

team members will play

✓ Level

of fidelity rationale

✓ Review

and evaluation process

✓ Anticipated

outcome
@webbit
CONTEXT
Focus, depth and dynamics of the sketch experience.

22
“

Don’t get focused on the screen.
You want to pull back and consider
the context. The experience.

”

Peter Merholz
VP of Design, Groupon
@peterme

@webbit
INSIGHT

The fidelity of a sketch
should reflect the depth
of your thinking.

@webbit
FOCUS AND PURPOSE
•

Sketching To Communicate An Idea
"Here's what I'm trying to tell you..."

•

Sketching To Record What We're Seeing And Hearing
"This is what I want to remember..."

•

Sketching To Work Through Some Thinking

•

Sketching To Reflect What We're Hearing
"This is what I think you're telling me..."

•

Sketching To Document
"Here's is what we've ended up with..."

"What will this look like?..."

Source: “Why We Sketch”, Jared Spool
http://www.uie.com/articles/why_sketching/

@webbit
COMMUNICATE AN IDEA

@webbit
RECORD WHAT WE’RE SEEING & HEARING

@webbit
WORK THROUGH SOME THINKING

@webbit
WORK
THROUGH
SOME
THINKING

@webbit
SKETCHING TO DOCUMENT

@webbit
SKETCHING TO DOCUMENT

@webbit
SO, HOW DO YOU GET THERE?

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
THE SKETCH MIGHT INCLUDE...
•
•
•

Nouns – people, places and things

•
•
•

Reaction of the system - personality, playfulness

Emotion – frustration, surprise, enjoyment, fear
Descriptors – compare previous to the new
now, compare to competition

Systems and data involved (current and new)
Design principles that you’re satisfying

... and the environment of the experience!
@webbit
SHARPIE MAKES YOU COMMIT

Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley
UI 15 2010

@webbit
OR TOOLS...

@webbit
COLLABORATION
Work together to build understanding and fill in the gaps.

36
“

The goal is to move from the
idea of designer as artiste
towards a notion of designer
as facilitator.

”

Leah Buley

Author and UX Designer, Intuit
@ugleah

@webbit
TYPICAL PROCESS
1. Ground yourself
2.Sketch
3. Share and evaluate
4.Refine

@webbit
ROLES IN COLLABORATION

• The pen
• The team (contributors)
• The sketch
• Moderator/instigator
• Parking lot
@webbit
FOR SOME TEAM MEMBERS,
GETTING STARTED MIGHT
BE CHALLENGING

@webbit
MAXIMIZE ENGAGEMENT
Do
•
•
•
•
•

Find inspiration
Work fast; generate more
Embrace constraints
Explain the experience (annotate)
Stop at ‘good enough’

Don’t
• Be defensive
• Focus on details early
• Forget the purpose (big picture)

@webbit
GROUND EVERYONE
BEFORE EVALUATING
@webbit
EVALUATION TIPS
•

Clearly identify roles in the process - e.g.,

•
•

“Walk the data” before getting started

•
•

Refer back to inputs when needed

designer, moderator, etc.

Challenge common design patterns and
assumptions

Create three lists for each sketch advantages, disadvantages and open questions
@webbit
HAVE FUN WITH
SKETCH-PROPS

@webbit
ADDITIONAL IDEAS
• Document

the process and

experience (it’ll help you next time)

• Scan

the work for remote team

members or later recall

• Record

screen casts and walk-

throughs
@webbit
CREATE OPPORTUNITY
FOR OTHERS TO
PARTICIPATE

@webbit
EXERCISE
Let’s refine our earlier sketch.

47
YOUR ASSIGNMENT (PART 2)
1. Turn to the person next to you.
2.Explain your drawings to each other.
3.Now refine each other’s drawing to improve upon the
a. Communication
b. Context
c. Collaboration

4.You have 10 minutes.
5.Then we’ll share.

@webbit
WRAP UP
What’s next?

49
“

I would add another “C” (CxCCC). Clarity of
Communication, Clarity of Context, Clarity of
Collaboration. Sketching does that on all the
three aspects, and if something isn’t clear…
ask why, involve more people, fill the gaps
until it gets clear.

”

Davide Casali

Author and UX Designer, Automattic
@folletto

@webbit
ica

ion
at
or

un
on
ti

lla
b

m

Co

m
Co

Clarity
Context

@webbit
“

Let’s eradicate illuphobia.
Is that even a word?
It is now.

”

Brandy Agerbeck

Artist & Graphic Facilitator, Loosetooth
@loosetooth

@webbit
FIN
Thank you.

53

Más contenido relacionado

La actualidad más candente

Tell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerTell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerMary Wharmby
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAriana Koblitz
 
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : July
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : JulyWriting kick-ass hypotheses: Lean UX Meetup, Las Vegas : July
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : JulyKate Rutter
 
UXPA 2016 - Kelly Goto's Opening Keynote
UXPA 2016 - Kelly Goto's Opening KeynoteUXPA 2016 - Kelly Goto's Opening Keynote
UXPA 2016 - Kelly Goto's Opening KeynoteUXPA International
 
Collaborative Sketching for UX - NYU 02/19/14
Collaborative Sketching for UX - NYU 02/19/14Collaborative Sketching for UX - NYU 02/19/14
Collaborative Sketching for UX - NYU 02/19/14Robert Stribley
 
Collaborative Sketching for UX
Collaborative Sketching for UXCollaborative Sketching for UX
Collaborative Sketching for UXRobert Stribley
 
The Seven Hats of Visualisation Design: A 2017 Reboot
The Seven Hats of Visualisation Design: A 2017 RebootThe Seven Hats of Visualisation Design: A 2017 Reboot
The Seven Hats of Visualisation Design: A 2017 RebootAndy Kirk
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Stephen Anderson
 
Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsVisual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsTania Schlatter
 
Andy Kirk's Talk at the Information Plus Conference 2016
Andy Kirk's Talk at the Information Plus Conference 2016Andy Kirk's Talk at the Information Plus Conference 2016
Andy Kirk's Talk at the Information Plus Conference 2016Andy Kirk
 
5 Strategies to Maximize your UX Influence
5 Strategies to Maximize your UX Influence5 Strategies to Maximize your UX Influence
5 Strategies to Maximize your UX InfluenceUXPA International
 
Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014John Labriola
 
Data Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsData Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsAndy Kirk
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UXWhitney Hess
 
Guiding UX Principles
Guiding UX PrinciplesGuiding UX Principles
Guiding UX PrinciplesRob Surrency
 
Building a better world through lean + design
Building a better world through lean + designBuilding a better world through lean + design
Building a better world through lean + designKate Rutter
 
Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)Lane Goldstone
 
Critical Thinking for UX Designers (Or Anyone, Really)
Critical Thinking for UX Designers (Or Anyone, Really)Critical Thinking for UX Designers (Or Anyone, Really)
Critical Thinking for UX Designers (Or Anyone, Really)Russ U
 
How to supervise your supervisor?
How to supervise your supervisor?How to supervise your supervisor?
How to supervise your supervisor?Fabien Gandon
 

La actualidad más candente (20)

Tell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerTell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better Designer
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the future
 
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : July
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : JulyWriting kick-ass hypotheses: Lean UX Meetup, Las Vegas : July
Writing kick-ass hypotheses: Lean UX Meetup, Las Vegas : July
 
UXPA 2016 - Kelly Goto's Opening Keynote
UXPA 2016 - Kelly Goto's Opening KeynoteUXPA 2016 - Kelly Goto's Opening Keynote
UXPA 2016 - Kelly Goto's Opening Keynote
 
Collaborative Sketching for UX - NYU 02/19/14
Collaborative Sketching for UX - NYU 02/19/14Collaborative Sketching for UX - NYU 02/19/14
Collaborative Sketching for UX - NYU 02/19/14
 
Collaborative Sketching for UX
Collaborative Sketching for UXCollaborative Sketching for UX
Collaborative Sketching for UX
 
The Seven Hats of Visualisation Design: A 2017 Reboot
The Seven Hats of Visualisation Design: A 2017 RebootThe Seven Hats of Visualisation Design: A 2017 Reboot
The Seven Hats of Visualisation Design: A 2017 Reboot
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")
 
Visual Thinking
Visual ThinkingVisual Thinking
Visual Thinking
 
Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsVisual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile apps
 
Andy Kirk's Talk at the Information Plus Conference 2016
Andy Kirk's Talk at the Information Plus Conference 2016Andy Kirk's Talk at the Information Plus Conference 2016
Andy Kirk's Talk at the Information Plus Conference 2016
 
5 Strategies to Maximize your UX Influence
5 Strategies to Maximize your UX Influence5 Strategies to Maximize your UX Influence
5 Strategies to Maximize your UX Influence
 
Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014
 
Data Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsData Visualisation: A Game of Decisions
Data Visualisation: A Game of Decisions
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UX
 
Guiding UX Principles
Guiding UX PrinciplesGuiding UX Principles
Guiding UX Principles
 
Building a better world through lean + design
Building a better world through lean + designBuilding a better world through lean + design
Building a better world through lean + design
 
Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)
 
Critical Thinking for UX Designers (Or Anyone, Really)
Critical Thinking for UX Designers (Or Anyone, Really)Critical Thinking for UX Designers (Or Anyone, Really)
Critical Thinking for UX Designers (Or Anyone, Really)
 
How to supervise your supervisor?
How to supervise your supervisor?How to supervise your supervisor?
How to supervise your supervisor?
 

Destacado

Design 101 - a quick start guide
Design 101 - a quick start guideDesign 101 - a quick start guide
Design 101 - a quick start guideElsa Bartley
 
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables BusinessA UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables BusinessUIEpreviews
 
UX Methods and Games: Lessons Learned
UX Methods and Games: Lessons LearnedUX Methods and Games: Lessons Learned
UX Methods and Games: Lessons LearnedStephan Engl
 
DxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa BartleyDxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa BartleyElsa Bartley
 
Games for Health 2014 design tutorial
Games for Health 2014 design tutorialGames for Health 2014 design tutorial
Games for Health 2014 design tutorialferrarajc
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overviewBen Melbourne
 
The importance of identity and vision to UX designers on agile projects
The importance of  identity and vision to UX designers  on agile projectsThe importance of  identity and vision to UX designers  on agile projects
The importance of identity and vision to UX designers on agile projectsjohanna kollmann
 
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...Kate Rutter
 
Harnessing the Value of UX
Harnessing the Value of UXHarnessing the Value of UX
Harnessing the Value of UXJason Ulaszek
 
The Doodle Revolution
The Doodle RevolutionThe Doodle Revolution
The Doodle RevolutionSunni Brown
 
Innovation through Experience Design: Designers as Innovators
Innovation through Experience Design: Designers as InnovatorsInnovation through Experience Design: Designers as Innovators
Innovation through Experience Design: Designers as InnovatorsJason Ulaszek
 
Make Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & OrganizationsMake Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & OrganizationsTeresa Brazen
 
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
 
Basic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A PrimerBasic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A PrimerMike Kunkle
 
Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)GG Network
 
How does biology explain the low numbers of women in computer science? Hint:...
How does biology explain the low numbers of women in computer science?  Hint:...How does biology explain the low numbers of women in computer science?  Hint:...
How does biology explain the low numbers of women in computer science? Hint:...Terri Oda
 
Communication at workplace
Communication at workplaceCommunication at workplace
Communication at workplaceikcmclicks
 

Destacado (20)

Team of us
Team of usTeam of us
Team of us
 
Design 101 - a quick start guide
Design 101 - a quick start guideDesign 101 - a quick start guide
Design 101 - a quick start guide
 
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables BusinessA UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
A UIE Virtual Seminar, Lean UX: Getting Out of the Deliverables Business
 
UX Methods and Games: Lessons Learned
UX Methods and Games: Lessons LearnedUX Methods and Games: Lessons Learned
UX Methods and Games: Lessons Learned
 
DxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa BartleyDxN presents Playing at UX by Elsa Bartley
DxN presents Playing at UX by Elsa Bartley
 
Games for Health 2014 design tutorial
Games for Health 2014 design tutorialGames for Health 2014 design tutorial
Games for Health 2014 design tutorial
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
The importance of identity and vision to UX designers on agile projects
The importance of  identity and vision to UX designers  on agile projectsThe importance of  identity and vision to UX designers  on agile projects
The importance of identity and vision to UX designers on agile projects
 
Sketchnotes
SketchnotesSketchnotes
Sketchnotes
 
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...
Sketchnotes-SF Meetup :: Round 21 :: Capture, Iterate, Refine [Wed Aug 19, 20...
 
Harnessing the Value of UX
Harnessing the Value of UXHarnessing the Value of UX
Harnessing the Value of UX
 
The Doodle Revolution
The Doodle RevolutionThe Doodle Revolution
The Doodle Revolution
 
Innovation through Experience Design: Designers as Innovators
Innovation through Experience Design: Designers as InnovatorsInnovation through Experience Design: Designers as Innovators
Innovation through Experience Design: Designers as Innovators
 
Make Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & OrganizationsMake Culture, Not War: The Secret to Great Teams & Organizations
Make Culture, Not War: The Secret to Great Teams & Organizations
 
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
 
Basic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A PrimerBasic Instructional Design Principles - A Primer
Basic Instructional Design Principles - A Primer
 
Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)Gadu Gadu Widget (Przycisk)
Gadu Gadu Widget (Przycisk)
 
How does biology explain the low numbers of women in computer science? Hint:...
How does biology explain the low numbers of women in computer science?  Hint:...How does biology explain the low numbers of women in computer science?  Hint:...
How does biology explain the low numbers of women in computer science? Hint:...
 
Effective communication -Training Module
Effective communication -Training ModuleEffective communication -Training Module
Effective communication -Training Module
 
Communication at workplace
Communication at workplaceCommunication at workplace
Communication at workplace
 

Similar a Make Your Stick Figures Work Harder: The 3 C's of Sketching

Sketching&storyboarding
Sketching&storyboardingSketching&storyboarding
Sketching&storyboardingPriyanka Rana
 
Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Robert Stribley
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsAlan Roy
 
Collaborative Sketching for UX - Jumpstart Your Design!
Collaborative Sketching for UX -  Jumpstart Your Design!Collaborative Sketching for UX -  Jumpstart Your Design!
Collaborative Sketching for UX - Jumpstart Your Design!Robert Stribley
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly WorkflowLuke Brooker
 
Sketching Workshop with Product Design Team
Sketching Workshop with Product Design TeamSketching Workshop with Product Design Team
Sketching Workshop with Product Design TeamArganka Yahya
 
#Knowledgecity - Open Badges for a City of Learning - #openbadges
#Knowledgecity - Open Badges for a City of Learning - #openbadges#Knowledgecity - Open Badges for a City of Learning - #openbadges
#Knowledgecity - Open Badges for a City of Learning - #openbadgesJoyce Seitzinger
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityMark Billinghurst
 
July 2014 session 3 - Sketching and user-centered design
July 2014   session 3 - Sketching and user-centered designJuly 2014   session 3 - Sketching and user-centered design
July 2014 session 3 - Sketching and user-centered designLeanna Gingras
 
Great UX Portfolios
Great UX PortfoliosGreat UX Portfolios
Great UX PortfoliosMary Wharmby
 
Topsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layoutTopsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layoutRich Quick
 
3 Ways You Can Give and Get Good Design Feedback
3 Ways You Can Give and Get Good Design Feedback3 Ways You Can Give and Get Good Design Feedback
3 Ways You Can Give and Get Good Design FeedbackZURB
 
Enhance your communications skills with sketching
Enhance your communications skills with sketchingEnhance your communications skills with sketching
Enhance your communications skills with sketchingRebecca Jackson
 
Thinking and working visually for software testers
Thinking and working visually for software testersThinking and working visually for software testers
Thinking and working visually for software testersHuib Schoots
 
Open Badges Workshop for RMIT University @academictribe
Open Badges Workshop for RMIT University @academictribeOpen Badges Workshop for RMIT University @academictribe
Open Badges Workshop for RMIT University @academictribeJoyce Seitzinger
 
#acec2014 Open Badge Design, Every Which Way #openbadges
#acec2014 Open Badge Design, Every Which Way #openbadges #acec2014 Open Badge Design, Every Which Way #openbadges
#acec2014 Open Badge Design, Every Which Way #openbadges Joyce Seitzinger
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeGessica Puri
 
ModevUX AgileUX
ModevUX AgileUXModevUX AgileUX
ModevUX AgileUXmjovel
 

Similar a Make Your Stick Figures Work Harder: The 3 C's of Sketching (20)

Sketching&storyboarding
Sketching&storyboardingSketching&storyboarding
Sketching&storyboarding
 
Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
 
Collaborative Sketching for UX - Jumpstart Your Design!
Collaborative Sketching for UX -  Jumpstart Your Design!Collaborative Sketching for UX -  Jumpstart Your Design!
Collaborative Sketching for UX - Jumpstart Your Design!
 
Storyboarding
StoryboardingStoryboarding
Storyboarding
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
 
Sketching Workshop with Product Design Team
Sketching Workshop with Product Design TeamSketching Workshop with Product Design Team
Sketching Workshop with Product Design Team
 
#Knowledgecity - Open Badges for a City of Learning - #openbadges
#Knowledgecity - Open Badges for a City of Learning - #openbadges#Knowledgecity - Open Badges for a City of Learning - #openbadges
#Knowledgecity - Open Badges for a City of Learning - #openbadges
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented Reality
 
July 2014 session 3 - Sketching and user-centered design
July 2014   session 3 - Sketching and user-centered designJuly 2014   session 3 - Sketching and user-centered design
July 2014 session 3 - Sketching and user-centered design
 
Great UX Portfolios
Great UX PortfoliosGreat UX Portfolios
Great UX Portfolios
 
Topsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layoutTopsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layout
 
3 Ways You Can Give and Get Good Design Feedback
3 Ways You Can Give and Get Good Design Feedback3 Ways You Can Give and Get Good Design Feedback
3 Ways You Can Give and Get Good Design Feedback
 
Enhance your communications skills with sketching
Enhance your communications skills with sketchingEnhance your communications skills with sketching
Enhance your communications skills with sketching
 
Thinking and working visually for software testers
Thinking and working visually for software testersThinking and working visually for software testers
Thinking and working visually for software testers
 
Open Badges Workshop for RMIT University @academictribe
Open Badges Workshop for RMIT University @academictribeOpen Badges Workshop for RMIT University @academictribe
Open Badges Workshop for RMIT University @academictribe
 
#acec2014 Open Badge Design, Every Which Way #openbadges
#acec2014 Open Badge Design, Every Which Way #openbadges #acec2014 Open Badge Design, Every Which Way #openbadges
#acec2014 Open Badge Design, Every Which Way #openbadges
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
ModevUX AgileUX
ModevUX AgileUXModevUX AgileUX
ModevUX AgileUX
 
Great ux portfolios
Great ux portfoliosGreat ux portfolios
Great ux portfolios
 

Último

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
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
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 

Último (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
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
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 

Make Your Stick Figures Work Harder: The 3 C's of Sketching

  • 1. MAKE YOUR STICK FIGURES WORK HARDER The 3 C’s of Sketching Jason Ulaszek @webbit Sketch Camp Chicago November 2, 2013
  • 3. THE 3 C’S OF SKETCHING 1. Communication 2. Context 3. Collaboration @webbit
  • 5. URBAN PUPS It’s important to socialize your dog and make sure they get enough exercise, but for people who live in cities, this can be especially difficult to manage. Hectic schedules combined with limited access to dog-friendly public space results in many dogs spending their days cooped up in apartments. Urban Pups is a new service that allows dog owners to swap pet care tips, find dog-friendly parks, and share insights and experiences. Whether you’re looking for a dog park in your area or just looking for house training suggestions, Urban Pups can help keep all of the pups in your community happy and healthy. @webbit
  • 6. YOUR ASSIGNMENT (PART 1) You’ve been hired to lead the UX practice at Urban Pups. As the lead UX designer, you’re now responsible for helping set the experience design strategy and direction for the soon-to-be-released mobile application. Until now, the company has only provided their service via a desktop site. Your team consists of a junior UX designer, a project manager and a front-end developer. They’ve been doing the best they can to support the sales and marketing business stakeholders, but they haven’t been following much of a design process. This could be a great opportunity to introduce some sketching! 1. Draw the experience of a sketching activity. 2. Consider communicating the process, the context of the experience and collaboration amongst team members. 3. You have 5 minutes. @webbit
  • 8. “ Communication is one of the largest hurdles we face in the product design process. ” Aaron Irizarry Product Designer, Nasdaq @aaroni @webbit
  • 9. SKETCHING CAN HELP • • • • Quickly communicates ideas & direction (early) Helps avoid roadblocks by inviting discussion Visually communicates concepts, flows & designs Engaging and fun - builds dynamic team environment @webbit
  • 10. WE USE IT TO COMMUNICATE THE EXPERIENCE @webbit
  • 11. TO COMMUNICATE OUR FOCUS OR @webbit
  • 12. OR EVEN BUSINESS IDEAS... Source: “twttr sketch”, Jack Dorsey March 24th, 2006 http://bit.ly/bKQPrd @webbit
  • 13. OR PHYSICAL PRODUCTS Source: “Early sketch book”, Harley Davidson Museum, Milwaukee, Wisconsin @webbit
  • 15. BUT, EQUALLY IMPORTANT... Source: “Sketching Interfaces”, Michael Angeles http://slidesha.re/SVgjaD @webbit
  • 16. COMMUNICATE EVALUATION Source: “Sketching Interfaces”, Michael Angeles http://slidesha.re/SVgjaD @webbit
  • 17. COMMUNICATE THE PLAN Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  • 18. SAMPLE PLAN - SKETCHBOARDING @webbit
  • 19. SHOW & TELL THE STORY OF THE PROCESS @webbit
  • 20. IT WILL HELP SET EXPECTATIONS @webbit
  • 21. KEY ELEMENTS TO COMMUNICATE ✓ Assumptions ✓ Structure you’re making and flow of the process ✓ Roles team members will play ✓ Level of fidelity rationale ✓ Review and evaluation process ✓ Anticipated outcome @webbit
  • 22. CONTEXT Focus, depth and dynamics of the sketch experience. 22
  • 23. “ Don’t get focused on the screen. You want to pull back and consider the context. The experience. ” Peter Merholz VP of Design, Groupon @peterme @webbit
  • 24. INSIGHT The fidelity of a sketch should reflect the depth of your thinking. @webbit
  • 25. FOCUS AND PURPOSE • Sketching To Communicate An Idea "Here's what I'm trying to tell you..." • Sketching To Record What We're Seeing And Hearing "This is what I want to remember..." • Sketching To Work Through Some Thinking • Sketching To Reflect What We're Hearing "This is what I think you're telling me..." • Sketching To Document "Here's is what we've ended up with..." "What will this look like?..." Source: “Why We Sketch”, Jared Spool http://www.uie.com/articles/why_sketching/ @webbit
  • 27. RECORD WHAT WE’RE SEEING & HEARING @webbit
  • 28. WORK THROUGH SOME THINKING @webbit
  • 32. SO, HOW DO YOU GET THERE? Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  • 33. THE SKETCH MIGHT INCLUDE... • • • Nouns – people, places and things • • • Reaction of the system - personality, playfulness Emotion – frustration, surprise, enjoyment, fear Descriptors – compare previous to the new now, compare to competition Systems and data involved (current and new) Design principles that you’re satisfying ... and the environment of the experience! @webbit
  • 34. SHARPIE MAKES YOU COMMIT Source: “Good Design Faster: New Techniques for Creative Ideas”, Leah Buley UI 15 2010 @webbit
  • 36. COLLABORATION Work together to build understanding and fill in the gaps. 36
  • 37. “ The goal is to move from the idea of designer as artiste towards a notion of designer as facilitator. ” Leah Buley Author and UX Designer, Intuit @ugleah @webbit
  • 38. TYPICAL PROCESS 1. Ground yourself 2.Sketch 3. Share and evaluate 4.Refine @webbit
  • 39. ROLES IN COLLABORATION • The pen • The team (contributors) • The sketch • Moderator/instigator • Parking lot @webbit
  • 40. FOR SOME TEAM MEMBERS, GETTING STARTED MIGHT BE CHALLENGING @webbit
  • 41. MAXIMIZE ENGAGEMENT Do • • • • • Find inspiration Work fast; generate more Embrace constraints Explain the experience (annotate) Stop at ‘good enough’ Don’t • Be defensive • Focus on details early • Forget the purpose (big picture) @webbit
  • 43. EVALUATION TIPS • Clearly identify roles in the process - e.g., • • “Walk the data” before getting started • • Refer back to inputs when needed designer, moderator, etc. Challenge common design patterns and assumptions Create three lists for each sketch advantages, disadvantages and open questions @webbit
  • 45. ADDITIONAL IDEAS • Document the process and experience (it’ll help you next time) • Scan the work for remote team members or later recall • Record screen casts and walk- throughs @webbit
  • 46. CREATE OPPORTUNITY FOR OTHERS TO PARTICIPATE @webbit
  • 47. EXERCISE Let’s refine our earlier sketch. 47
  • 48. YOUR ASSIGNMENT (PART 2) 1. Turn to the person next to you. 2.Explain your drawings to each other. 3.Now refine each other’s drawing to improve upon the a. Communication b. Context c. Collaboration 4.You have 10 minutes. 5.Then we’ll share. @webbit
  • 50. “ I would add another “C” (CxCCC). Clarity of Communication, Clarity of Context, Clarity of Collaboration. Sketching does that on all the three aspects, and if something isn’t clear… ask why, involve more people, fill the gaps until it gets clear. ” Davide Casali Author and UX Designer, Automattic @folletto @webbit
  • 52. “ Let’s eradicate illuphobia. Is that even a word? It is now. ” Brandy Agerbeck Artist & Graphic Facilitator, Loosetooth @loosetooth @webbit