thinkLA AdU: UX 2015 Presentation Slides

77
thinkLA // 24 March 2015 USER EXPERIENCE DESIGN: A PRIMER FOR MARKETERS JASON BRUSH

Transcript of thinkLA AdU: UX 2015 Presentation Slides

Page 1: thinkLA AdU: UX 2015 Presentation Slides

thinkLA // 24 March 2015

USER EXPERIENCE DESIGN: A PRIMER FOR MARKETERS JASON BRUSH

Page 2: thinkLA AdU: UX 2015 Presentation Slides

IN THE PAST…

Page 3: thinkLA AdU: UX 2015 Presentation Slides

≠ADVERTISINGCREATIVE

PRODUCTDESIGN

Page 4: thinkLA AdU: UX 2015 Presentation Slides

advertise (v.)

from Latin advertere : “turn toward”

Page 5: thinkLA AdU: UX 2015 Presentation Slides

design (v.)

from Latin designare : “mark out, devise, choose, designate, appoint”

Page 6: thinkLA AdU: UX 2015 Presentation Slides

Meeting People’s

Needs

Long-term Impact

Shaping Culture & Opinion

Short Term Impact

DESIGN’S RELATIONSHIP TO CLIENT INTERESTS

USER-CENTERED DESIGN

CAMPAIGN CREATIVE

BRAND DEVELOPMENT

VISUALIZATION

Page 7: thinkLA AdU: UX 2015 Presentation Slides

UBER is worth $40B Doesn’t Own Vehicles

Facebook is worth $236B Doesn’t Make Content

airbnb is worth $10B Doesn’t Own Real Estate

WHAT IS THE VALUE OF GREAT USER EXPERIENCE?

Page 8: thinkLA AdU: UX 2015 Presentation Slides

Over the last 10 years design-led companies have maintained significant stock market advantage, outperforming the S&P by an extraordinary 228%.

— DMI Design Value Index

Page 9: thinkLA AdU: UX 2015 Presentation Slides

CREATIVE AGENCIES’ DIFFERING AREAS OF PRACTICE

Communication

Product Design

PhysicalDigital

BRANDING

TV, OOH, PRINT ADVERTISING

PACKAGING

DIGITAL CONTENT

WEBSITES

CRM

ECOMMERCE

USER INTERFACE

STORE EXPERIENCES

INDUSTRIAL DESIGN

Page 10: thinkLA AdU: UX 2015 Presentation Slides

DIGITAL IS CHANGING THE CREATIVE AGENCY’S PURVIEW

Communication

Product Design

PhysicalDigital

BRANDING

TV, OOH, PRINT ADVERTISING

PACKAGING

DIGITAL CONTENT

WEBSITES

CRM

ECOMMERCE

USER INTERFACE

STORE EXPERIENCES

INDUSTRIAL DESIGN

Page 11: thinkLA AdU: UX 2015 Presentation Slides

COMMUNICATION

PRODUCT DESIGN

PHYSICALDIGITAL

Page 12: thinkLA AdU: UX 2015 Presentation Slides

COMMUNICATION

PRODUCT DESIGN

PHYSICALDIGITAL

Page 13: thinkLA AdU: UX 2015 Presentation Slides

COMMUNICATION

PRODUCT DESIGN

PHYSICALDIGITAL

Page 14: thinkLA AdU: UX 2015 Presentation Slides

COMMUNICATION

PRODUCT DESIGN

PHYSICALDIGITAL

Page 15: thinkLA AdU: UX 2015 Presentation Slides

USER EXPERIENCE

DESIGN

Human Computer Interaction

Interaction Design

Human Factors

Visual Design

Information Architecture

Architecture

Content Industrial Design

Sound Design

DAN SAFFER @ODANNYBOY

Page 16: thinkLA AdU: UX 2015 Presentation Slides

USER EXPERIENCE

DESIGN

Human Computer Interaction

INTERACTION DESIGN

Human Factors

Visual Design

Information Architecture

Architecture

Content Industrial Design

Sound Design

DAN SAFFER @ODANNYBOY

