This document discusses the benefits of sketching for user experience design. It argues that sketching allows designers to think big picture, collaborate quickly, and validate ideas cheaply without being tied to the computer. Various sketching techniques are presented, including storytelling with words through narratives, comics, and six-word stories. Drawing techniques like simplification, layout, perspective, and storyboarding are also covered. The document encourages practicing these skills through exercises in small groups.

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

2. 2
@dlichaw

3. 3

4. WHY SKETCH?

5. WHY SKETCH?
- Dilbert

6. WHY SKETCH?
- XKCD, Computer Problems

7. WHY SKETCH?
“THE COMPUTER IS A MORON.”
- Peter Drucker

8. WHY SKETCH?
‣ Think big picture
‣ Collaborate with a team
‣ Validate a hypothesis quickly and cheaply
‣ STEP AWAY FROM THE COMPUTER
SKETCHING HELPS YOU...

9. WHY SKETCH?
SKETCHING IS...
‣ Quick
‣ Timely
‣ Cheap
‣ Disposable

10. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
SKETCHING IS...
Bill Buxton, Sketching User Experiences
Design
“Branching Exploration”
v
Prototyping
“Incremental iterative refinement”
EXPLORATORY

11. SKETCHING THE USER EXPERIENCE
‣ Writing
‣ Improv
‣ Storyboarding/Comics
!

12. SKETCHING THE USER EXPERIENCE
‣ Writing
‣ Improv
‣ Storyboarding/Comics
!
}STORYTELLING

13. SKETCH WITH
WORDS

14. Beginning Middle End
NARRATIVE ARC

15. Beginning Middle End
NARRATIVE ARC

16. Beginning Middle End
NARRATIVE ARC
Inciting
Incident
Climax
Falling
Action
Rising Action
Exposition
Resolution
Crisis

17. EXPOSITION

18. INCITING INCIDENT

19. RISING ACTION

20. CRISIS

21. CLIMAX

22. FALLING ACTION

23. RESOLUTION

24. 6 WORD STORIES
ERNEST HEMINGWAY

25. 6 WORD STORIES
ERNEST HEMINGWAY
“For sale. Baby shoes. Never worn.”

26. UX STORIES

27. EXERCISE:
STORYTELLING

28. EXERCISE
STORYTELLING
‣ Split up into pairs and define the
story arc for a digital product
!
Product ideas: Starbucks, Square, [Your company name here]

29. SKETCH WITH
DRAWINGS

30. BASIC
TECHNIQUE

31. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
“AMPLIFICATION THROUGH SIMPLIFICATION”
– Scott McCloud, Understanding Comics

32. AMPLIFICATION THROUGH SIMPLIFICATION
- XKCD, Computer Problems

33. TOOLS

34. TOOLS: ADVANCED
Warm Grey Soft Yellow

35. POINT

40. DRAW!

41. COMBINE FORMS TO CREATE...

42. COMBINE FORMS TO CREATE...

43. COMBINE FORMS TO CREATE...

44. COMBINE FORMS TO CREATE...

45. ADD SOME COLOR (OPTIONAL)

46. AMPLIFICATION THROUGH SIMPLIFICATION

47. DRAW!

48. GETTING
FANCY

49. LAYOUT

50. RULE OF THIRDS

51. RULE OF THIRDS

52. RULE OF THIRDS

53. EYELINE

54. EYELINE

55. EYELINE

56. MOVEMENT

57. PERSPECTIVE

58. PERSPECTIVE
Vanishing Point

59. STORYBOARDS

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

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

62. EXERCISE:
STORYBOARDING

63. EXERCISE
STORYBOARDING
‣ Split up into your pairs:
‣ Create a storyboard illustrating your story from earlier
‣ Present your storyboards to the group

64. IMPROV AND
ROLEPLAYING
(AKA BODYSTORMING)

65. http://farm3.static.flickr.com/2653/3763798434_99470b7723.jpg
IMPROV AND ROLEPLAYING (AKA BODYSTORMING)

66. IMPROV AND ROLEPLAYING FORMS

67. IMPROV EXERCISE

68. 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”

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