User Experience Sketching for Lean and Agile Teams

4,466 views

Published on

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.

Published in: Technology, Business

User Experience Sketching for Lean and Agile Teams

  1. 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. 2 @dlichaw
  3. 3. 3
  4. 4. WHY SKETCH?
  5. 5. WHY SKETCH? - Dilbert
  6. 6. WHY SKETCH? - XKCD, Computer Problems
  7. 7. WHY SKETCH? “THE COMPUTER IS A MORON.” - Peter Drucker
  8. 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. 9. WHY SKETCH? SKETCHING IS... ‣ Quick ‣ Timely ‣ Cheap ‣ Disposable
  10. 10. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE SKETCHING IS... Bill Buxton, Sketching User Experiences Design “Branching Exploration” v Prototyping “Incremental iterative refinement” EXPLORATORY
  11. 11. SKETCHING THE USER EXPERIENCE ‣ Writing ‣ Improv ‣ Storyboarding/Comics !
  12. 12. SKETCHING THE USER EXPERIENCE ‣ Writing ‣ Improv ‣ Storyboarding/Comics ! }STORYTELLING
  13. 13. SKETCH WITH WORDS
  14. 14. Beginning Middle End NARRATIVE ARC
  15. 15. Beginning Middle End NARRATIVE ARC
  16. 16. Beginning Middle End NARRATIVE ARC Inciting Incident Climax Falling Action Rising Action Exposition Resolution Crisis
  17. 17. EXPOSITION
  18. 18. INCITING INCIDENT
  19. 19. RISING ACTION
  20. 20. CRISIS
  21. 21. CLIMAX
  22. 22. FALLING ACTION
  23. 23. RESOLUTION
  24. 24. 6 WORD STORIES ERNEST HEMINGWAY
  25. 25. 6 WORD STORIES ERNEST HEMINGWAY “For sale. Baby shoes. Never worn.”
  26. 26. UX STORIES
  27. 27. EXERCISE: STORYTELLING
  28. 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. 29. SKETCH WITH DRAWINGS
  30. 30. BASIC TECHNIQUE
  31. 31. KEY OBJECTIVE(S) AGENDA RESOURCESDELIVERABLE “AMPLIFICATION THROUGH SIMPLIFICATION” – Scott McCloud, Understanding Comics
  32. 32. AMPLIFICATION THROUGH SIMPLIFICATION - XKCD, Computer Problems
  33. 33. TOOLS
  34. 34. TOOLS: ADVANCED Warm Grey Soft Yellow
  35. 35. POINT
  36. 36. DRAW!
  37. 37. COMBINE FORMS TO CREATE...
  38. 38. COMBINE FORMS TO CREATE...
  39. 39. COMBINE FORMS TO CREATE...
  40. 40. COMBINE FORMS TO CREATE...
  41. 41. ADD SOME COLOR (OPTIONAL)
  42. 42. AMPLIFICATION THROUGH SIMPLIFICATION
  43. 43. DRAW!
  44. 44. GETTING FANCY
  45. 45. LAYOUT
  46. 46. RULE OF THIRDS
  47. 47. RULE OF THIRDS
  48. 48. RULE OF THIRDS
  49. 49. EYELINE
  50. 50. EYELINE
  51. 51. EYELINE
  52. 52. MOVEMENT
  53. 53. PERSPECTIVE
  54. 54. PERSPECTIVE Vanishing Point
  55. 55. STORYBOARDS
  56. 56. North by Northwest storyboard/film comparison one1more2time3.wordpress.com STORYBOARDING
  57. 57. See What I Mean, Kevin Cheng: Nectar Storyboard flickr.com/photos/rosenfeldmedia/7171777734 STORYBOARD
  58. 58. EXERCISE: STORYBOARDING
  59. 59. EXERCISE STORYBOARDING ‣ Split up into your pairs: ‣ Create a storyboard illustrating your story from earlier ‣ Present your storyboards to the group

  60. 60. IMPROV AND ROLEPLAYING 
 (AKA BODYSTORMING)
  61. 61. http://farm3.static.flickr.com/2653/3763798434_99470b7723.jpg IMPROV AND ROLEPLAYING (AKA BODYSTORMING)
  62. 62. IMPROV AND ROLEPLAYING FORMS
  63. 63. IMPROV EXERCISE
  64. 64. 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”
  65. 65. 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


×