Page 17: thinkLA AdU: UX 2015 Presentation Slides

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.

— Interaction Design Association

Page 18: thinkLA AdU: UX 2015 Presentation Slides

Interaction design is about shaping digital things for people’s use.

— Jonas Löwgren

Page 19: thinkLA AdU: UX 2015 Presentation Slides

Behavior is our medium.

— Robert Fabricant

Page 20: thinkLA AdU: UX 2015 Presentation Slides

EMPATHIZE EXPLORE EXECUTE

Page 21: thinkLA AdU: UX 2015 Presentation Slides

(POOR)PROBLEM

ARTICULATION

We need a new website.

We need to improve our product detail page.

We need a mobile app.

We need a new social campaign.

EMPATHIZE EXPLORE EXECUTE

Page 22: thinkLA AdU: UX 2015 Presentation Slides

HOW MIGHT WE…?

EMPATHIZE EXPLORE EXECUTE

Page 23: thinkLA AdU: UX 2015 Presentation Slides

EMPATHIZE EXPLORE EXECUTE

We need a [solution(s)]for [person/people] to [achieve a particular goal].

ARTICULATE PROBLEM

HOW MIGHT WE…?

Page 24: thinkLA AdU: UX 2015 Presentation Slides

- Competitive research

- Market research

- User research

- Engineering capabilities & constraints

- Strategic insights

- Target users

- User needs

- KPIs

- Platform(s)

- Creative Brief

UNDERSTAND SYNTHESIZE IMPLEMENT

IDEATE

- Low Fidelity visualizations

- Technology proofs-of-concept

- User testing

- Engineering feasibility analysis

PROTOTYPEEVALUATE

- Interaction

- Visual design

VISUALIZE

- Collaborate with engineering to execute

- Validate & optimize at scale

Page 25: thinkLA AdU: UX 2015 Presentation Slides

UNDERSTAND & SYNTHESIZE

Page 26: thinkLA AdU: UX 2015 Presentation Slides

WHEN PLANNING RESEARCH, DEFINE:

OBJECTIVES

What do you want to learn?

ASSUMPTIONS

What do you believe to be true?

METHODS

How are you going to gain insight?

Page 27: thinkLA AdU: UX 2015 Presentation Slides

WHEN PLANNING RESEARCH, ASK:

Who are your users?

What makes them unique?

If you’re targeting multiple groups of users, what are your priorities? Why?

What will success look like for different users?

Page 28: thinkLA AdU: UX 2015 Presentation Slides

POOR QUESTION

How do people buy video games?

Page 29: thinkLA AdU: UX 2015 Presentation Slides

BETTER QUESTION

How do moms buy video games for their kids in a store?

Page 30: thinkLA AdU: UX 2015 Presentation Slides

WHEN PLANNING RESEARCH, DON’T MAKE IT MORE COMPLICATED THAN IT NEEDS TO BE:

What research do you currently have? What data do you currently collect?

What data out in the world already? What third-party reports exist?

Page 31: thinkLA AdU: UX 2015 Presentation Slides

WHEN PLANNING RESEARCH, TAILOR YOUR PLAN TO YOUR RESOURCES

How much time do you have? What is the minimum amount of research you can do and still gain some insight?

Page 32: thinkLA AdU: UX 2015 Presentation Slides

EXAMPLE RESEARCH TACTICS

SURVEYS

CONTEXTUAL INQUIRY (E.G., IN-HOME INTERVIEWS)

JOURNEY MAPPING / TASK ANALYSIS

USER DIARIES

FOLLOW-AROUNDS / SHOP-ALONGS

CARD SORTING

CONCEPT RANKING

GENERATIVE

EVALUATIVE

Page 33: thinkLA AdU: UX 2015 Presentation Slides

If you want to find out what people really need, you have to forget about your problems and worry about their lives.

— Dale Carnegie

Page 34: thinkLA AdU: UX 2015 Presentation Slides

INQUIRY

Ask people what they do.

PARTICIPATION

Try what people experience.

OBSERVATION

Look at what people do.

METHODS FOR EMPATHY

