Learning from Comics - DotYork 2015

Slides from my talk at DotYork 2015

Transcript

1. LEARNING
   FROM
   COMICS
   Bonny Colville-Hyde
   User experience Architect
   @almostexact
   

   View Slide

2. How do we
   make great
   digital stuff?
   

   View Slide

3. Good
   intentions  
   :-/
   

   View Slide

4. Understand
   Requirements
   (business
   +
   User)  
   Stakeholder
   Buy-in  
   :-) :-)
   +
   

   View Slide

5. User research
   is
   Awesome.
   

   View Slide

6. View Slide

7. Documenting &
   communicating
   Human
   experiences is
   hard
   

   View Slide

8. View Slide

9. ‘Deliverables’
   Suck
   

   View Slide

10. View Slide

11. If we don’t
    engage decision
    makers,
    we fail.
    

    View Slide

12. h#p://www.slideshare.net/birgitgcom   @birgitgcom  
    

    View Slide

13. Communication
    is
    hard
    

    View Slide

14. View Slide

15. We can engage
    people with
    experiences.
    

    View Slide

16. People love
    Stories
    

    View Slide

17. People Love
    Comics
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. h#p://bza.co/joshln  
    

    View Slide

24. 17,897
    

    View Slide

25. 17,897
    Comic strips
    50
    years
    Peanuts,  Charles  Schulz  
    

    View Slide

26. the longest
    story ever told
    by one person
    

    View Slide

27. Why are
    comics so
    successful?
    

    View Slide

28. Verbal
    Non
    Verbal
    

    View Slide

29. Facial Expressions
    Eye contact
    Body language
    Gestures
    Speech
    

    View Slide

30. The magic of
    non-verbal
    communication
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. “…But
    comics are
    for kids –
    My Team
    wouldn’t
    get it…”
    

    View Slide

35. Charles  Schulz  
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. Comics in
    action
    

    View Slide

40. Pitching
    

    View Slide

41. Camera Shop
    The  
    A fake brief:
    

    View Slide

42. … they currently have a well
    developed customer base of
    professional
    photographers…
    …but they want to increase
    the number of amateur
    photographers shopping with
    them.
    

    View Slide

43. Via  the  Money  Saving  Expert  forum  
    Finding ideas:  
    

    View Slide

44. storytelling
    

    View Slide

45. 1. Introduce
    Bob
    2. Bob’s camera
    has broken
    3. Bob looks
    for cameras
    online
    4. Bob gets
    overwhelmed
    5. Bob finds The
    Camera Shop
    6. Bob finds
    ‘The Compact
    Camera’ finder
    7. Bob filters
    compact
    cameras by
    price and size
    8. Bob finds a
    camera he is
    interested in
    9. Bob browses
    photos taken
    with the
    camera from
    Flickr
    10. Bob feels
    satisfied and
    purchases the
    camera
    

    View Slide

46. View Slide

47. View Slide

48. Share
    research
    (A.K.A: Bringing research
    to life)
    

    View Slide

49. Experienced  
    Novice  
    SkepHcal     TrusHng  
    BOB  
    SUE  
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. Test ideas with
    users
    

    View Slide

55. View Slide

56. Kevin  CHENG,  Yahoo  
    

    View Slide

57. Develop
    personas
    

    View Slide

58. Meet ‘Denise’:
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. Communicate &
    explore ideas
    

    View Slide

63. Sco#  McCLOUD,  Google  Chrome  
    

    View Slide

64. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  
    

    View Slide

65. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  
    

    View Slide

66. What makes a
    comic?
    

    View Slide

67. Single panel:
    

    View Slide

68. Strip:
    

    View Slide

69. Pages:
    

    View Slide

70. Yay! Gutters!
    

    View Slide

71. View Slide

72. View Slide

73. ? !!!
    

    View Slide

74. View Slide

75. Buy this
    

    View Slide

76. View Slide

77. “…But I can’t
    draw…”
    

    View Slide

78. Drawing is not
    scary
    

    View Slide

79. It just takes
    practice
    

    View Slide

80. xkcd.com/386  
    

    View Slide

81. Drawing faces
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. Drawing
    expressions
    

    View Slide

86. View Slide

87. Drawing
    figures
    

    View Slide

88. View Slide

89. View Slide

90. 1. Skeleton   2. Sausages   3. Detail   4. Inking  
    

    View Slide

91. 5. Tidy up   6. Vectors   7. Colour  
    

    View Slide

92. characters
    

    View Slide

93. View Slide

94. Tools
    Brush  textures  for  Photoshop  created  by  Alex  Dukal:  h#p://circografico.com.ar/shop/  
    

    View Slide

95. Comic Life
    

    View Slide

96. Key points to
    remember
    

    View Slide

97. engage decision
    makers
    

    View Slide

98. Don’t obsess
    about process
    

    View Slide

99. Speak to users
    as often as
    possible
    

    View Slide

100. Plan!
     

     View Slide

101. Make it easy for
     yourself
     

     View Slide

102. Wait for ink to
     dry before
     using an eraser
     

     View Slide

103. Have fun
     

     View Slide

104. Thank you!
     @almostexact
     

     View Slide