user experience sketching for lean and agile teams

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