ux leadership: helping teams design onboarding experience using 3 frameworks

1 Intuit Confidential and Proprietary

Three Frameworks for Designing Onboarding ExperiencesKylie Tuosto Stephen Gay

#focusonfirstuse @uxstrat @kylietuosto@stephengay

Meet & greet, hopes & fears

Our Story

Framework 1: Mapping the Journey

Framework 2: Measuring the Benefit

Framework 3: Investing in Change

Wrap Up

Today’s Agenda

Hello!

Kylie Tuosto

@kylietuosto

Group Manager First Time Use

Stephen Gay

@stephengay

Global Design Director

Our Story

Introduce Our Products

QuickBooks

Self-Employed

QuickBooks

Accountants

QuickBooks

Payroll

QuickBooks

Payments

How does your organization focus on delivering great

products?

How we design

DELIVER THE

CUSTOMER

BENEFIT

DELIVER WITH

DELIVER

POSITIVE EMOTION

THIS IS

AWESOME

How we measure design

INTUIT APEX PYRAMID

LIKE MASLOW’S NEEDS, WE NEED TO DELIVER ALL THREE TO SUCCEEED.

Benefit

Emotion

DELIGHT

COMPANY

GROWTH

Why we deliver

How we organize our teams

VP Design

Director

Small Business

Director

Self Employed

Director

Accountants

Director

Developers

Accounting

Payroll

Payments

Inventory

Our QuickBooks First Use Journey

Dec 2015

LAUNCHED TEST FOCUSED ON

INCREASING ENGAGEMENT

WITH TASKS

LAUNCHED TEST FOCUSED ON

INCREASING ENGAGEMENT

WITH KEY JOBS

DEVELOPED AND TESTED A

SERIES OF FIRST USE

PATTERNS TO IMPROVE THE

CUSTOMER EXPERIENCE

Jan 2016 Mar 2016Jun 2015

TASKED WITH IMPROVING THE

QUICKBOOKS ECOSYSTEM

FIRST TIME USE EXPERIENCE

Jul 2015

CRAFTED A VISION OF A

COMPLETELY REIMAGINED

PERSONALIZED QUICKBOOKS

Where We Started

Searching our directory of 12,345

photographers like you…

Customizing QuickBooks

navigation just for you…Customizing setup tasks…

How we presented the vision

Task-Focused Experiment

Accounting Borrow Money Pay Bills Track Time

Pay Employees Manage Inventory Expense Tracking Sell Products

Job-Focused Email Experiment

Definitions

BENEFIT

EXAMPLE: PAYROLL IS DONE

What the user achieves when they complete one or more jobs

A market-ready solution for one or more jobs

OFFERING

EXAMPLE: PAYING EMPLOYEES + PAYROLL TAXES = PAYROLL OFFERING

A core function the user wants to complete, made up of several tasks

EXAMPLE: PAYING EMPLOYEES

One of several steps a user needs to take to accomplish a job

EXAMPLE: ADDING A NEW PAY TYPE

People don’t want a

quarter-inch drill, they

want a quarter-inch hole.

– Theodore Levitt

Economist & Harvard Business School Professor

People buy products and services to get

jobs done. Products come and go, but

underlying jobs do not go away. Our goal is

to solve the job well.

Apps we love solve jobs that matter to us

Focus on Jobs

Accounting Connect your bank

Download transactions

Categorize transactions

Add memos

Add receipt photos

Add vendor

Add customer

Tag transactions for insights

Reconcile monthly

Run reports

Breaking Jobs Into Tasks

THE JOB THE TASKS

First Use Patterns

Jobs Hierarchy

Benefit

Task 1 Task 2

ACHIEVE BENEFIT

DISCOVER

UNDERSTAND

SEAL THE DEAL

Task 1 Task 2

PATTERNS

_ Zero state page

_ Guidance tip

_ Before task modal

_ Learn page

_ Help topics

_ Video pattern

_ Step-flow

_ Zero state page

_ Dashboard cards

_ Guided flow

_ Task list

_ Confirmation

_ Help-me-choose tool

_ Plan comparison

_ Competitor comparison

PHASES

Three Frameworks

Onboarding

JourneyShift your organization’s

mindset around first use.

Focus on the

BenefitChange how you measure

results.

Learning

FrameworkInvest in the most

impactful change.

How does your organization currently think about first

Framework 1

Onboarding JourneyShift your organization’s mindset

around first use. It’s a journey, not a

one-time thing.

Exercise 3

Delivering

Delight

Shifting the mindset

It’s a mindset.

It’s integral.

It evolves over time.

Solving for simplicity.

20+ patterns across onboarding journey.

It’s a team.

It’s additive.

It happens just once.

Solving only for speed.

