UX Class 101 - Speaker Deck

Slide 1

Slide 1 text

UX Class 101 Putri Purnomo & Rifat Najmi March 23-30 2019

Slide 2

Slide 2 text

A bit about your (de)mentors Putri Purnomo Rifat Najmi Senior UX Designer IBM Senior UX Designer IBM

Slide 3

Slide 3 text

Design Thinking part 1

Slide 4

Slide 4 text

We want you to draw an alarm clock

Slide 5

Slide 5 text

Now draw something to wake up people in a pleasant way

Slide 6

Slide 6 text

empathize deﬁne ideate prototype test

Slide 7

Slide 7 text

empathize deﬁne ideate prototype test

Slide 8

Slide 8 text

empathize deﬁne ideate prototype test

Slide 9

Slide 9 text

Empathize Build empathy for your users by learning their values.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Deﬁne Unpack your empathy ﬁndings into needs and insights and scope a meaningful challenge.

Slide 12

Slide 12 text

What is UX?

Slide 13

Slide 13 text

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 “

Slide 14

Slide 14 text

Useful & Usable A product serve their functionality. Form follow function

Slide 15

Slide 15 text

Learnable Or in other word: intuitive

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Desirable Not just about function, but aesthetically pleasing

Slide 19

Slide 19 text

Accessible Allowed to be use by everyone, including those with disability

Slide 20

Slide 20 text

Credible Can be trusted.

Slide 21

Slide 21 text

Credible Can be trusted.

Slide 22

Slide 22 text

Team Up! Find some buddies! There should be three or four of you.

Slide 23

Slide 23 text

User Interview

Slide 24

Slide 24 text

Interviews give insights into what users think about a site, an app, a product, or a process.

Slide 25

Slide 25 text

They can point out what is memorable, what people feel is important, and what ideas for improvement they may have.

Slide 26

Slide 26 text

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 diﬀerent. ● Leading the question from your assumption to prove your point. ● Not paying attention to the body language. They usually say something diﬀerent of what user says. ● Judging what user do or said.

Slide 27

Slide 27 text

What to ﬁnd out Behaviour What they do Words What they say Faces What they feel, where they look Environment Where they are Artifacts What they use

Slide 28

Slide 28 text

Let’s Play!

Slide 29

Slide 29 text

Game 1 User Interview

Slide 30

Slide 30 text

Imagine you’re gonna improve the way people use transportation in Jakarta ...

Slide 31

Slide 31 text

You’re gonna do so by improving the product used by the users

Slide 32

Slide 32 text

How would you empathize with the user?

Slide 33

Slide 33 text

Create a list of questions with your buddy(es) and interview each other.

Slide 34

Slide 34 text

Present your questions and ﬁndings in front of the class.

Slide 35

Slide 35 text

1. Create a list of questions with your buddies. 2. Interview each other, pretend you are the user. 3. Present your questions and ﬁndings. In summary...

Slide 36

Slide 36 text

Empathy Map

Slide 37

Slide 37 text

Empathy Map is a collaborative visualization that lets us depict who our end user is, both as shared team & to others.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

An Empathy Map consists of four quadrants. The four quadrants reﬂect four key traits, which the user demonstrated/possessed during the empathize stage.

Slide 40

Slide 40 text

How does it look like?

Slide 41

Slide 41 text

How does it look like?

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Game 2 Empathy Map

Slide 44

Slide 44 text

Name and draw your user. Create an Empathy Map

Slide 45

Slide 45 text

Name and draw your user. Create an Empathy Map Ideate silently.

Slide 46

Slide 46 text

Name and draw your user. Create an Empathy Map Ideate silently. Cluster.

Slide 47

Slide 47 text

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 aﬀecting how the products will solve the problem

Slide 48

Slide 48 text

User Persona

Slide 49

Slide 49 text

Personas are ﬁctional characters, which you create based upon your research in order to represent the diﬀerent user types that might use your service, product, site, or brand in a similar way.

Slide 50

Slide 50 text

Creating personas will help you to understand your users’ needs, experiences, behaviours and goals.

Slide 51

Slide 51 text

Game 3 User Persona

Slide 52

Slide 52 text

Go back to empathy map. Create User Persona

Slide 53

Slide 53 text

Go back to empathy map. Create User Persona Write down their description.

Slide 54

Slide 54 text

Go back to empathy map. Create User Persona Write down their description. Present to the room.

Slide 55

Slide 55 text

Scenario Map

Slide 56

Slide 56 text

Scenario Maps help us empathize with the user over a speciﬁc period of time.

Slide 57

Slide 57 text

A Scenario Map is a chart that portrays the user’s current experience.

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

How does it look like? Doing Thinking Feeling Phase

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Game 4 Scenario Map

Slide 62

Slide 62 text

Create a Scenario Map Draw the template. Doing Thinking Feeling Phase

Slide 63

Slide 63 text

Create a Scenario Map Draw the template. Ideate silently. Doing Thinking Feeling Phase

Slide 64

Slide 64 text

Create a Scenario Map Draw the template. Ideate silently. Label phases. Doing Thinking Feeling Phase

Slide 65

Slide 65 text

Create a Scenario Map Draw the template. Ideate silently. Label phases. Identify pain points & opportunities. Doing Thinking Feeling Phase

Slide 66

Slide 66 text

Create a Scenario Map Draw the template. Ideate silently. Label phases. Identify pain points & opportunities. Doing Thinking Feeling Present to the room. Phase

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Need Statement A statement that frames your user’s actual needs, desires and goals. “ “

Slide 69

Slide 69 text

