UX Class 101

3fbd987f2b4b4a8538038c649409d7be?s=47 Rifat Najmi
March 23, 2019

UX Class 101

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

3fbd987f2b4b4a8538038c649409d7be?s=128

Rifat Najmi

March 23, 2019
Tweet

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.

  10. None
  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?

  42. None
  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

  60. None
  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
  67. None
  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
  79. None
  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!
  130. None
  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.
  141. None
  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