Design Thinking for Client Engagement

Presented through CASCADE SF at Runway SF on September 4, 2013.

"Design thinking is a human-centered approach to innovation that draws from the designer's toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success."
—Tim Brown, president and CEO of IDEO

In this talk, we will explore how to apply a design thinking mindset to your discovery and design process. You will walk away with new strategies for:

* Building client trust
* Facilitating client communication and collaboration
* Establishing a common design language
* Reducing time and controlling scope
* Guiding clients to solutions you know will work

We will look at how using physical tools and time-bound workshops can encourage client creativity and engagement, and how setting a tone of openness, compassion, and play can transform your client’s experience in your next project. You'll walk away with a deeper understanding of the design thinking mindset, and tips and tricks for crafting your own arsenal of physical artifacts to aid you in your design process.

Video of this talk available here: https://www.youtube.com/watch?v=2tPXgFBzLRs

Transcript

1. Design Thinking for
   Client Engagement
   SEPTEMBER 4, 2013 • CASCADE SF
   Megan Erin Miller @meganerinmiller
   

   View Slide

2. Design thinking is a human-centered
   approach to innovation that draws
   from the designer’s toolkit to
   integrate the needs of people, the
   possibilities of technology, and the
   requirements for business success.
   Tim Brown, President and CEO of IDEO
   “
   ”
   

   View Slide

3. LET’S INNOVATE
   

   View Slide

4. Traditional design process
   discovery   wireframes  
   design  
   comps  
   

   View Slide

5. Artifacts of design process
   User Personas
   Task Flows
   Site Maps
   Wireframes
   Style Tiles
   Design Comps
   

   View Slide

6. Clients don’t
   understand
   wireframes
   

   View Slide

7. View Slide

8. Lost in translation
   Clients don’t speak “designer”
   Our artifacts are not self-apparent
   

   View Slide

9. What we’re really a"er
   Their priorities
   Their goals
   Their aesthetic preferences
   Editorial direction
   Decision making
   

   View Slide

10. It’s a problem of
    communication
    We are balancing technical and design
    considerations
    They don’t know how to give us the
    information we need
    

    View Slide

11. There’s a better way
    Apply design thinking to the way we
    work with our clients
    

    View Slide

12. Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    “
    ”
    

    View Slide

13. “
    ”
    Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    

    View Slide

14. “
    ”
    Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    

    View Slide

15. “
    ”
    Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    

    View Slide

16. “
    ”
    Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    

    View Slide

17. Design thinking is a human-centered
    approach to innovation that draws
    from the designer’s toolkit to
    integrate the needs of people, the
    possibilities of technology, and the
    requirements for business success.
    Tim Brown, President and CEO of IDEO
    “
    ”
    

    View Slide

18. Design an
    experience for
    our clients
    

    View Slide

19. Our goals go beyond design
    Build trust
    Establish common language
    Collaborate
    Inspire ownership
    Reduce time, control scope
    

    View Slide

20. Create a
    structure for
    conversation
    

    View Slide

21. Create an
    environment
    for play
    Photo  from  h5p://flickr.com/photos/stria;c/470233447/  
    

    View Slide

22. LET’S PLAY
    

    View Slide

23. Why do we want to play?
    Build trust
    Establish common language
    Collaborate
    Inspire ownership
    Reduce time, control scope
    

    View Slide

24. Structured
    limitations
    Photo  from  h5p://flickr.com/photos/19565307@N00/86557617/  
    

    View Slide

25. Game mechanics:
    “Quests”
    

    View Slide

26. Celebrate
    milestones
    and successes
    Photo  from  h5p://www.flickr.com/photos/23864499@N00/2621532544/  
    

    View Slide

27. Game mechanics:
    “Progression”
    

    View Slide

28. Clear goals
    and roadmap
    to success
    

    View Slide

29. Game mechanics:
    “Appointment Dynamics”
    

    View Slide

30. Time-bound
    Workshops
    and activities
    Photo  from  h5p://www.flickr.com/photos/43917849@N08/8086959997/  
    

    View Slide

31. For each goal,
    create a tool
    Photo  from  h5p://www.flickr.com/photos/24183489@N00/132914327  
    

    View Slide

32. MAKE IT PHYSICAL
    

    View Slide

33. Physical interaction builds
    fundamental concepts
    

    View Slide

34. Fundamental corporeal concepts
    such as near and far, hard and so",
    jagged and pointed, weak and
    strong, open and closed, and so on
    are rooted in animate movement.
    Dr. Maxine Sheets-Johnstone, Movement as a way of knowing
    “
    ”
    

    View Slide

35. We naturally
    speak the
    language of
    the physical
    Photo  from  h5p://www.flickr.com/photos/40645538@N00/4269396864/  
    

    View Slide

36. Physical artifacts can
    act as translators
    

    View Slide

37. How can we harness
    the power of physical
    experiences?
    

    View Slide

38. We do this already
    Sketching
    Diagrams
    

    View Slide

39. Drawing your idea helps you
    address its structure with a
    different part of your brain,
    and see it from a new angle.
    Joe Ringenberg, How Diagrams Solve Problems
    “
    ”
    

    View Slide

40. Give them
    something
    to react to
    Photo  from  h5p://flickr.com/photos/7471115@N08/4766284256/  
    

    View Slide

41. Facilitate communication
    and collaboration
    

    View Slide