Page 35: thinkLA AdU: UX 2015 Presentation Slides

The only way to experience an experience is to experience it.

— Bill Moggridge

Page 36: thinkLA AdU: UX 2015 Presentation Slides

BAD RECRUITING = BAD INFORMATION

Define the precise criteria for the people to whom you want to speak — and to whom you don’t want to speak.

Page 37: thinkLA AdU: UX 2015 Presentation Slides

WHEN TALKING TO PEOPLE, ASK:

Who…?

What…?

Where…?

When…?

Why…?

How…?

Page 38: thinkLA AdU: UX 2015 Presentation Slides

TALKING TO PEOPLE DOESN’T HAVE TO BE COMPLEX OR EXPENSIVE

Use internal resources not on the project.

Use Facebook, Twitter, etc. to recruit

Web surveys

Do Interviews over Skype, Hangouts, etc.

Use Lync, Adobe Connect, etc. to get users input on existing products.

…and more. Be inventive!

Page 39: thinkLA AdU: UX 2015 Presentation Slides

People

Context

Tasks

Technologies

WHAT TO OBSERVE

AFFORDANCES OBSTACLES

Page 40: thinkLA AdU: UX 2015 Presentation Slides

BOOKS TO READ

Designing for the Digital Age

by Kim Goodwin

The User is Always Right

by Steve Mulder

About Face: The Essentials of

Interaction Design

by Alan Cooper

Page 41: thinkLA AdU: UX 2015 Presentation Slides

IDEATE

Page 42: thinkLA AdU: UX 2015 Presentation Slides

DIVERGENCE / CONVERGENCE

Objective SolutionCreate Choices Make Choices

DIAGRAM AFTER TIM BROWN @TCEB62

Page 43: thinkLA AdU: UX 2015 Presentation Slides

A building must be considered “with due reference to function, structure, and beauty”

— Vitruvius, 80 – 15 BCE

Page 44: thinkLA AdU: UX 2015 Presentation Slides

TECHNICAL FEASIBILITY

FINANCIALVIABILITY

DESIRABILITYSolution

DIAGRAM PER IDEO @IDEO

Page 45: thinkLA AdU: UX 2015 Presentation Slides

WHAT IS THE STORY OF PEOPLE’S INTERACTION WITH YOUR EXPERIENCE?

Page 46: thinkLA AdU: UX 2015 Presentation Slides

USE PIXAR’S FORMULA TO DESCRIBE YOUR EXPERIENCE

1. Once upon a time there was …

2. Every day …

3. One day …

4. Because of that …

5. Because of that …

6. Until finally …

Page 47: thinkLA AdU: UX 2015 Presentation Slides

USE PIXAR’S FORMULA TO DESCRIBE YOUR EXPERIENCE

1. Once upon a time there was …

2. Every day …

3. One day …

4. Because of that …

5. Because of that …

6. Until finally …

BEFORE YOUR EXPERIENCE

AFTER YOUR EXPERIENCE

Page 48: thinkLA AdU: UX 2015 Presentation Slides

START BY WRITING SCENARIOS

[A person] needs to [accomplish a task]so that she or he can [achieve some benefit].

Page 49: thinkLA AdU: UX 2015 Presentation Slides

CORE UX DESIGN ACTIVITIES

INFORMATION ARCHITECTURE

Describing the organization of systems so that people can easily navigate them.

MENTAL MODELS

Describing what people understand about how a system works.

INTERACTION MODELS

Describing the specific behavior of interactions.

Page 50: thinkLA AdU: UX 2015 Presentation Slides

Mental models are what people really have in their heads and what guides their use of things.

— Don Norman

Page 51: thinkLA AdU: UX 2015 Presentation Slides

A AA

A

Designer UsersSystem

Page 52: thinkLA AdU: UX 2015 Presentation Slides

Ready-to-hand Present-to-handVS

Page 53: thinkLA AdU: UX 2015 Presentation Slides

PROTOTYPE

A model of a system used to demonstrate and evaluate its behavior.

PROOF OF CONCEPT

A demonstration that a particular technology can produce a desired effect.

