ux playbook: real world user exercises

139

Upload: invision-app

Post on 10-Jan-2017

1.937 views

Category:

Design


9 download

TRANSCRIPT

Page 1: UX playbook: Real world user exercises
Page 2: UX playbook: Real world user exercises

@clarklab#InVisionWebinar

Page 3: UX playbook: Real world user exercises
Page 4: UX playbook: Real world user exercises

Content Designer@InVisionApp

Page 5: UX playbook: Real world user exercises
Page 6: UX playbook: Real world user exercises

Persona Benefits

Page 7: UX playbook: Real world user exercises
Page 8: UX playbook: Real world user exercises

UX Playbookreal world user exercises

Page 9: UX playbook: Real world user exercises

No designated UX

Tight timelines and misunderstandings

Processing and agreeing on feedback

Challenges

Page 10: UX playbook: Real world user exercises

Our Session Today

Simple exerciseswith some homework

Page 11: UX playbook: Real world user exercises

UX doesn’t stopit isn’t a phase

Page 12: UX playbook: Real world user exercises

Personas Storyboards

User Testing Prototyping

Page 13: UX playbook: Real world user exercises

Personas

Page 14: UX playbook: Real world user exercises

A persona is a representation of a userbased on data (hopefully)

Page 15: UX playbook: Real world user exercises

Focus on the specific somebody, not the generic anybody

Persona Benefits

Page 16: UX playbook: Real world user exercises

Share user-centered knowledge with the entire team

Persona Benefits

Page 17: UX playbook: Real world user exercises

Similar to a brand style guide or content requirements

Persona Benefits

Page 18: UX playbook: Real world user exercises

Common Ground

Persona Benefits

Page 19: UX playbook: Real world user exercises

“What does a persona look like?”

Page 20: UX playbook: Real world user exercises

Persona Benefits

Page 21: UX playbook: Real world user exercises

Persona Benefits

Page 22: UX playbook: Real world user exercises

Design Persona

Marketing Persona

Proto Persona

Types of Personas

Page 23: UX playbook: Real world user exercises

a specific personrepresentative of larger groups

Creating a Persona

Page 24: UX playbook: Real world user exercises

based on researchdata, interviews, analytics, etc

Creating a Persona

Page 25: UX playbook: Real world user exercises

current realitynot the future

Creating a Persona

Page 26: UX playbook: Real world user exercises

challengingvaried skills and interest levels

Creating a Persona

Page 27: UX playbook: Real world user exercises

help you understand the user’s behaviors, attitudes, needs

Creating a Persona

Page 28: UX playbook: Real world user exercises

“Widening your target doesn’t improve your aim. To create a product that must satisfy a broad audience of users, logic will tell you to make it as broad in its functionality as possible to accommodate the most people. Logic is wrong.”

Alan Cooper

Page 29: UX playbook: Real world user exercises

“When you design for your primary persona, you end up delighting your primary persona and satisfying your secondary persona(s). If you design for everyone, you delight no one. That is the recipe for a mediocre product.”

Alan Cooper

Page 30: UX playbook: Real world user exercises

Examplesof personas in action

Page 31: UX playbook: Real world user exercises

Persona Benefits

Page 32: UX playbook: Real world user exercises

Persona Benefits

Page 33: UX playbook: Real world user exercises

Persona Benefits

Page 34: UX playbook: Real world user exercises

Persona Benefits

Page 35: UX playbook: Real world user exercises

Persona Benefits

Page 36: UX playbook: Real world user exercises

Persona Benefits

Page 37: UX playbook: Real world user exercises
Page 38: UX playbook: Real world user exercises

Homework

Page 39: UX playbook: Real world user exercises

HomeworkCreate three personas

Page 40: UX playbook: Real world user exercises

HomeworkCreate three personas

Bonus: pain points

Page 41: UX playbook: Real world user exercises

Storyboarding

Page 42: UX playbook: Real world user exercises

A storyboard is the planning of a sequence of events

Page 43: UX playbook: Real world user exercises

covers a complete event

A good storyboard

Page 44: UX playbook: Real world user exercises

is flexible

A good storyboard

Page 45: UX playbook: Real world user exercises

is assignable

A good storyboard

Page 46: UX playbook: Real world user exercises

A user visits

airbnb

Page 47: UX playbook: Real world user exercises

A user visits

airbnb

User searches

for property

Page 48: UX playbook: Real world user exercises

A user visits

airbnb

User searches

for property

User books

property

Page 49: UX playbook: Real world user exercises

A user visits

airbnb

User searches

for property

User books

property

User & host

receive email

Page 50: UX playbook: Real world user exercises

A user visits

airbnb

User books

property

User & host

receive email

User searches

for property

Page 51: UX playbook: Real world user exercises

Visual Storyboard Examples

Page 52: UX playbook: Real world user exercises
Page 53: UX playbook: Real world user exercises
Page 54: UX playbook: Real world user exercises
Page 55: UX playbook: Real world user exercises

Improve Company Focus

Page 56: UX playbook: Real world user exercises

User learns about

The Zebra

Page 57: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

Page 58: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Page 59: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

Page 60: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

Page 61: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

Page 62: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 63: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 64: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 65: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 66: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 67: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 68: UX playbook: Real world user exercises

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

User receives

on-boarding paperwork

User Is Insured!

Page 69: UX playbook: Real world user exercises
Page 70: UX playbook: Real world user exercises

Open the app

Page 71: UX playbook: Real world user exercises

Open the app

Select the flight

Page 72: UX playbook: Real world user exercises

Open the app

Select the flight

Check In

