Human-Centered Product Design

Slide 1

Slide 1 text

!1 Human-Centered Product Design Techsylvania // Cluj-Napoca, Romania June, 2019

Slide 2

Slide 2 text

!2 Are you sure you have a great idea?

Slide 3

Slide 3 text

!3 No idea survives its ﬁrst encounter with a customer.” — Steve Blank “

Slide 4

Slide 4 text

!4 1. Problem Validation 2. Solution Prototyping 3. Solution Validation 4. Brand & Product Strategy 5. Product Design & Development 5 Phases - From Idea to Company

Slide 5

Slide 5 text

!5 Questions Asked People Interviewed Zero Questions x Zero People Zero Knowledge! Knowledge

Slide 6

Slide 6 text

!6 The Tools

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

!10

Slide 11

Slide 11 text

!11 Actors, Roles, and Segments CUSTOMER SEGMENT ROLE ACTOR ACTOR ACTOR ACTOR ACTOR ACTOR ROLE ACTOR ACTOR ACTOR ACTOR ACTOR ACTOR ROLE ACTOR ACTOR ACTOR ACTOR ACTOR ACTOR

Slide 12

Slide 12 text

!12 Finding People

Slide 13

Slide 13 text

!13 1. Demographics 2. Psychographics 3. Purchase behavior 4. Interests and Hobbies 5. Social behavior Get Very Speciﬁc

Slide 14

Slide 14 text

!14 Women, never married, college educated, between 28 and 34, living in 30309, with household income under $75,000/yr, employed in a Fortune 1000, who drive to work, less than 10 miles, in a german car, who use an iPhone, and listen to podcasts about creativity and art, and follow Martha Stewart on Facebook, and post to Instagram more than 5 times per week, mostly about their dog, and buy their coffee at Starbucks, and might have a tattoo (that you’ll never see).

Slide 15

Slide 15 text

!15 1. Get out of the building! 2. “Hallway testing” 3. Recruit using Craigslist or Facebook 4. Hire a recruiting ﬁrm (no, not stafﬁng) 5. Don’t use surveys! 6. Offer an incentive. Guerrilla Recruiting Tactics

Slide 16

Slide 16 text

!16 Talking to People

Slide 17

Slide 17 text

!17 1. Don’t try to ﬁnd speciﬁc answers. 2. Don’t use questions as a checklist. 3. Don’t lead the witness. 4. Don’t spend all your time typing. 5. Don’t focus too hard on one thing. 6. Silence can be your friend. Interview Best Practices

Slide 18

Slide 18 text

!18 1. Icebreakers 2. Stage Setters 3. Explorers 4. Reﬁners Interview Phases

Slide 19

Slide 19 text

!19 • Thank you for talking with me today. • Can I get you a coffee/water? • Nice shoes! Icebreakers

Slide 20

Slide 20 text

!20 • I understand you are a _________ • I’d like to learn about _________ • This is Joan, she’ll be taking notes. • Do you mind if I record our conversation for notes later? Stage Setters

Slide 21

Slide 21 text

!21 • Tell me about your typical day. • What frustrates you about ________? • What have you tried? • What do you think other people do? • How do you feel about _______? Explorers

Slide 22

Slide 22 text

!22 • Hmm, what do you mean by _______? • Tell me more about that… • Help me understand that better… • What was that again? • Here’s what I heard you say… Reﬁners

Slide 23

Slide 23 text

!23 1. Are open ended. (not yes/no) 2. Go from general to speciﬁc. 3. Get them telling a story. 4. Don’t lead the witness. 5. Avoid introducing bias. 6. Sometimes, don’t get asked. Good Questions

Slide 24

Slide 24 text

!24 1. Who handles [thing you’re improving] at your home/ ofﬁce? 2. Tell me about your role at [company]. 3. Tell me about your typical day. 4. How much time do you spend on [thing you’re improving]? Customer Segments

Slide 25

Slide 25 text

!25 1. What are some unmet needs you have around [thing you’re improving]? 2. What product or service do you wish you had? 3. What kind of tasks take up the most time in your day? 4. What could be done to improve your experience with [process/role]? 5. What’s the hardest part about being a [demographic]? Problem Discovery

Slide 26

Slide 26 text

!26 1. Do you ﬁnd it hard to [process/problem]? 2. How important is [value you’re delivering] to you? 3. Tell me about the last time you [thing you’re improving] — (listen for complaints) 4. How motivated are you to solve/improve [problem/ process]? 5. If you had a solution to this problem, what would it mean to you? How would it affect you? Problem Discovery