Page 54: thinkLA AdU: UX 2015 Presentation Slides

DESIGNING INTERACTIONS (PER BILL VERPLANK)

“HOW DO YOU DO?”

“HOW DO YOU FEEL?”

“HOW DO YOU KNOW?”

What does the user need for interaction?

Page 55: thinkLA AdU: UX 2015 Presentation Slides

DESIGNING INTERACTIONS (PER BILL VERPLANK)

“HOW DO YOU DO?”

“HOW DO YOU FEEL?”

“HOW DO YOU KNOW?”

How does your interaction with the system make you feel?

Page 56: thinkLA AdU: UX 2015 Presentation Slides

DESIGNING INTERACTIONS (PER BILL VERPLANK)

“HOW DO YOU DO?”

“HOW DO YOU FEEL?”

“HOW DO YOU KNOW?” How do you know the system has done what you want it to do?

Page 57: thinkLA AdU: UX 2015 Presentation Slides

Designing in the absence of content is not design. It’s decoration.

— Jeffery Zeldman

Page 58: thinkLA AdU: UX 2015 Presentation Slides

Time

Pixel-Perfect Visual Design

Handdrawn Sketch

TIME COST OF MAKING DESIGNS

Low-fidelity Storyboards

High-fidelity Wireframes

TIME COST OF EXPLAINING DESIGNS

FINDING THE RIGHT BALANCE OF FIDELITY FOR YOUR PROJECT

DIAGRAM AFTER DAVID SHERWIN @CHANGEORDER

Page 59: thinkLA AdU: UX 2015 Presentation Slides

Context

Fidelity

FULL EXPERIENCELIMITED USE CASES

PAPER PROTOTYPE

WIZARD OF OZ

CLICK-THROUGH

MOTION STUDY

CODE

Page 60: thinkLA AdU: UX 2015 Presentation Slides

Number of Variations Needed to Evaluate Design

MICROINTERACTIONS

SYSTEM DESIGN

Fidelity Needed

to Evaluate

Design

“details that make the experience delightful, humane, and effective” — Dan Saffer

Page 61: thinkLA AdU: UX 2015 Presentation Slides
Page 62: thinkLA AdU: UX 2015 Presentation Slides
Page 63: thinkLA AdU: UX 2015 Presentation Slides
Page 64: thinkLA AdU: UX 2015 Presentation Slides

Always

Be

Capturing

Page 65: thinkLA AdU: UX 2015 Presentation Slides

BOOKS TO READ

Designing For Interaction

The Design of Everyday Things

by Don Norman

Sketching User Experiences

by Bill Buxton

Microinteractions

by Dan Saffer

Page 66: thinkLA AdU: UX 2015 Presentation Slides

IMPLIMENT

Page 67: thinkLA AdU: UX 2015 Presentation Slides

If you cannot measure it you cannot improve it.

— Lord Kelvin

Page 68: thinkLA AdU: UX 2015 Presentation Slides

A VS B

100,000 users get option A

100,000 users get option B

Page 69: thinkLA AdU: UX 2015 Presentation Slides

A B

Page 70: thinkLA AdU: UX 2015 Presentation Slides

A

A CVS

B

Page 71: thinkLA AdU: UX 2015 Presentation Slides

A

A C

B

Page 72: thinkLA AdU: UX 2015 Presentation Slides

A

A C

B

Page 73: thinkLA AdU: UX 2015 Presentation Slides

A B C

TESTING DIFFERENT MICROINTERACTIONS…

Page 74: thinkLA AdU: UX 2015 Presentation Slides

BUSINESS TRAVELERS

LEISURE TRAVELERS

CALIFORNIANS

DIFFERENT DESIGNS CAN PROVE TO BE MORE EFFECTIVE FOR DIFFERENT AUDIENCES

Page 75: thinkLA AdU: UX 2015 Presentation Slides

IN CONCLUSION…

Page 76: thinkLA AdU: UX 2015 Presentation Slides

Less, but better.

— Dieter Rams

Page 77: thinkLA AdU: UX 2015 Presentation Slides

THANKS