Page 73: UX playbook: Real world user exercises
Page 74: UX playbook: Real world user exercises
Page 75: UX playbook: Real world user exercises
Page 76: UX playbook: Real world user exercises
Page 77: UX playbook: Real world user exercises
Page 78: UX playbook: Real world user exercises
Page 79: UX playbook: Real world user exercises

Open the app

Select the flight

Check In

Page 80: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Page 81: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Page 82: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Page 83: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Manually enter the

code

Page 84: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Manually enter the

code

Type out full name

Page 85: UX playbook: Real world user exercises

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Manually enter the

code

Type out full name

Tap “Check In”

Page 86: UX playbook: Real world user exercises
Page 87: UX playbook: Real world user exercises

Open the app

Select the flight

Check In

Page 88: UX playbook: Real world user exercises

Homework

Page 89: UX playbook: Real world user exercises

HomeworkStoryboard your product value

Page 90: UX playbook: Real world user exercises

HomeworkStoryboard your product value

Bonus: storyboard a pain point

Page 91: UX playbook: Real world user exercises

User Testing

Page 92: UX playbook: Real world user exercises

user testing is the process of watching people use your product

Page 93: UX playbook: Real world user exercises

User Testing Benefits

Always surprising

Page 94: UX playbook: Real world user exercises

How it feels to watch a user test your product for the first time.

@DesignUXUI

Page 95: UX playbook: Real world user exercises

User Testing Benefits

Huge returns

Page 96: UX playbook: Real world user exercises

User Testing Benefits

Before, during & afterit isn’t a phase

Page 97: UX playbook: Real world user exercises

Types of User Testing

remote

focus group

beta testing

user interviews

Page 98: UX playbook: Real world user exercises
Page 99: UX playbook: Real world user exercises

“We still believe that the most important part of UX design is testing. You can write, strategize, research and design all you want but the proof is in the testing.”

David Perel, co-founder of Obox

Page 100: UX playbook: Real world user exercises

research your target audience

User Testing Do’s

Page 101: UX playbook: Real world user exercises

give general directionnot turn-by-turn navigation

User Testing Do’s

Page 102: UX playbook: Real world user exercises

document everythingaction items aplenty!

User Testing Do’s

Page 103: UX playbook: Real world user exercises

test at all stagessometimes fidelity isn’t important

User Testing Do’s

Page 104: UX playbook: Real world user exercises

only testing internallywith like-minded folks

User Testing Don’ts

Page 105: UX playbook: Real world user exercises

relying on emulatorsa screen in a screen

User Testing Don’ts

Page 106: UX playbook: Real world user exercises

User Testing Don’t Tell Anyone’s

Page 107: UX playbook: Real world user exercises

drunk user testingwith friends and family

User Testing Don’t Tell Anyone’s

Page 108: UX playbook: Real world user exercises

squint testingwith our without bad eyesight

User Testing Don’t Tell Anyone’s

Page 109: UX playbook: Real world user exercises

translate testingit’s all Greek to me

User Testing Don’t Tell Anyone’s

Page 110: UX playbook: Real world user exercises
Page 111: UX playbook: Real world user exercises
Page 112: UX playbook: Real world user exercises
Page 113: UX playbook: Real world user exercises

5 day research sprintscultivating

Page 114: UX playbook: Real world user exercises

Time to marketfor useful, usable features

Page 115: UX playbook: Real world user exercises

“I thought I’d be looking more at their taps than what they were saying, but it turned out that looking at their reactions and expressions were more important to me.”

Vicki Tan

Page 116: UX playbook: Real world user exercises
Page 117: UX playbook: Real world user exercises

18% drop overnight

Page 118: UX playbook: Real world user exercises

Homework

Page 119: UX playbook: Real world user exercises

HomeworkConduct a remote user test

Page 120: UX playbook: Real world user exercises

HomeworkConduct a remote user test

Bonus: host an IRL focus group

Page 121: UX playbook: Real world user exercises

Prototyping

Page 122: UX playbook: Real world user exercises

the design processa simulation of the final product

Page 123: UX playbook: Real world user exercises

test before code

Why Prototype?

Page 124: UX playbook: Real world user exercises

test before design

Why Prototype?

Page 125: UX playbook: Real world user exercises

common ground

Why Prototype?

Page 126: UX playbook: Real world user exercises

use paper, wireframes, or whatever

On Fidelity

Page 127: UX playbook: Real world user exercises

make it interactive

On Fidelity

Page 128: UX playbook: Real world user exercises

On Fidelity

share it with everyone(that can handle it)

Page 129: UX playbook: Real world user exercises

“Investment is the enemy of creativity. The more you invest in an idea, the more bias you have for that idea.”

Clark Valberg

Page 130: UX playbook: Real world user exercises

Prototyping Tips

strive for “good enough”pixel-perfect is for production

Page 131: UX playbook: Real world user exercises

Prototyping Tips

keep a wide focusstuck somewhere? move on!

Page 132: UX playbook: Real world user exercises

Prototyping Tips

use Symbols and Smart Objectsduplicate work is the worrrrst

Page 133: UX playbook: Real world user exercises

Prototyping Tips

use “real” assetsstock is fine!

Page 134: UX playbook: Real world user exercises

Prototyping Tips

prototype on real deviceslive in the real world

Page 135: UX playbook: Real world user exercises

Homework

Page 136: UX playbook: Real world user exercises

HomeworkStart from scratch, find “good enough”

Page 137: UX playbook: Real world user exercises

HomeworkStart from scratch, find “good enough”

Bonus: m

Page 138: UX playbook: Real world user exercises

@clarklab#InVisionWebinar

Page 139: UX playbook: Real world user exercises