One pattern for guidance.

From narrowly defined. To end-to-end and holistic.

Onboarding Journey

DISCOVER

Exposing the user to a tailored, recommended

solution based on what we know about them.

Guiding the user through entering data, configuring

settings, or customizing a feature.

ACHIEVE BENEFIT

Ensuring the user feels the value of the benefit

by experiencing it for the first time.

SEAL THE DEAL

Helping the user choose a plan based

on what we know about them.

UNDERSTAND

Helping the user understand what’s at stake, why

it’s relevant, and what the benefits are.

Onboarding Journey

SETUP ACHIEVE BENEFITDISCOVER UNDERSTAND SEAL THE DEAL

BEHAVIOR MECHANICS

_ Social Proof

_ Curiosity

_ Exclusivity

_Loss Aversion

USER DATA

_ Profile demographics

_ Usage data

_ Status

VISUALIZE THE VALUE

_ Sneak peek of features

CONSIDER

_ What’s at stake?

_ Design for the “aha!”

_ What’s the unique value

proposition?

_ How much will it cost?

CONSIDER

_ Not asking for info you

don’t need

_ Teaching through the

process of doing

_ Ask simple questions

_ Demonstrate progress

_ Establish trust

_ Eliminate steps

CONSIDER

_ Make it an own-able

moment

_Celebrate success

_ Clarify next steps

_Encourage repeat use

and habit forming

CONSIDER

_ Will the solution benefit

_ Allowing the user to try

before buying

_ Clear pricing

communication

_ Price should feel better

than the competition

JOB Get a rideBENEFITFirst Use Journey

Arrive at destination

TASKS TASKS TASKS TASKS TASKS

Hear about it from a friend

Search for it in app store

Download the app

Open the app

Create an account

Enable Geo-location

Add credit card

Open the app

Enter destination

Select type of ride

Wait for driver

Get stuff loaded into car

Take the ride

Get out of the car

Money leaves bank

Rate the driver

Learn about what it does

Who are the drivers?

How much does a ride

How long does it take?

Guarantees?

How do I get a ride?

JOB Pay employeesBENEFITFirst Use Journey

Accounting is done

Get recommendation in

QuickBooks

Learn about what it does

How does this compare to

How much does it cost?

How do taxes work?

Which plan is right for me?

Add business info

Set up bank account

Create employee profile

Employee submits I-9, W-

File new hire paperwork

Log in to time tracker

Review and approve hours

Enter employee time

Submit payroll

Understand the cost

Add employee pay info Wait for bank transfer

Get confirmation that they

were paid

Calculate per employee

Select service level

Select add-on services

Enter credit card info

Receive bill

What about worker’s

comp? Labor laws?

What pay types are

available? Deductions?

JOBBENEFITFirst Use Journey

Onboarding

• Align on terminology for each phase of your users’ journey

• Understand the purpose of each phase and what you’re trying

to solve for

• Outline the user tasks involved in accomplishing each phase

Onboarding

• Align on terminology for each

phase of your users’ journey

• Understand the purpose of

each phase and what you’re

trying to solve for

• Outline the user tasks involved

in accomplishing each phase

Focus on the

results.

Learning

impactful change.

How do we measure our teams’ success?

Framework 2

Measuring the benefitEnsure the team is working on and

measuring the most important tasks for

the customer.

Exercise 3

Delivering

Delight

Job: Online Shopping

Customer Benefit: Best selection, fast & affordable

Measure: % lowest priced products, delivery time

Job: Managing Notes

Customer Benefit: Always accessible

Measure: Uptime

Job: Driving

Customer Benefit: Lowest price & most convenient

Measure: % rides at lowest price, lowest wait time

Job: Pay Employees

Customer Benefit: Confidence & efficiency

Measure: % paycheck errors, time to run payroll

Measuring the benefit

“That was easy.”

“It took me half the

time it normally

takes!”

“The app connected

directly to my time

tracking tool.”

“I know my

paychecks are

accurate.”

“Everyone got paid

on time.”

Efficiency Confidence

Measuring the payroll benefit

“I know I got my

payroll taxes right.”

From measuring business results (conversion)

Measuring the benefit

Define the best way to

measure the benefit.

Time to complete & time spent waiting

How are we performing today?

What is the mid-term and long term goal?

TARGET

TASK ACTUAL

To measuring customer results (efficiency & confidence)

CYCLE PAIN

Degree of pain

PHASE SetupJOBMeasuring Benefit

CYCLE TARGETTASK ACTUAL PAIN

Get a ride

LIST THE SMALL TASKS THAT LADDER UP TO THE OVERALL

TIME TO COMPLETE TIME SPENT

WAITNG

GOAL TIME LOW, MED, OR HIGH PAIN