42. Externalizing ideas allows for closer
    collaboration, earlier input, and
    deeper thought partnership.
    Stefan Klocek
    Better together; the practice of successful creative collaboration
    “
    ”
    

    View Slide

43. Build trust
    

    View Slide

44. Sharing the journey with the client
    and being transparent is key to
    establishing trust. By involving the
    client from the early stages they
    become more invested.
    Anthony Lui, Live Wireframing
    “
    ”
    

    View Slide

45. Just enough
    space for
    creativity
    Photo  from  h5p://www.flickr.com/photos/34016005@N04/3484003209  
    

    View Slide

46. Inspire ownership
    

    View Slide

47. Guide them to
    solutions you
    know will work
    Photo  from  h5p://www.games-­‐sun.com/files/file/The-­‐Dinosaur_coloring_by_numbers_pictures_for_kids_girls_boys_children5.jpg  
    

    View Slide

48. Photo  from  h5p://www.games-­‐sun.com/files/file/The-­‐Dinosaur_coloring_by_numbers_pictures_for_kids_girls_boys_children5.jpg  
    

    View Slide

49. A NEW DESIGN TOOLKIT
    

    View Slide

50. Design artifacts
    User Personas
    Task Flows
    Site Maps
    Wireframes
    Style Tiles
    Design Comps
    

    View Slide

51. What we’re really a"er
    Their priorities
    Their goals
    Their aesthetic preferences
    Editorial direction
    Decision making
    

    View Slide

52. A Tactile Design Kit
    http://www.TactileDesignKit.com
    

    View Slide

53. A Tactile Design Kit
    Persona template
    Website design review worksheet
    Site descriptors worksheet
    Visual vocabulary reference
    Navigation worksheets
    Wireframe toolkit
    Idea cards
    

    View Slide

54. A SAMPLE PROCESS
    

    View Slide

55. 1. Kickoff meeting
    Introduce project process roadmap
    High-level discovery with the client
    Establish governance and roles
    

    View Slide

56. View Slide

57. 2. Define user personas
    Summarize user research (if available)
    Create user personas
    Prioritize personas
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. 2. Determine aesthetic
    preferences
    Review example sites
    Establish shared aesthetic vocabulary
    Narrow in on client’s aesthetic
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. 3. Navigation and layout
    Define primary and footer navigation
    Cra" three ideas for wireframes
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. Managing scope creep
    

    View Slide

74. View Slide

75. Get what you need to make:
    User Personas
    Task Flows
    Site Maps
    Wireframes
    Style Tiles
    Design Comps
    

    View Slide

76. Other workshops you
    might need to run:
    Card sorting
    Client interviews and focus groups
    

    View Slide

77. RULES FOR GOOD TOOLS
    

    View Slide

78. Cra" the right structure
    to get the right input
    

    View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. Your technology can drive
    the structure of your tools
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. A layout library
    

    View Slide

91. A Drupal features library
    

    View Slide

92. View Slide

93. View Slide

94. Facilitate discussion
    through thoughtfully
    cra"ed tools
    

    View Slide

95. “Yes, and…”
    

    View Slide

96. View Slide

97. Sometimes one
    tool isn’t enough
    

    View Slide

98. Complimentary tools
    nav layout
    

    View Slide

99. Give an example
    

    View Slide

100. Labeling matters
     

     View Slide

101. But don’t over-label
     

     View Slide

102. View Slide

103. Test your assumptions
     

     View Slide

104. View Slide

105. View Slide

106. Set expectations
     and mindset
     

     View Slide

107. Set a tone of
     compassion
     and fun
     Photo  from  h5p://www.flickr.com/photos/97831130@N00/1066368855  
     

     View Slide

108. Prepare the
     environment
     

     View Slide

109. Set rules for
     collaboration
     Photo  from  h5p://www.flickr.com/photos/8411599@N05/8899378827  
     

     View Slide

110. Be agile
     

     View Slide

111. Iterate, test,
     get feedback,
     iterate…
     

     View Slide

112. IMAGINE
     

     View Slide

113. Photo  from  h5p://flickr.com/photos/19565307@N00/86557617/  
     Reduce time,
     control scope
     

     View Slide

114. Let your tools
     work for you
     

     View Slide

115. Create a
     repeatable
     process
     

     View Slide

116. Forge
     meaningful
     relationships
     Photo  from  h5p://www.flickr.com/photos/92694860@N00/4164759025  
     

     View Slide

117. Design is about relationships.
     Josh Brewer, Principal Designer at Twitter
     “ ”
     

     View Slide

118. Empathy is
     the key to
     success
     Photo  from  h5p://www.flickr.com/photos/52798669@N00/3277839203  
     

     View Slide

119. LINKS & RESOURCES
     

     View Slide

120. Gamestorming (website and book)
     http://www.gogamestorm.com
     Introduction to Design Studio Methodology
     http://uxmag.com/articles/introduction-to-design-
     studio-methodology
     Design is a Job, by Mike Monteiro
     http://abookapart.com/products/design-is-a-job
     
     

     View Slide

121. Tactile Design Kit
     http://www.TactileDesignKit.com
     Slides are online
     http://www.MeganErinMiller.com
     Connect with me on Twitter
     @meganerinmiller
     
     

     View Slide

122. Megan Erin Miller
     @meganerinmiller
     THANK YOU!
     

     View Slide