Human-Centered Product Design

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

!2 Are you sure you have a great idea?

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

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

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

!6 The Tools

!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

!12 Finding People

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

!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).

!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

!16 Talking to People

!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

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

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

!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

!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

!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

!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

!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

!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

!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

!27 Actors (Customers)

!31 Afﬁnity Mapping

!34 Roles (Personas)

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

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

!46 You’re Ready for Phase 2

!48 Research Explore Design Test

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

!50 Paper Prototyping

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

!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

!55 Lo-Fidelity Prototyping

!56 • Axure • Balsamiq • OmniGrafﬂe Toolkit

!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

!59 Hi-Fidelity Prototypes

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

!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

!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.

!65 PROTOTYPE PROTOTYPE PROTOTYPE TEST TEST TEST Continuous Improvement

!68 Testing Ideas

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

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

!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

!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

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

!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

!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

!76 Tools

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

!78 Will They Pay?

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

!80 LandingLion Unbounce QuickMVP

!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

!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

!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).

!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

!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

!86 Now What?

!88 Your Awesome Team

!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

!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

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

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

What is   a Brand?

Mesopotamian Bottle Cap ~3000 B.C.

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

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!

BRAND CUSTOMER

CUSTOMER BRAND

CUSTOMER FRIEND FRIEND

CUSTOMER BRAND FRIEND FRIEND

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

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

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

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

!111 Photo Credit: Brad Frost

!112 Delightful Usable Valuable Feasible What is an MVP?

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

!114 Testing Ideas

!115 Typical Design Team Product Owner Designers Developers

!116 THE PRODUCT Typical Process Developers Designers

!117 Better Design Team Product Owner Designers Developers

!118 A Common Language

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

!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

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

!122 Design is a Verb

!123 Research Explore Design Test

!124 An Iterative Approach

!125 DESIGN DEVELOP DESIGN TEST TEST TEST Continuous Improvement

!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

!127 THE PRODUCT Developers Designers Typical Process

!128 THE PRODUCT Developers Designers Better Process

!129 THE PRODUCT Developers Designers Customers Best Process

!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

!132 Business Goals User Goals Designer Goals

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

!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

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

Human-Centered Product Design

Human-Centered Product Design

More Decks by J Cornelius

Other Decks in Design

Featured

Transcript