UX Class 101

Deck for Lingkaran's UX Master Class held on March 23 and 30 2019.

Transcript

1. UX Class 101 Putri Purnomo & Rifat Najmi March 23-30 2019
2. A bit about your (de)mentors Putri Purnomo Rifat Najmi Senior UX Designer IBM Senior UX Designer IBM
3. Design Thinking part 1
4. We want you to draw an alarm clock
5. Now draw something to wake up people in a pleasant way
6. empathize define ideate prototype test
7. empathize define ideate prototype test
8. empathize define ideate prototype test
9. Empathize Build empathy for your users by learning their values.
11. Define Unpack your empathy findings into needs and insights and scope a meaningful challenge.
12. What is UX?
13. 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 “
14. Useful & Usable A product serve their functionality. Form follow function
15. Learnable Or in other word: intuitive
16. Valuable Since 1953 Designed by Oscar Lundin & Sune Sjoberg and is still made by Linden Sweden A product value might be that it solves a problem.
17. 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.
18. Desirable Not just about function, but aesthetically pleasing
19. Accessible Allowed to be use by everyone, including those with disability
20. Credible Can be trusted.
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 transportation in Jakarta ...
31. You’re gonna do so by improving the product 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?
41. How does it look like?
43. Game 2 Empathy Map
44. Name and draw your user. Create an Empathy Map
45. Name and draw your user. Create an Empathy Map Ideate silently.
46. Name and draw your user. Create an Empathy Map Ideate silently. Cluster.
47. 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
48. User Persona
49. 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.
50. Creating personas will help you to understand your users’ needs, experiences, behaviours and goals.
51. Game 3 User Persona
52. Go back to empathy map. Create User Persona
53. Go back to empathy map. Create User Persona Write down their description.
54. Go back to empathy map. Create User Persona Write down their description. Present to the room.
55. Scenario Map
56. Scenario Maps help us empathize with the user over a specific period of time.
57. A Scenario Map is a chart that portrays the user’s current experience.
58. 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.
59. How does it look like? Doing Thinking Feeling Phase
61. Game 4 Scenario Map
62. Create a Scenario Map Draw the template. Doing Thinking Feeling Phase
63. Create a Scenario Map Draw the template. Ideate silently. Doing Thinking Feeling Phase
64. Create a Scenario Map Draw the template. Ideate silently. Label phases. Doing Thinking Feeling Phase
65. Create a Scenario Map Draw the template. Ideate silently. Label phases. Identify pain points & opportunities. Doing Thinking Feeling Phase
66. Create a Scenario Map Draw the template. Ideate silently. Label phases. Identify pain points & opportunities. Doing Thinking Feeling Present to the room. Phase
68. Need Statement A statement that frames your user’s actual needs, desires and goals. “ “
69. Need statements allow us to frame our user’s needs, desires and goals. user
70. How does it look like? needs a way to so that A user do something that addresses their need the user benefits directly
71. 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.
72. A bad example needs a way to so that
73. A bad example needs a way to so that
74. A better example needs a way to so that
75. Game 5 Need Statement
76. Create Need Statements Draw the template. needs a way to so that
77. Create Need Statements Draw the template. Ideate silently. needs a way to so that
78. Create Need Statements Draw the template. Ideate silently. Cluster needs a way to so that
80. Let’s Recap!
81. What we learn yesterday • How we frame the problem determined how we find the solution • Design thinking isn’t only a tools to find a solution by asking the right question. It’s also a mindset of seeing a problem. • Empathy is an important steps to understand your end-user, by making an effort to put yourself in their shoes. • UX encompass the whole experience of a end user when interacting with products and services of a company. • A good UX consider these characteristics: ◦ Useful ◦ Usable ◦ Learnable ◦ Valuable ◦ Desirable ◦ Accessible ◦ Credible
82. What we learn yesterday • User interview is the first step to collect data of your end user insight (what could be improved, what could be add, what is the pain point). • From that, we could build an Empathy Map. A visualization of a persona which tells us more about our end user. • Scenario Map is a closer look of a persona’s life in a specific period of time. The goal is to dig even further so we could find pain points or opportunity. • Need Statement is a way to capture user need, desire and goal to be used as a focus point when developing a product.
83. Design Thinking part 2
84. empathize define ideate prototype test
85. empathize define ideate prototype test
86. Ideate Generate radical design alternatives.
87. Prototype Gets ideas out of your head and into the world.
88. Test The chance to gather feedback, refine solutions, and continue to learn about your users.
89. Let’s Play!
90. Ideation
91. Ideation is problem solving with no limitations.
92. Ideation is saying “yes” to everything so we can find the best solution for our user without immediate constraint.
93. 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…”
94. How does it look like?
95. What an absurd idea looks like? (but it’s okay!)
96. Game 6 Ideation
97. Ideate! Ideate silently.
98. Ideate! Ideate silently. Playback.
99. Ideate! Ideate silently. Playback. Cluster.
100. Ideate! Ideate silently. Playback. Cluster. Present to the room.
101. Prioritization Grid
102. A graph that helps us identify which ideas to act on.
103. 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.
104. 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?
105. How does it look like?
106. Game 7 Prioritization Grid
107. Prioritize! Vote silently. Impact Feasibility
108. Prioritize! Vote silently. Draw the grid. Impact Feasibility
109. Prioritize! Vote silently. Draw the grid. Plot your ideas. Impact Feasibility
110. Prioritize! Vote silently. Draw the grid. Plot your ideas. Assess.
111. Prototyping
112. A means of exploring a user experience through a visual representation.
113. 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.
114. 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.
115. 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
116. 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.
117. How does it look like?
118. Game 8 Prototype
119. Prototype! Discuss with your buddies.
120. Prototype! Discuss with your buddies. Create workflow first.
121. Prototype! Discuss with your buddies. Create workflow first. Then sketch the UI.
122. Prototype! Discuss with your buddies. Create workflow first. Then sketch the UI. “Transfer” your sketch into Figma and create the prototype.
123. Usability Testing
124. Usability testing is a way to see how easy to use something is by testing it with real users.
125. 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.
126. 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!
127. Example of scenario
128. Example of success metrics
129. 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!
131. Game 9 Usability Testing
132. 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.
133. Playback
134. Playback If history was told in stories, no one would ever forget it. “ -- Anonymous “
135. What makes a good story? Twist Drama Conflict Resolution Detail Time Place Plot Humor Emotion Characters Beginning Middle End
136. 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.
137. What can it look like? Storyboard Skit Post-it animation First-person narrative Documentary-style video Deck
138. Game 10 Present a Playback
139. Present a Playback
140. 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.
142. Any question?
143. Putri Purnomo Rifat Najmi @prunamasari behance.net/prunamasari 0812 1882 4540 pru.purnamasari@gmail.com @rifatnajmi rifatnajmi.com 0818 276 276 info@rifatnajmi.com Ask us anything (or not)
144. Gonna miss you!
145. References IBM Enterprises Design Thinking IDEO Design Thinking Stanford d.school Design Thinking Interaction Design Foundation