Login/create account

Enable geo-location

Add credit card info

60 sec

10 sec

PHASE SetupJOBMeasuring Benefit

Pay employees

WAITNG

Employer adds business info

Employer sets up bank account

Employer creates employee profile

Employee submits I-9, W-4 paperwork

Employer adds employee pay info

30 sec

1-5 days

30 sec

STAGEJOBMeasuring Benefit

WAITNG

• Align cross-functionally on the biggest problems to solve

• Set target metrics that measure the customer benefit (not the

business outcome)

• Focus maniacally on providing that benefit

Focus on the

results.

Onboarding

trying to solve for

Focus on the

results.

• Align cross-functionally on the

biggest problems to solve

• Set target metrics that

measure the customer benefit

(not the business outcome)

• Focus maniacally on providing

that benefit

Learning

impactful change.

How do we determine where to invest?

Framework 3

Learning FrameworkInvest in the most impactful change.

Exercise 3

Delivering

Delight

How do people learn?

90% of usability is habit.

It’s easy to learn if I already know how.

In order to learn, we need to fail.

So make it easy for users to recover.

Learning by doing triggers memory.

That’s what makes concepts stick.

Learning preferences.

Give options, but don’t overwhelm.

BEFORE

MISTAKE DETECTION

GUIDED TRANSACTION CATEGORIZATION

VIDEO CONTENT IN CONTEXT WITH JOBS (UNTIL TOURS ARE BUILT)

Onboarding Patterns

_ Zero state page

_ Guidance tip

_ In-page tip

_ Dashboard card

_ Before task modal

_ After task modal

_ What’s new

_ Task list

_ Email

_ Learn page

_ Help topics

_ Video pattern

_ Step-flow

_ Zero state page

_ Dashboard cards

_ Task list

_ Guided flow

_ Task list

_ Confirmation

_ Smart card

_ After task modal

_ Help-me-choose tool

_ Plan comparison

_ Competitor comparison

Patterns designed to facilitate learning along the way.

Pattern Map

Show how patterns work together to guide new users.

Empty State

Categorize Experience

GUIDED WORKFLOWONGOING USE GUIDED TOUR

Designed for speed and efficiency

Relies on existing knowledge

Progress demonstrated through numbers

decreasing

Users were lost at first glance

No development cost

Designed for learning a new interface

Relies on reading & illustration

Progress demonstrated through animated

illustrations

10% more transactions categorized

2 mo. development costs

Designed for learning a new concept

Guides user through the workflow

Progress demonstrated through numbers

decreasing & data visualization filling

Results TBD

4 mo. development costs

Learning Framework

DISCOVER

REPEAT

Learn a new concept & interface

Learn a new interface

UNDERSTAND SETUP ACHIEVE BENEFIT SEAL THE DEAL

Learn a new concept

Determine Investment

DISCOVER REPEAT USEUNDERSTAND SETUP ACHIEVE BENEFIT SEAL THE DEAL

100 +25

Determine Investment

DISCOVER REPEAT USEUNDERSTAND SETUP ACHIEVE BENEFIT SEAL THE DEAL

100 +25

• Design and organize your onboarding patterns

• Choose the job and phase that’s causing the most user pain

• Determine how to invest in the right onboarding solution

across your priorities.

Learning

impactful change.

Onboarding

trying to solve for

Focus on the

results.

• Align cross-functionally on the

biggest problems to solve

• Set target metrics that

measure the customer benefit

(not the business outcome)

• Focus maniacally on providing

that benefit

Learning

impactful change.

• Design and organize your

onboarding patterns

• Choose the job and phase

that’s causing the most user

• Determine how to invest in the

right onboarding solution

across your priorities.

Join our LinkedIn Group to get all of the

resources from today’s workshop and

https://www.linkedin.com/groups/7059078

What you’ll find:

● PDF of this workshop

● PDF of each worksheet

● UX Articles on onboarding

● Great discussion!

Resources & Tools

ux leadership: helping teams design onboarding experience using 3 frameworks

Design

twi onboarding

v3 2017 recruitment codetalk - st. joseph...

onboarding remote employees · task of onboarding...

recruiting & onboarding -...

onboarding analytics - metrics that matter onboarding...

virtual onboarding

onboarding program what is onboarding?

pnf pre-onboarding / onboarding & modeling to support 5g …

advisor onboarding

sales onboarding

mobile user onboarding in b2b apps. ux australia 2014 deck

data onboarding

onboarding practices

new employee onboarding onboarding basics · new employee...

the roi of automated employee onboarding...onboarding costs,...

celia hodent, phd....

nfv onboarding automation framework · pdf filea...

canva onboarding

onboarding gifts

whitepaper user experience frameworks - future of optimal...