Design Thinking

Deck for Design Thinking workshop with IndonesianYouth Conference's committees.

Transcript

1. IYC Design Thinking Rifat Najmi May 30 2019 - Part 1
2. A bit about your (de)mentor Rifat Najmi @rifatnajmi
3. Your turn... Please tell us your name, your job, your superpower, and your motivation in joining the class
4. What’s today’ special? day 1
5. Today’s Agenda Introduction Design Thinking (part 1) What’s UX? Let’s Play! ISHOMA
6. Design Thinking part 1
7. We want you to draw an alarm clock
8. Now draw something to wake up people in a pleasant way
9. empathize define ideate prototype test
10. empathize define ideate prototype test
11. Empathize Build empathy for your users by learning their values.
13. Define Unpack your empathy findings into needs and insights and scope a meaningful challenge.
14. What is UX?
15. What is UX? User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. “ -- Norman Nielesen Group “
16. Useful & Usable A product serve their functionality. Form follow function
17. Learnable Or in other word: intuitive
18. Valuable Since 1953 Now Designed by Oscar Lundin & Sune Sjoberg and is still made by Linden Sweden OXO Good Grips Pro Swivel Peeler. A product value might be that it solves a problem.
19. Desirable Not just about function, but aesthetically pleasing
20. Accessible Allowed to be use by everyone, including those with disability
21. Credible Can be trusted.
22. Team Up! Find some buddies! There should be three or four of you.
23. User Interview
24. Interviews give insights into what users think about a site, an app, a product, or a process.
25. They can point out what is memorable, what people feel is important, and what ideas for improvement they may have.
26. Dos and Don’ts of User Interview Dos • Find the problem (or problems) by asking a lot of “why”. • Ask for consent. Explain to the user how and why you’re going to use the information they provided. • Ask an open question. • Make user feel comfortable and listen to what they said. Don’ts • Assume. What user think and feels might be completely different. • Leading the question from your assumption to prove your point. • Not paying attention to the body language. They usually say something different of what user says. • Judging what user do or said.
27. What to find out Behaviour What they do Words What they say Faces What they feel, where they look Environment Where they are Artifacts What they use
28. Let’s Play!
29. Game 1 User Interview
30. Imagine you’re gonna improve the way people use public transportation in Jakarta ...
31. You’re gonna do so by improving the app used by the users
32. How would you empathize with the user?
33. Create a list of questions with your buddy(es) and interview each other.
34. Present your questions and findings in front of the class.
35. 1. Create a list of questions with your buddies. 2. Interview each other, pretend you are the user. 3. Present your questions and findings. In summary...
36. Empathy Map
37. Empathy Map is a collaborative visualization that lets us depict who our end user is, both as shared team & to others.
38. An Empathy Map allows us to sum up our learning from engagements with people. The map provides four major areas in which to focus our attention on, thus providing an overview of a person’s experience.
39. An Empathy Map consists of four quadrants. The four quadrants reflect four key traits, which the user demonstrated/possessed during the empathize stage.
40. How does it look like?
42. Game 2 Empathy Map
43. Name and draw your user. Create an Empathy Map Ideate silently. Cluster.
44. So what does it do, again? • Aligning our perspective with the team of who our end user is. • To help make a decision which usually affecting how the products will solve the problem
45. User Persona
46. Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way.
47. Creating personas will help you to understand your users’ needs, experiences, behaviours and goals.
48. Game 3 User Persona
49. Go back to empathy map. Create User Persona Write down their description. Present to the room.
50. Scenario Map
51. Scenario Maps help us empathize with the user over a specific period of time.
52. A Scenario Map is a chart that portrays the user’s current experience.
53. What makes a good scenario map? 1. It focuses on a single user. 2. It presents a detailed, honest picture of the current situation. 3. It exposes pain points and opportunities.
54. How does it look like? Doing Thinking Feeling Phase
56. Game 4 Scenario Map
57. Create a Scenario Map Draw the template. Ideate silently. Label phases. Identify pain points & opportunities. Doing Thinking Feeling Present to the room. Phase
59. Need Statement A statement that frames your user’s actual needs, desires and goals. “ “
60. Need statements allow us to frame our user’s needs, desires and goals. user
61. How does it look like? needs a way to so that A user do something that addresses their need the user benefits directly
62. What makes a good need statement? 1. Focuses on a user’s real pain points. 2. Does NOT focus on features. 3. Can be either specific or general.
63. A bad example needs a way to so that
64. A better example needs a way to so that
65. Game 5 Need Statement
66. Create Need Statements Draw the template. Ideate silently. Cluster needs a way to so that
69. Any question?
70. See you later!
72. IYC Design Thinking Rifat Najmi May 30 2019 - Part 2 (kalo sempet hehe)
73. Welcome back!
74. We meet again! Rifat Najmi @rifatnajmi
75. Today’s Agenda Design Thinking (part 2) Let’s Play! Let’s Play Again! Discussion ISHOMA
76. Design Thinking part 2
77. empathize define ideate prototype test
78. empathize define ideate prototype test
79. Ideate Generate radical design alternatives.
80. Prototype Gets ideas out of your head and into the world.
81. Test The chance to gather feedback, refine solutions, and continue to learn about your users.
82. Let’s Play!
83. Ideation
84. Ideation is problem solving with no limitations.
85. Ideation is saying “yes” to everything so we can find the best solution for our user without immediate constraint.
86. What makes ideation good? 1. Defer judgment 2. Go for quantity 3. Encourage wild ideas 4. Build on the ideas of others 5. Stay focused on the topic 6. Have one conversation at a time 7. Be visual 8. Avoid feature functions 9. Don’t go into much detail 10. Consider “It’s kinda like…”
87. How does it look like?
88. What an absurd idea looks like?
89. Game 6 Ideation
90. Ideate! Ideate silently. Playback. Cluster. Present to the room.
91. Prioritization Grid
92. A graph that helps us identify which ideas to act on.
93. What makes a good prioritization grid? 1. Reflects the thoughts of everyone on the team 2. Shows us, clearly, which ideas to pursue. 3. Drives discussion.
94. Vote on Big Ideas Impact to the user • Does it turn a pain point into a delight? • Does it expand user value? • Does it provide a differentiating experience? Feasibility for us • Can we do this as an organization? • Can we go to market with this? • Is it technically feasible?
95. How does it look like?
96. Game 7 Prioritization Grid
97. Prioritize! Vote silently. Impact Feasibility
98. Prioritize! Vote silently. Draw the grid. Impact Feasibility
99. Prioritize! Vote silently. Draw the grid. Plot your ideas. Impact Feasibility
100. Prioritize! Vote silently. Draw the grid. Plot your ideas. Assess.
101. Prototyping
102. A means of exploring a user experience through a visual representation.
103. What makes a good prototype? 1. Actively reduces the risk of being wrong about your users. 2. Validates or invalidates your assumptions. 3. Done often. 4. User-centered, vision-focused.
104. How can we prototype? Prototypes of digital experiences • Paper. • Wireframes. • Visual mock-ups. • HTML, CSS, and JS. Feedback mechanisms • Usability testing. • Feedback surveys. • Stakeholder and sponsor user interviews.
105. Advantages of Paper Prototype Not limited by technology → Dream big + Focus on best possible solution Cheap and easy to visualize and iterate on many ideas Everyone can do it → Collaborative design with “non-designers
106. Sketching is not the same as drawing! Tips on how to start sketching your wireframe 1. Get yourself a good pen, highlighter and dotted paper. 2. You don’t need to be a master of drawing to create wireframe 3. It doesn’t have to be very detail. But it should explain your idea clearly. 4. Use the highlighter to mark the button.
107. How does it look like?
108. Game 8 Prototype
109. Prototype! Discuss with your buddies. Create workflow first. Then sketch the UI. “Transfer” your sketch into Figma
110. Usability Testing
111. Usability testing is a way to see how easy to use something is by testing it with real users.
112. Why should we do it? • Direct feedback from the target audience to focus the project team. • Internal debates can be resolved by testing the issue to see how users react to the different options being discussed. • Issues and potential problems are highlighted before the product is launched. • Increases the likelihood of usage and repeat usage. • Minimises the risk of the product failing.
113. How do we do it? 1. Build a prototype or a product to test. 2. Draft the scenario (tasks, questions, and success metrics). 3. Recruit test participants. 4. Perform the test. 5. Document the process and results. 6. Correct issues and iterate!
114. Example of scenario
115. Example of success metrics
116. Structure your question and avoid bias Introduction Q1: How often do you use Google Maps? Q2: What do you use it for? Task 1: Find the best route from Blok M to Bundaran HI. Q3: What can you understand by looking at this screen? Q4:Before starting the search, how would you expect to do it on this screen? Q5: Having now done it, what do you think of what happened? Closing: Q6: Do you have any further feedback? Q7: Would you be interested in participating in future sessions like this? Thank you! Introduction Q1: How often do you use Google Maps? Q2: What do you use it for? Task 1: Search for a bus route from Blok M to Bundaran HI. Q3: How much do you like this screen? Q4: Before starting the search, where would you enter the search terms on this screen? Q5: Having now done it, what do you think of what happened? Closing Q6: Do you have any further feedback? Q7: Would you be interested in participating in future sessions like this? Thank you!
117. Game 9 Usability Testing
118. Test the user! 1. Prepare the scenario (tasks, questions, and success metrics). 2. Test the user. 3. Document the process and results. 4. Present your findings.
119. Playback If history was told in stories, no one would ever forget it. “ -- Anonymous “
120. What makes a good story? Twist Drama Conflict Resolution Detail Time Place Plot Humor Emotion Characters Beginning Middle End
121. What is a playback? Playbacks are distinct, story-like presentations that align your team, stakeholders and clients on the user value — not project line items — you are delivering.
122. What can it look like? Storyboard Skit Post-it animation First-person narrative Documentary-style video Deck
123. Game 10 Present a Playback
124. Present a Playback 1. Refer back to all your work. 2. Figure out how you want to share your story and what info to include. 3. Give a five-minute Playback to the entire room.
125. Any question?
126. Rifat Najmi @rifatnajmi rifatnajmi.com 0818 276 276 info@rifatnajmi.com Ask us anything (or not)
127. Gonna miss you!