user experience sketching for lean and agile teams
Post on 13-Sep-2014
2.756 views
DESCRIPTION
Learn how to turn complex concepts into simple visual forms that can help you evaluate ideas, products, and features quickly and effectively, before you jump into expensive pixels and code. By sketching first, you can weed out bad ideas before they progress while pursuing ones that are stickier, more engaging, and ultimately more impactful.TRANSCRIPT
Donna Lichaw
@dlichaw
greatnorthelectric.com
USER EXPERIENCE SKETCHING
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
�2
@dlichaw
�3
WHY SKETCH?
WHY SKETCH?
- Dilbert
WHY SKETCH?
- XKCD, Computer Problems
WHY SKETCH?
“THE COMPUTER IS A MORON.”
- Peter Drucker
WHY SKETCH?
‣ Think big picture
‣ Collaborate with a team
‣ Validate a hypothesis quickly and cheaply
‣ STEP AWAY FROM THE COMPUTER
SKETCHING HELPS YOU...
WHY SKETCH?
SKETCHING IS...
‣ Quick
‣ Timely
‣ Cheap
‣ Disposable
KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
SKETCHING IS...
Bill Buxton, Sketching User Experiences
Design
“Branching Exploration”
v
Prototyping
“Incremental iterative refinement”
EXPLORATORY
SKETCHING THE USER EXPERIENCE
‣ Writing
‣ Improv
‣ Storyboarding/Comics
!
SKETCHING THE USER EXPERIENCE
‣ Writing
‣ Improv
‣ Storyboarding/Comics
!} STORYTELLING
SKETCH WITH WORDS
Beginning Middle End
NARRATIVE ARC
Beginning Middle End
NARRATIVE ARC
Beginning Middle End
NARRATIVE ARC
Inciting Incident
Climax
Falling Action
Rising Action
ExpositionResolution
Crisis
EXPOSITION
INCITING INCIDENT
RISING ACTION
CRISIS
CLIMAX
FALLING ACTION
RESOLUTION
6 WORD STORIES
ERNEST HEMINGWAY
6 WORD STORIES
ERNEST HEMINGWAY
“For sale. Baby shoes. Never worn.”
UX STORIES
EXERCISE: STORYTELLING
EXERCISE
STORYTELLING‣ Split up into pairs and define the
story arc for a digital product !Product ideas: Starbucks, Square, [Your company name here]
SKETCH WITH DRAWINGS
BASIC TECHNIQUE
KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
“AMPLIFICATION THROUGH SIMPLIFICATION”
– Scott McCloud, Understanding Comics
AMPLIFICATION THROUGH SIMPLIFICATION
- XKCD, Computer Problems
TOOLS
TOOLS: ADVANCED
Warm Grey Soft Yellow
POINT
DRAW!
COMBINE FORMS TO CREATE...
COMBINE FORMS TO CREATE...
COMBINE FORMS TO CREATE...
COMBINE FORMS TO CREATE...
ADD SOME COLOR (OPTIONAL)
AMPLIFICATION THROUGH SIMPLIFICATION
DRAW!
GETTING FANCY
LAYOUT
RULE OF THIRDS
RULE OF THIRDS
RULE OF THIRDS
EYELINE
EYELINE
EYELINE
MOVEMENT
PERSPECTIVE
PERSPECTIVE
Vanishing Point
STORYBOARDS
North by Northwest storyboard/film comparison one1more2time3.wordpress.com
STORYBOARDING
See What I Mean, Kevin Cheng: Nectar Storyboard flickr.com/photos/rosenfeldmedia/7171777734
STORYBOARD
EXERCISE: STORYBOARDING
EXERCISE
STORYBOARDING‣ Split up into your pairs:
‣ Create a storyboard illustrating your story from earlier
‣ Present your storyboards to the group
IMPROV AND ROLEPLAYING (AKA BODYSTORMING)
http://farm3.static.flickr.com/2653/3763798434_99470b7723.jpg
IMPROV AND ROLEPLAYING (AKA BODYSTORMING)
IMPROV AND ROLEPLAYING FORMS
IMPROV EXERCISE
IMPROV EXERCISE
DESIGN A FORM FOR YOUR PRODUCT‣ Split up into pairs
‣ Choose roles
‣ Role-play a key transaction
‣ Outline a flow and steps for your form
‣ It should flow like a conversation
‣ It should have a certain “voice”
ADDITIONAL READING
‣ Understanding Comics, Scott McCloud
‣ Sketching User Experiences, Bill Buxton
‣ See What I Mean, Kevin Cheng
http://rosenfeldmedia.com/Promo code: LICHAW good for 25% off all books