User Experience Sketching for Lean and Agile Teams

69
Donna Lichaw @dlichaw greatnorthelectric.com USER EXPERIENCE SKETCHING This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
  • date post

    13-Sep-2014
  • Category

    Technology

  • view

    2.756
  • download

    2

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 of User Experience Sketching for Lean and Agile Teams

Page 1: 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.

Page 2: User Experience Sketching for Lean and Agile Teams

�2

@dlichaw

Page 3: User Experience Sketching for Lean and Agile Teams

�3

Page 4: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

Page 5: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

- Dilbert

Page 6: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

- XKCD, Computer Problems

Page 7: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

“THE COMPUTER IS A MORON.”

- Peter Drucker

Page 8: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

‣ Think big picture

‣ Collaborate with a team

‣ Validate a hypothesis quickly and cheaply

‣ STEP AWAY FROM THE COMPUTER

SKETCHING HELPS YOU...

Page 9: User Experience Sketching for Lean and Agile Teams

WHY SKETCH?

SKETCHING IS...

‣ Quick

‣ Timely

‣ Cheap

‣ Disposable

Page 10: User Experience Sketching for Lean and Agile Teams

KEY OBJECTIVE(S) AGENDA

RESOURCESDELIVERABLE

SKETCHING IS...

Bill Buxton, Sketching User Experiences

Design

“Branching Exploration”

v

Prototyping

“Incremental iterative refinement”

EXPLORATORY

Page 11: User Experience Sketching for Lean and Agile Teams

SKETCHING THE USER EXPERIENCE

‣ Writing

‣ Improv

‣ Storyboarding/Comics

!

Page 12: User Experience Sketching for Lean and Agile Teams

SKETCHING THE USER EXPERIENCE

‣ Writing

‣ Improv

‣ Storyboarding/Comics

!} STORYTELLING

Page 13: User Experience Sketching for Lean and Agile Teams

SKETCH WITH WORDS

Page 14: User Experience Sketching for Lean and Agile Teams

Beginning Middle End

NARRATIVE ARC

Page 15: User Experience Sketching for Lean and Agile Teams

Beginning Middle End

NARRATIVE ARC

Page 16: User Experience Sketching for Lean and Agile Teams

Beginning Middle End

NARRATIVE ARC

Inciting Incident

Climax

Falling Action

Rising Action

ExpositionResolution

Crisis

Page 17: User Experience Sketching for Lean and Agile Teams

EXPOSITION

Page 18: User Experience Sketching for Lean and Agile Teams

INCITING INCIDENT

Page 19: User Experience Sketching for Lean and Agile Teams

RISING ACTION

Page 20: User Experience Sketching for Lean and Agile Teams

CRISIS

Page 21: User Experience Sketching for Lean and Agile Teams

CLIMAX

Page 22: User Experience Sketching for Lean and Agile Teams

FALLING ACTION

Page 23: User Experience Sketching for Lean and Agile Teams

RESOLUTION

Page 24: User Experience Sketching for Lean and Agile Teams

6 WORD STORIES

ERNEST HEMINGWAY

Page 25: User Experience Sketching for Lean and Agile Teams

6 WORD STORIES

ERNEST HEMINGWAY

“For sale. Baby shoes. Never worn.”

Page 26: User Experience Sketching for Lean and Agile Teams

UX STORIES

Page 27: User Experience Sketching for Lean and Agile Teams

EXERCISE: STORYTELLING

Page 28: User Experience Sketching for Lean and Agile Teams

EXERCISE

STORYTELLING‣ Split up into pairs and define the

story arc for a digital product !Product ideas: Starbucks, Square, [Your company name here]

Page 29: User Experience Sketching for Lean and Agile Teams

SKETCH WITH DRAWINGS

Page 30: User Experience Sketching for Lean and Agile Teams

BASIC TECHNIQUE

Page 31: User Experience Sketching for Lean and Agile Teams

KEY OBJECTIVE(S) AGENDA

RESOURCESDELIVERABLE

“AMPLIFICATION THROUGH SIMPLIFICATION”

