UX playbook: Real world user exercises

Post on 10-Jan-2017

1.937 views 9 download

Transcript of UX playbook: Real world user exercises

@clarklab#InVisionWebinar

Content Designer@InVisionApp

Persona Benefits

UX Playbookreal world user exercises

No designated UX

Tight timelines and misunderstandings

Processing and agreeing on feedback

Challenges

Our Session Today

Simple exerciseswith some homework

UX doesn’t stopit isn’t a phase

Personas Storyboards

User Testing Prototyping

Personas

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

Focus on the specific somebody, not the generic anybody

Persona Benefits

Share user-centered knowledge with the entire team

Persona Benefits

Similar to a brand style guide or content requirements

Persona Benefits

Common Ground

Persona Benefits

“What does a persona look like?”

Persona Benefits

Persona Benefits

Design Persona

Marketing Persona

Proto Persona

Types of Personas

a specific personrepresentative of larger groups

Creating a Persona

based on researchdata, interviews, analytics, etc

Creating a Persona

current realitynot the future

Creating a Persona

challengingvaried skills and interest levels

Creating a Persona

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

Creating a Persona

“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

“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

Examplesof personas in action

Persona Benefits

Persona Benefits

Persona Benefits

Persona Benefits

Persona Benefits

Persona Benefits

Homework

HomeworkCreate three personas

HomeworkCreate three personas

Bonus: pain points

Storyboarding

A storyboard is the planning of a sequence of events

covers a complete event

A good storyboard

is flexible

A good storyboard

is assignable

A good storyboard

A user visits

airbnb

A user visits

airbnb

User searches

for property

A user visits

airbnb

User searches

for property

User books

property

A user visits

airbnb

User searches

for property

User books

property

User & host

receive email

A user visits

airbnb

User books

property

User & host

receive email

User searches

for property

Visual Storyboard Examples

Improve Company Focus

User learns about

The Zebra

User learns about

The Zebra

User Visits

The Zebra

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User learns about

The Zebra

User Visits

The Zebra

User enters vehicle details

Receives quotes & selects a carrier

User contacts an agent

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

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!

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!

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!

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!

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!

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!

Open the app

Open the app

Select the flight

Open the app

Select the flight

Check In

Open the app

Select the flight

Check In

Open the app

Select the flight

Retrieve the

code

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Open the app

Select the flight

Retrieve the

code

Go back to main screen

Select “Check In”

Manually enter the

code

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

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”

Open the app

Select the flight

Check In

Homework

HomeworkStoryboard your product value

HomeworkStoryboard your product value

Bonus: storyboard a pain point

User Testing

user testing is the process of watching people use your product

User Testing Benefits

Always surprising

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

@DesignUXUI

User Testing Benefits

Huge returns

User Testing Benefits

Before, during & afterit isn’t a phase

Types of User Testing

remote

focus group

beta testing

user interviews

“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

research your target audience

User Testing Do’s

give general directionnot turn-by-turn navigation

User Testing Do’s

document everythingaction items aplenty!

User Testing Do’s

test at all stagessometimes fidelity isn’t important

User Testing Do’s

only testing internallywith like-minded folks

User Testing Don’ts

relying on emulatorsa screen in a screen

User Testing Don’ts

User Testing Don’t Tell Anyone’s

drunk user testingwith friends and family

User Testing Don’t Tell Anyone’s

squint testingwith our without bad eyesight

User Testing Don’t Tell Anyone’s

translate testingit’s all Greek to me

User Testing Don’t Tell Anyone’s

5 day research sprintscultivating

Time to marketfor useful, usable features

“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

18% drop overnight

Homework

HomeworkConduct a remote user test

HomeworkConduct a remote user test

Bonus: host an IRL focus group

Prototyping

the design processa simulation of the final product

test before code

Why Prototype?

test before design

Why Prototype?

common ground

Why Prototype?

use paper, wireframes, or whatever

On Fidelity

make it interactive

On Fidelity

On Fidelity

share it with everyone(that can handle it)

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

Clark Valberg

Prototyping Tips

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

Prototyping Tips

keep a wide focusstuck somewhere? move on!

Prototyping Tips

use Symbols and Smart Objectsduplicate work is the worrrrst

Prototyping Tips

use “real” assetsstock is fine!

Prototyping Tips

prototype on real deviceslive in the real world

Homework

HomeworkStart from scratch, find “good enough”

HomeworkStart from scratch, find “good enough”

Bonus: m

@clarklab#InVisionWebinar