Design Thinking - Speaker Deck

Slide 1

Slide 1 text

IYC Design Thinking Rifat Najmi May 30 2019 - Part 1

Slide 2

Slide 2 text

A bit about your (de)mentor Rifat Najmi @rifatnajmi

Slide 3

Slide 3 text

Your turn... Please tell us your name, your job, your superpower, and your motivation in joining the class

Slide 4

Slide 4 text

What’s today’ special? day 1

Slide 5

Slide 5 text

Today’s Agenda Introduction Design Thinking (part 1) What’s UX? Let’s Play! ISHOMA

Slide 6

Slide 6 text

Design Thinking part 1

Slide 7

Slide 7 text

We want you to draw an alarm clock

Slide 8

Slide 8 text

Now draw something to wake up people in a pleasant way

Slide 9

Slide 9 text

empathize deﬁne ideate prototype test

Slide 10

Slide 10 text

empathize deﬁne ideate prototype test

Slide 11

Slide 11 text

Empathize Build empathy for your users by learning their values.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

What is UX?

Slide 15

Slide 15 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 16

Slide 16 text

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

Slide 17

Slide 17 text

Learnable Or in other word: intuitive

Slide 18

Slide 18 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 19

Slide 19 text

Desirable Not just about function, but aesthetically pleasing

Slide 20

Slide 20 text

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

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 public transportation in Jakarta ...

Slide 31

Slide 31 text

You’re gonna do so by improving the app 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

No content

Slide 42

Slide 42 text

Game 2 Empathy Map

Slide 43

Slide 43 text

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

Slide 44

Slide 44 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 45

Slide 45 text

User Persona

Slide 46

Slide 46 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 47

Slide 47 text

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

Slide 48

Slide 48 text

Game 3 User Persona

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Scenario Map

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 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 54

Slide 54 text

How does it look like? Doing Thinking Feeling Phase

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Game 4 Scenario Map

Slide 57

Slide 57 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 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 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 62

Slide 62 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 63

Slide 63 text

A bad example needs a way to so that

Slide 64

Slide 64 text

A better example needs a way to so that

Slide 65

Slide 65 text

Game 5 Need Statement

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Any question?

Slide 70

Slide 70 text

See you later!

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

IYC Design Thinking Rifat Najmi May 30 2019 - Part 2 (kalo sempet hehe)

Slide 73

Slide 73 text

Welcome back!

Slide 74

Slide 74 text

We meet again! Rifat Najmi @rifatnajmi

Slide 75

Slide 75 text

Today’s Agenda Design Thinking (part 2) Let’s Play! Let’s Play Again! Discussion ISHOMA

Slide 76

Slide 76 text

Design Thinking part 2

Slide 77

Slide 77 text

empathize deﬁne ideate prototype test

Slide 78

Slide 78 text

empathize deﬁne ideate prototype test

Slide 79

Slide 79 text

Ideate Generate radical design alternatives.

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Let’s Play!

Slide 83

Slide 83 text

Ideation

Slide 84

Slide 84 text

Ideation is problem solving with no limitations.

Slide 85

Slide 85 text

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

Slide 86

Slide 86 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 87

Slide 87 text

How does it look like?

Slide 88

Slide 88 text

What an absurd idea looks like?

Slide 89

Slide 89 text

Game 6 Ideation

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Prioritization Grid

Slide 92

Slide 92 text

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

Slide 93

Slide 93 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 94

Slide 94 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 95

Slide 95 text

How does it look like?

Slide 96

Slide 96 text

Game 7 Prioritization Grid

Slide 97

Slide 97 text

Prioritize! Vote silently. Impact Feasibility

Slide 98

Slide 98 text

Prioritize! Vote silently. Draw the grid. Impact Feasibility

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Prototyping

Slide 102

Slide 102 text

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

Slide 103

Slide 103 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 104

Slide 104 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 105

Slide 105 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 106

Slide 106 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 107

Slide 107 text

How does it look like?

Slide 108

Slide 108 text

Game 8 Prototype

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

Usability Testing

Slide 111

Slide 111 text

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

Slide 112

Slide 112 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 113

Slide 113 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 114

Slide 114 text

Example of scenario

Slide 115

Slide 115 text

Example of success metrics

Slide 116

Slide 116 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 117

Slide 117 text

Game 9 Usability Testing

Slide 118

Slide 118 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 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 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 122

Slide 122 text

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

Slide 123

Slide 123 text

Game 10 Present a Playback

Slide 124

Slide 124 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 125

Slide 125 text

Any question?

Slide 126

Slide 126 text

Rifat Najmi @rifatnajmi rifatnajmi.com 0818 276 276 info@rifatnajmi.com Ask us anything (or not)

Slide 127

Slide 127 text

Gonna miss you!