Slide 27

Slide 27 text

!27 Actors (Customers)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

!31 Afﬁnity Mapping

Slide 32

Slide 32 text

!32

Slide 33

Slide 33 text

!33

Slide 34

Slide 34 text

!34 Roles (Personas)

Slide 35

Slide 35 text

!35 Role 1 Role 2 Role 3 Role 4 Roles (Personas)

Slide 36

Slide 36 text

!36 Role 1 Role 2 Role 3 Role 4 Customer Segment

Slide 37

Slide 37 text

!37

Slide 38

Slide 38 text

!38

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

!45

Slide 46

Slide 46 text

!46 You’re Ready for Phase 2

Slide 47

Slide 47 text

!47 1. Problem Validation 2. Solution Prototyping 3. Solution Validation 4. Brand & Product Strategy 5. Product Design & Development 5 Phases - From Idea to Company

Slide 48

Slide 48 text

!48 Research Explore Design Test

Slide 49

Slide 49 text

!49 We need to switch between innovation and optimization. Both modes of thinking are essential to design great things.

Slide 50

Slide 50 text

!50 Paper Prototyping

Slide 51

Slide 51 text

!51

Slide 52

Slide 52 text

!52 • Whiteboard • Sticky Notes • Printer Paper • Sketchpads • Sharpies • Highlighters Toolkit

Slide 53

Slide 53 text

!53 • Discuss elements and content • Begin deﬁning priority and importance of elements and content • Quickly play with layouts and sizing of elements and content on screen Purpose

Slide 54

Slide 54 text

!54

Slide 55

Slide 55 text

!55 Lo-Fidelity Prototyping

Slide 56

Slide 56 text

!56 • Axure • Balsamiq • OmniGrafﬂe Toolkit

Slide 57

Slide 57 text

!57 • Deﬁne basic layout and purpose of elements on screen. • Discuss various states of elements • Default, actionable, etc. • Begin testing the “feel” of workﬂows Purpose

Slide 58

Slide 58 text

!58

Slide 59

Slide 59 text

!59 Hi-Fidelity Prototypes

Slide 60

Slide 60 text

!60 • Axure • Sketch • InVision • WebFlow • WordPress Toolkit

Slide 61

Slide 61 text

!61 • Define fonts, colors, photos, and other visual elements • Make final decisions on appearance and functionality • Test real workflows with real people • Deliverable to development team Purpose

Slide 62

Slide 62 text

!62

Slide 63

Slide 63 text

!63

Slide 64

Slide 64 text

!64 STAGE USE APPEARANCE INTERACTIVITY SKETCH Discuss rough ideas, define general layout and workflow. Hand-drawn on whiteboard or sketchpad None WIREFRAME Define overall layout, content areas, and interactive elements No text or images. Only outlines, boxes, and other shapes as needed. Little to none LOW-FIDELITY PROTOTYPE Refine layout and begin mapping out on-page and navigation interactions Black and white. Some text, outlines, boxes, and other shapes as needed. Shades of gray help indicate priority of elements. Minimal, just enough to move between screens and high level functionality. MEDIUM-FIDELITY PROTOTYPE Discuss content placement and visual priority. Refine workflows and on-page interactions Add minimal color. Some text and image content. Adds some complex on page interactions and limited motion/ animation if needed. HIGH-FIDELITY PROTOTYPE Discuss colors, fonts, images, and other visual elements. Full-color with text and images. It should look and feel like a real application, without any actual functionality. Nearly full-featured.

Slide 65

Slide 65 text

!65 PROTOTYPE PROTOTYPE PROTOTYPE TEST TEST TEST Continuous Improvement

Slide 66

Slide 66 text

!66 You’re Ready for Phase 3

Slide 67

Slide 67 text

!67 1. Problem Validation 2. Solution Prototyping 3. Solution Validation 4. Brand & Product Strategy 5. Product Design & Development 5 Phases - From Idea to Company

Slide 68

Slide 68 text

!68 Testing Ideas

Slide 69

Slide 69 text

!69 Questions Asked People Interviewed Zero Questions x Zero People Zero Knowledge! Knowledge

Slide 70

Slide 70 text

!70 1. Hallway 2. Moderated 3. Remote Moderated 4. Remote Unmoderated 5. Automated Types of Tests

Slide 71

Slide 71 text

!71 Good:   Casual way to gather quick feedback from the people already around you. Bad: The people already around you are probably biased. Hallway Testing