– Scott McCloud, Understanding Comics

Page 32: User Experience Sketching for Lean and Agile Teams

AMPLIFICATION THROUGH SIMPLIFICATION

- XKCD, Computer Problems

Page 33: User Experience Sketching for Lean and Agile Teams

TOOLS

Page 34: User Experience Sketching for Lean and Agile Teams

TOOLS: ADVANCED

Warm Grey Soft Yellow

Page 35: User Experience Sketching for Lean and Agile Teams

POINT

Page 36: User Experience Sketching for Lean and Agile Teams
Page 37: User Experience Sketching for Lean and Agile Teams
Page 38: User Experience Sketching for Lean and Agile Teams
Page 39: User Experience Sketching for Lean and Agile Teams
Page 40: User Experience Sketching for Lean and Agile Teams

DRAW!

Page 41: User Experience Sketching for Lean and Agile Teams

COMBINE FORMS TO CREATE...

Page 42: User Experience Sketching for Lean and Agile Teams

COMBINE FORMS TO CREATE...

Page 43: User Experience Sketching for Lean and Agile Teams

COMBINE FORMS TO CREATE...

Page 44: User Experience Sketching for Lean and Agile Teams

COMBINE FORMS TO CREATE...

Page 45: User Experience Sketching for Lean and Agile Teams

ADD SOME COLOR (OPTIONAL)

Page 46: User Experience Sketching for Lean and Agile Teams

AMPLIFICATION THROUGH SIMPLIFICATION

Page 47: User Experience Sketching for Lean and Agile Teams

DRAW!

Page 48: User Experience Sketching for Lean and Agile Teams

GETTING FANCY

Page 49: User Experience Sketching for Lean and Agile Teams

LAYOUT

Page 50: User Experience Sketching for Lean and Agile Teams

RULE OF THIRDS

Page 51: User Experience Sketching for Lean and Agile Teams

RULE OF THIRDS

Page 52: User Experience Sketching for Lean and Agile Teams

RULE OF THIRDS

Page 53: User Experience Sketching for Lean and Agile Teams

EYELINE

Page 54: User Experience Sketching for Lean and Agile Teams

EYELINE

Page 55: User Experience Sketching for Lean and Agile Teams

EYELINE

Page 56: User Experience Sketching for Lean and Agile Teams

MOVEMENT

Page 57: User Experience Sketching for Lean and Agile Teams

PERSPECTIVE

Page 58: User Experience Sketching for Lean and Agile Teams

PERSPECTIVE

Vanishing Point

Page 59: User Experience Sketching for Lean and Agile Teams

STORYBOARDS

Page 60: User Experience Sketching for Lean and Agile Teams

North by Northwest storyboard/film comparison one1more2time3.wordpress.com

STORYBOARDING

Page 61: User Experience Sketching for Lean and Agile Teams

See What I Mean, Kevin Cheng: Nectar Storyboard flickr.com/photos/rosenfeldmedia/7171777734

STORYBOARD

Page 62: User Experience Sketching for Lean and Agile Teams

EXERCISE: STORYBOARDING

Page 63: User Experience Sketching for Lean and Agile Teams

EXERCISE

STORYBOARDING‣ Split up into your pairs:

‣ Create a storyboard illustrating your story from earlier

‣ Present your storyboards to the group

Page 64: User Experience Sketching for Lean and Agile Teams

IMPROV AND ROLEPLAYING (AKA BODYSTORMING)

Page 65: User Experience Sketching for Lean and Agile Teams

http://farm3.static.flickr.com/2653/3763798434_99470b7723.jpg

IMPROV AND ROLEPLAYING (AKA BODYSTORMING)

Page 66: User Experience Sketching for Lean and Agile Teams

IMPROV AND ROLEPLAYING FORMS

Page 67: User Experience Sketching for Lean and Agile Teams

IMPROV EXERCISE

Page 68: User Experience Sketching for Lean and Agile Teams

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”

Page 69: User Experience Sketching for Lean and Agile Teams

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