Need statements allow us to frame our user’s needs, desires and goals. user

Slide 70

Slide 70 text

How does it look like? needs a way to so that A user do something that addresses their need the user beneﬁts directly

Slide 71

Slide 71 text

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 speciﬁc or general.

Slide 72

Slide 72 text

A bad example needs a way to so that

Slide 73

Slide 73 text

A bad example needs a way to so that

Slide 74

Slide 74 text

A better example needs a way to so that

Slide 75

Slide 75 text

Game 5 Need Statement

Slide 76

Slide 76 text

Create Need Statements Draw the template. needs a way to so that

Slide 77

Slide 77 text

Create Need Statements Draw the template. Ideate silently. needs a way to so that

Slide 78

Slide 78 text

Create Need Statements Draw the template. Ideate silently. Cluster needs a way to so that

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Let’s Recap!

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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.

Slide 83

Slide 83 text

Design Thinking part 2

Slide 84

Slide 84 text

empathize deﬁne ideate prototype test

Slide 85

Slide 85 text

empathize deﬁne ideate prototype test

Slide 86

Slide 86 text

Ideate Generate radical design alternatives.

Slide 87

Slide 87 text

Prototype Gets ideas out of your head and into the world.

Slide 88

Slide 88 text

Test The chance to gather feedback, reﬁne solutions, and continue to learn about your users.

Slide 89

Slide 89 text

Let’s Play!

Slide 90

Slide 90 text

Ideation

Slide 91

Slide 91 text

Ideation is problem solving with no limitations.

Slide 92

Slide 92 text

Ideation is saying “yes” to everything so we can ﬁnd the best solution for our user without immediate constraint.

Slide 93

Slide 93 text

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…”

Slide 94

Slide 94 text

How does it look like?

Slide 95

Slide 95 text

What an absurd idea looks like? (but it’s okay!)

Slide 96

Slide 96 text

Game 6 Ideation

Slide 97

Slide 97 text

Ideate! Ideate silently.

Slide 98

Slide 98 text

Ideate! Ideate silently. Playback.

Slide 99

Slide 99 text

Ideate! Ideate silently. Playback. Cluster.

Slide 100

Slide 100 text

Ideate! Ideate silently. Playback. Cluster. Present to the room.

Slide 101

Slide 101 text

Prioritization Grid

Slide 102

Slide 102 text

A graph that helps us identify which ideas to act on.

Slide 103

Slide 103 text

What makes a good prioritization grid? 1. Reﬂects the thoughts of everyone on the team 2. Shows us, clearly, which ideas to pursue. 3. Drives discussion.

Slide 104

Slide 104 text

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 diﬀerentiating experience? Feasibility for us ● Can we do this as an organization? ● Can we go to market with this? ● Is it technically feasible?

Slide 105

Slide 105 text

How does it look like?

Slide 106

Slide 106 text

Game 7 Prioritization Grid

Slide 107

Slide 107 text

Prioritize! Vote silently. Impact Feasibility

Slide 108

Slide 108 text

Prioritize! Vote silently. Draw the grid. Impact Feasibility

Slide 109

Slide 109 text

Prioritize! Vote silently. Draw the grid. Plot your ideas. Impact Feasibility

Slide 110

Slide 110 text

Prioritize! Vote silently. Draw the grid. Plot your ideas. Assess.

Slide 111

Slide 111 text

Prototyping

Slide 112

Slide 112 text

A means of exploring a user experience through a visual representation.

Slide 113

Slide 113 text

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.

Slide 114

Slide 114 text

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.

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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.

Slide 117

Slide 117 text

How does it look like?

Slide 118

Slide 118 text

Game 8 Prototype

Slide 119

Slide 119 text

Prototype! Discuss with your buddies.

Slide 120

Slide 120 text

Prototype! Discuss with your buddies. Create workﬂow ﬁrst.

Slide 121

Slide 121 text

Prototype! Discuss with your buddies. Create workﬂow ﬁrst. Then sketch the UI.

Slide 122

Slide 122 text

Prototype! Discuss with your buddies. Create workﬂow ﬁrst. Then sketch the UI. “Transfer” your sketch into Figma and create the prototype.

Slide 123

Slide 123 text

Usability Testing

Slide 124

Slide 124 text

Usability testing is a way to see how easy to use something is by testing it with real users.

Slide 125

Slide 125 text

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 diﬀerent 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.

Slide 126

Slide 126 text

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!

Slide 127

Slide 127 text

Example of scenario

Slide 128

Slide 128 text

Example of success metrics

Slide 129

Slide 129 text

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!

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

Game 9 Usability Testing

Slide 132

Slide 132 text

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 ﬁndings.

Slide 133

Slide 133 text

Playback

Slide 134

Slide 134 text

Playback If history was told in stories, no one would ever forget it. “ -- Anonymous “

Slide 135

Slide 135 text

What makes a good story? Twist Drama Conﬂict Resolution Detail Time Place Plot Humor Emotion Characters Beginning Middle End

Slide 136

Slide 136 text

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.

Slide 137

Slide 137 text

What can it look like? Storyboard Skit Post-it animation First-person narrative Documentary-style video Deck

Slide 138

Slide 138 text

Game 10 Present a Playback

Slide 139

Slide 139 text

Present a Playback

Slide 140

Slide 140 text

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 ﬁve-minute Playback to the entire room.

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

Any question?

Slide 143

Slide 143 text

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)

Slide 144

Slide 144 text

Gonna miss you!

Slide 145

Slide 145 text

References IBM Enterprises Design Thinking IDEO Design Thinking Stanford d.school Design Thinking Interaction Design Foundation