Slide 72

Slide 72 text

!72 Good:   Can provide in-depth understanding of how people use the product Bad: Can be expensive and time consuming. You should use trained moderators. Limited number of people available. Moderated Testing

Slide 73

Slide 73 text

!73 Good:   Services can provide trained moderators. Access to more people. Bad: Less detail that in-person, but not by much. Remote Moderated Testing

Slide 74

Slide 74 text

!74 Good:   Gathers feedback from a large number of people quickly and inexpensively. Bad: You have to prescribe details of what will be tested. No chance to talk to the users directly during the test. Remote Unmoderated Testing

Slide 75

Slide 75 text

!75 Good:   Once setup it requires very little effort to run. Can run 24/7 anywhere on earth. Bad: Best for testing small changes or basic interactions. Can generate false-positives if the test isn’t designed properly. Automated Testing

Slide 76

Slide 76 text

!76 Tools

Slide 77

Slide 77 text

!77 1. Axure 2. InVision 3. PingPong 4. UsabilityHub 5. UserTesting.com 6. QuickMVP Testing Tools and Platforms

Slide 78

Slide 78 text

!78 Will They Pay?

Slide 79

Slide 79 text

!79 1. One-Page Website 2. Email Address Capture 3. Analytics 4. Simple Marketing Campaign Validating Product Value

Slide 80

Slide 80 text

!80 LandingLion Unbounce QuickMVP

Slide 81

Slide 81 text

!81 1. Explain what it does, clearly and concisely. 2. Describe the Value Proposition. 3. Highlight the unique selling points. 4. Address key concerns users had during testing. 5. Add a direct call to action. Critical Website Content

Slide 82

Slide 82 text

!82 1. Remember psychographics? 2. Reﬁne your audience as narrow as possible. 3. Use the “Problem Question” in the ad copy. 4. Plan to spend between $100 and $500. 5. Measure the results. Running a Campaign

Slide 83

Slide 83 text

!83 Women, never married, college educated, between 28 and 34, living in 30309, with household income under $75,000/yr, employed in a Fortune 1000, who drive to work, less than 10 miles, in a german car, who use an iPhone, and listen to podcasts about creativity and art, and follow Martha Stewart on Facebook, and post to Instagram more than 5 times per week, mostly about their dog, and buy their coffee at Starbucks, and might have a tattoo (that you’ll never see).

Slide 84

Slide 84 text

!84 1. Remember psychographics? 2. Reﬁne your audience as narrow as possible. 3. Use the “Problem Question” in the ad copy. 4. Plan to spend between $100 and $500. 5. Measure the results. Running a Campaign

Slide 85

Slide 85 text

!85 1. Bounce Rate: the ﬁrst signal of good or bad. 2. On-page Activity: Did they scroll, click, etc.? 3. Conversion: How many people signed up? 4. Sales by _______: (segment, geography, etc.) 5. Afterglow: Ratio of actions after the initial CTA What to Measure

Slide 86

Slide 86 text

!86 Now What?

Slide 87

Slide 87 text

!87

Slide 88

Slide 88 text

!88 Your Awesome Team

Slide 89

Slide 89 text

!89 • Direct contact with your customers. • Find critical issues with your process. • Quickly and easily see what can be automated. • Zero development costs! Just Do Things Manually

Slide 90

Slide 90 text

!90 1. Document as much as possible. 2. Use Zendesk (or something) to track requests. 3. Talk to your customers weekly. 4. Setup a forum or other way for people to talk. 5. When you see things repeat 10x, write a script. Doing Things Manually

Slide 91

Slide 91 text

!91 1. Tasks: Fiverr, Upwork, Thumbtack 2. Graphics: 99designs 3. Content: Scripted 4. Development: Toptal, Topcoder Other Resources

Slide 92

Slide 92 text

!92 PROTOTYPE PROTOTYPE PROTOTYPE TEST TEST TEST Continuous Improvement

Slide 93

Slide 93 text

!93 You’re Ready for Phase 4

Slide 94

Slide 94 text

1. Problem Validation 2. Solution Prototyping 3. Solution Validation 4. Brand & Product Strategy 5. Product Design & Development 5 Phases - From Idea to Company

Slide 95

Slide 95 text

What is   a Brand?

Slide 96

Slide 96 text

Mesopotamian Bottle Cap ~3000 B.C.

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

A brand exists at the intersection of what you do and how people feel about it.

Slide 99

Slide 99 text

September 1982, ﬁve people died after taking cyanide-laced Tylenol. One of the most trusted brands in the market became one of the most feared. OVERNIGHT!

Slide 100

Slide 100 text

BRAND

Slide 101

Slide 101 text

BRAND CUSTOMER

Slide 102

Slide 102 text

CUSTOMER BRAND

Slide 103

Slide 103 text

CUSTOMER FRIEND FRIEND

Slide 104

Slide 104 text

CUSTOMER BRAND FRIEND FRIEND

Slide 105

Slide 105 text

Companies must understand what their customers are thinking and feeling to make products people want.

Slide 106

Slide 106 text

!106 1. Brand Ethos Development 2. Naming 3. Identity Design 4. Standards & Guidelines   Development Naming & Identity Process

Slide 107

Slide 107 text

A brand exists at the intersection of what you do and how people feel about it.

Slide 108

Slide 108 text

!108 You’re Ready for Phase 5

Slide 109

Slide 109 text

1. Problem Validation 2. Solution Prototyping 3. Solution Validation 4. Brand & Product Strategy 5. Product Design & Development 5 Phases - From Idea to Company

Slide 110

Slide 110 text

!110

Slide 111

Slide 111 text

!111 Photo Credit: Brad Frost

Slide 112

Slide 112 text

!112 Delightful Usable Valuable Feasible What is an MVP?

Slide 113

Slide 113 text

!113 Delightful Usable Valuable Feasible Delightful Usable Valuable Feasible What is an MVP? NOT THIS THIS!

Slide 114

Slide 114 text

!114 Testing Ideas

Slide 115

Slide 115 text

!115 Typical Design Team Product Owner Designers Developers

Slide 116

Slide 116 text

!116 THE PRODUCT Typical Process Developers Designers

Slide 117

Slide 117 text

!117 Better Design Team Product Owner Designers Developers

Slide 118

Slide 118 text

!118 A Common Language

Slide 119

Slide 119 text

!119 Design Operations THE PRODUCT APPLICATIONS SYSTEMS FRAMEWORKS CODE APPLICATIONS SYSTEMS COMPONENTS ELEMENTS Development Visual Design

Slide 120

Slide 120 text

!120 Atomic Design Systems Atoms Molecules Organisms Templates Pages • Atomic Design • Beneﬁts of Shared Design Systems • GE’s Predix Design System • ExxonMobil’s Design System • MorningStar’s Design System Reference

Slide 121

Slide 121 text

Design System Templates Modules !121 Sketch InVision (Prototype) Design System Manager Components DSM Design Token API Process Overview Inspect Mode Automated Processes

Slide 122

Slide 122 text

!122 Design is a Verb

Slide 123

Slide 123 text

!123 Research Explore Design Test

Slide 124

Slide 124 text

!124 An Iterative Approach

Slide 125

Slide 125 text

!125 DESIGN DEVELOP DESIGN TEST TEST TEST Continuous Improvement

Slide 126

Slide 126 text

!126 1. Value people and interactions over   processes and tools. 2. Respond to change over following a plan. 3. Emphasize collaboration with customers. 4. Stay focused on the problem they are solving. 5. Encourage constructive critique. Healthy Design Operations

Slide 127

Slide 127 text

!127 THE PRODUCT Developers Designers Typical Process

Slide 128

Slide 128 text

!128 THE PRODUCT Developers Designers Better Process

Slide 129

Slide 129 text

!129 THE PRODUCT Developers Designers Customers Best Process

Slide 130

Slide 130 text

!130 1. Collaborate on solving problems. 2. Believe in evidence based decision making. 3. Communicate effectively. 4. Publicly measure progress and hold each other accountable for quality. 5. Relentlessly listen to their customers. Design Operations #designops

Slide 131

Slide 131 text

!131

Slide 132

Slide 132 text

!132 Business Goals User Goals Designer Goals

Slide 133

Slide 133 text

!133 PROTOTYPE PROTOTYPE PROTOTYPE TEST TEST TEST Continuous Improvement

Slide 134

Slide 134 text

!134 Understanding what people want and designing things that delight them is the single most powerful way to achieve business goals.

Slide 135

Slide 135 text

!135 LOOPS Building Products with Clarity & Confidence J CORNELIUS LOOPS J CORNELIUS Look out for my book coming this summer. Get an email when it’s released. bit.ly/loopsbook

Slide 136

Slide 136 text

!136 Thank You ninelabs.com  @ninelabs jcornelius.com  @jc