Fun on First Click - Workshop Slides - Sebastian Deterding

fun on first clickconvert visitors into passionate (paying) customers with onboardingSebastian Deterding (@dingstweets)UXI StudioDecember 16, 2014

a story

briefing»Design a smart phone

for elderly«

your ideas?

»silver phones«

people hate them

people want features

this is not the problem

this is.

and a solution

why care?

PAYING CUSTOMER(product)

AD IMPRESSION(marketing)

...

...

THEN AMIRACLEOCCURS

a long way to go

a long way to go

Paying user

Invitation

a long way to go

Paying user

Invitation

Marketing

a long way to go

Paying user

Invitation

Product

a long way to go

Paying user

Invitation

???

a long way to go

First impressionOrientation

Registration

Paying user

Invitation

OnboardingRe-engagement

Purchase

First use

a long way to go


Registration

Paying user

Invitation


Purchase

aka»onboarding«

First use

First contactOrientation

Registration

Paying user

InvitationEngagement

Re-engagementPurchaseFirst

use

akaconversion

funnel

a long way to go

but the big ones don’t do it?!?

josh elman, ex product lead growth @twitter

»Most people have heard of Twitter, so we get the luxury of having a blank home page that just says ‘sign up’ — I actually don’t encourage this for most sites early in their stages, because most people who come to your sites have no frickin’ clue, and they’re not just gonna sign up without some rationale. Just be careful not to copy the people who are much, much larger.«

three growth hacks (2013)

and actually, they do

Games!Games?

freemium business model ...

+ thousands of free competitors =

fun on first* click

fun on first* click

* or third – we’re not that picky :-)

Marc Pincus

»We believe in those first three clicks, you decide whether or not you want to check out more of it. In the uber-casual place that we all exist in now, it’s a three click deal. We either sold you or we didn’t.«

ceo, zynga (2011)

https://gigaom.com/2011/10/11/zynga-three-click-rule/



what aboutmobile?

same goals & info, different canvas

landing Plus app store page

Our Journey today

Paying user

Invitation

coffee10:40-11:10

lunch12:20-13:20

16:30


Registration

Onboarding

Re-engagementPurchase

First use

coffee14:45-15:15

end

our mountain and map

Work on your own site/app, work on gett if you

don’t have one

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

goal:tell me»why«

Pop Quiz!

The product is awesome!

The company is awesome!

The experience is awesome!

A B C

Pop Quiz!

I am awesome!D

Better X

Better X

Better user of X*

how to identify»why«?

<1/2>jobs to be done

Theodore levitt

»People don’t want to buy a quarter inch drill. They want a quarter inch hole.«

qtd. in what customers want (2006)http://hbswk.hbs.edu/item/5170.html

http://hbswk.hbs.edu/item/5170.html

http://hbswk.hbs.edu/item/5170.html

clayton christensen

»People don’t go round looking for products to buy. Instead, they take life as it comes and when they encounter a problem, they look for a solution – and at that point, they’ll hire a product or service. It it is the job, and not the customer or the product, that should be the fundamental unit of analysis.«

breaking news (2012)

job 1On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored.


competitionDonutsBagels

Bananas


competitionDonutsBagels

Bananas

improvementsThinner straw, thicker shake

Self-service kioskSurprising fruit pieces

job 2In the supermarket, let me give my kid an innocuous treat so I can not feel guilty

about always saying no.

competitionSundaesCookies

Toys

improvementsThicker strawsSmaller cups

In ___________________________

I want to _____________________

so I can ______________________.

outcome (action + object + quality)

situation

motive

In ___________________________

I want to _____________________

so I can ______________________.

outcome

situation

motive

my morning commute

keep me busy without making stains

objectaction quality

not feel bored

In ___________________________

I want to _____________________

so I can ______________________.

outcome

situation

motive

my small business every three months

file VAT reports as fast as possible without missing savings

can get back to what I’m good at and enjoy

Motive

Outcome

Visual

Outcome

Motive

Visual

<2/2>top tasks &care words

top tasks & care words

users have a few »top tasks« ...

enabled by specific features ...

… expressed in specific words

“Does it come with a cartridge included?”

so how do wefind those?

The limits of self-report

We can report recent experiences, general beliefs, attitudes, values

We fail at detailed memory, future action, irrelevant things, unconscious processes

Stick to actual, recent experiences

Ask for experienced thoughts, emotions & from there to connected attitudes, needs

who just switched to your product?

Laddering

Why?

Why?

Why?

Why?

Why?

Ladderinghttp://madpow.com/Insights/WhitePapers/Laddering--A-Research-Interview-Technique.aspx

http://madpow.com/Insights/WhitePapers/Laddering--A-Research-Interview-Technique.aspx

http://madpow.com/Insights/WhitePapers/Laddering--A-Research-Interview-Technique.aspx

p. 1: interview users1. Form teams of two or more who work on Gett or your own example2. In your team, find the person who has most recently signed up for or switched to it – the interviewee. The others are interviewers.3. The interviewers ask the interviewee and make notes on answers:• Remember the situation when you were signing up/switching to X. Can you describe the situation?• What went through your mind when you considered signing up/switching?• Do you remember anything in specific where you thought “great – just what I’ve been looking for”? Anything you remember you

looked for but didn’t find?• What held you back from signing up/switching? (Follow up with 5 Whys.)• What made you sign up/switch in the end?• When and where did you last use X (context)? Can you describe the situation?• Why did you use it (motive)? (Follow up with 5 Whys.)• How did you determine that X succeeded/failed to satisfy that goal (outcome)?• Is there something that specifically pleases you when you use X – that makes not want to switch?• Is there something that annoys you when you use X – that makes you want to switch?

p. 2: find job stories & care words1. Translate your interview notes in one or more job stories, ideally in the words of the interviewee. Note care words for each job story that stood out to you, e.g. “all cinemas in town”, “no pickup of tickets necessary”.Template: In situation I want to outcome (= action + target object + outcome quality) so I can motive.Example: On the go, I want to get movie tickets instantly from all theaters so I can spontaneously go out at night. Care words: all theatres, no pickup lines

Write stories down here

p. 2: identify main job story1. Together, decide what the main job story is, and note it down. If you have several job stories and no clear main one, you may have to create a new “meta” job story that holds all others together – e.g. “On the go, I want to get every movie ticket instantly so I can go out spontaneously without standing in line” instead of “On the go, I want to find tickets ...”, “… purchase tickets”, “… print tickets”, etc.2. Note what features of your app support the job story, e.g. “mobile search of global cinema showings database”

Write story down here

1. Use the main job story elements to fill in the claim and blurb of your head visual:Your claim mirrors the motive, e.g. “Last Minute Movie Night – Without the Lines”Your blurb states your situation and outcome, and how your features support it, e.g. “Find and buy tickets for all movies in town with the world’s largest movie platform. Walk right through with mobile ticket – no ticket pickup lines”2. Insert claim and blurb into your landing page on p. 33. Together, determine an image that best shows the main job story, and sketch it in the key visual

p. 2-5: design claim and blurb

Insert claim here Insert blurb hereSketch an image that shows

how your app gets the job done

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

Goal:show me »how«

xunzi

»I hear and I forget; I see and I remember; I do and I understand.«

confucian philosopher (312-230 bc)

pattern

#1

do > show > tell

do > show > tell

text

image/gif/video

trial run

callouts

= investment before commitment

always be closing

pattern

#2

multi-screen: at each screen

single-screen: persistent head

single screen: repeated throughout

show there’s more

pattern

#3

<1/3>key jobs/tasks

Claim = motiveBlurb = how features

produce outcome in context

visual shows how

Claim + blurb for job/task 2

visual shows how

visual shows how

Claim + blurb for job/task 1

Claim/blurb/visualfor each job/task

Main job claim/blurb/visual

Claim + blurb for job

visual shows how


visual shows how

Claim/blurb/visualchunks for each job


visual shows how

on mobile?

on mobile?


visual shows how

Screens = jobs/tasks

on mobile?


visual shows how

complex: multiple jobs

simple: multiple tasks

p. 7-10: find jobs/tasks1. If you have a complex service, what are the 3-4 jobs it supports? Write those down as job/task 1, 2, 3, 4. If you have a simple service, translate the tasks into jobs/tasks 1, 2, 3, 4.2. For each job/task, write down the tasks/interactions it takes to get it done.3. For each job/task, write down care words you found in the interview.4. Note which features of X support each job/task

Make these entries for each job/task

Then, fill in these for each job/task

<2/3>Proof: back up

your claims

Show me the data

“live” data = alive product

known, trusted brands

reviews and scores

trust indicators

p. 7-10: come up with proof1. For each job/task, note 1 proof to back up your claim that X gets it done:- (Live) data: a meaningful number that relates to the job/task- Trust indicators for sensitive personal data: VeriSign, TrustE logos, contact details/phone number, statements about encryption, data use, etc.- reviews & awards- Trusted brands using your app/service- Tech specs that users care about for this job- Feature comparison with competitors

Note: Some proof (like awards) speaks to the total app/service, not just one specific job/task– that’s okay.

Fill in here

<3/3>Testimonials

= stories with faces behind them

elance

invision

Basecamp ultra Deluxe Version

Anatomy of a Testimonial


a real face and name (no stock photo!)Trustworthy: someone like you, someone you know and aspire to, someone with the same job to be done as you and expertise


a title and known branwdInformational and trustworthy: Qualifies the expertise of the person (for those who don’t know/recognize her)


a real-life storyConvincing, memorable: Real-life events with concrete detail that show how X gets the job done and what that means to the person (this one does the latter, not the former)


a real-life storyThis one does a better job: concrete detail plus valued outcome of that. (Also note the neat use of the brand logo)


Testimonial includes specific detail data to back it up, does neat highlighting - and follows up with a video: wow.

can’t see the trees for the wood

spread faces/testimonialsLead your eye through thescreen, stand out individually

p. 7-10: write testimonials1. For each job/task, think: Who would your users know and trust about judging the job to be done? Who would they aspire to be? Note their name, title, and organization/brand under “Testimonial”.2. Underneath, write in everyday language a story (concrete, everyday detail) how they got that job/task done with your app, and what that means to them

Fill in here

sketching time!

p. 11 fill landing page w/ jobs1. Order your 3-4 jobs/tasks chronologically. In this order, turn each main job/task info (p. 8-10) into one landing page block (p. 4-6) Write the MOTIVE (“so I can ___”) as claim here.

Write CONTEXT and OUTCOME with FEATURES and CARE WORDS here

Write TESTIMONIAL here

Sketch screen INTERACTION/TASK that shows how your app/service gets this job/task done

Write/sketch one PROOF here – ideally directly related to this specific job/task

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

Goal:let me in

Minimize effort

pattern

#1

use web form design best practices

pattern

#2

Smart defaults

Auto-suggestContextual hints

Forgiving input

etc. etc.

use identity from other services*

pattern

#3

use identity from other services*

pattern

#3

* with caution

• You need a user ID with lots of info they already have (e.g, age & location)

• Your target audience uses the social service in question (facebook, twitter)

• Using their social graph populates your service with valuable contacts, info

• You don’t mind being subject to their data policy changes

when to offer a social sign-up

lazy Registration: how late can you be?

pattern

#4

Don’t break flow, don’t break media

pattern

#5

remember abandoned sessions

investment & value before commitment

pattern

#6

• Prevent costly illegal actions: fraud, libel, exposure of minors• move to the last possible step

• Populate with valuable info• Social sign-up; informed guesses; capture input along the way

with clear, immediate input-valued output link

• Use contact details for re-engagement• after user invested: reengagement must offer genuine value

why require registration at all?

First contact / Orientation Registration

First use Onboarding

Landing Page* Scroll down* Click “Learn more”

about page* Scroll down* Click “Register”

registration page* Input user name* Input email* Input password* Click “Register”

e-mail inbox* Open e-mail client* Open confirmation e-mail* Click confirmation link

confirmation page* See confirmation message* Click “to user account”

user account page* Fill in address* Fill in first name* fill in last name* Click “submit”

dashboard page* Fill keywords in search window* Click “submit”

before

First contact / Orientation Registration

First use Onboarding

Landing Page* Scroll down* Click “Learn more”* add registration:- Input email, password- Facebook signup

about page* Scroll down* Click “Register”* add registration:- Input email, password- Facebook signup

e-mail inbox* Open e-mail client* Open confirmation e-mail* Click confirmation link

confirmation page* See confirmation message* Click “to user account”

user account page* Fill in address* Fill in first name* fill in last name* Click “submit”

dashboard page* Fill keywords in search window* Click “submit”* add link “confirm email”

AFTER

password hint on click:“must have at least eight characters”

registration page* Input user name* Input email* Input password* Click “Register”

gett: disregard the tutorial screens :)

Don’t map these: we know they’re terrible :)

p. 12: map the flowMap the journey from first contact (landing page) to first use, e.g.1. Make a post-it for each screen and write a title on top. Place the post-it on the onboarding map (e.g., landing page goes into first contact).2. On each screen post-it, bullet list all interactions and inputs the user has to make to get to the next screen

Find instructions here

p. 12: reduce the friction1. For each screen and interaction, ask:can you delete it? Strike it throughcan you merge it with a prior/later step to reduce clicks/screens? Move/strike the post-it and add the interactions to the prior/later stepcan you replace it with something that takes less effort? Add the new, strike the old throughcan you defer it after first use? Move/add it there.2. Go through the checklist on p. 12 and correct whatever is missing

Find instructions here

p. 13: scribble the new flow1. Quickly scribble the new, reduced and reordered screen flow from first contact to first use2. Remember “Always Be Closing”: Each screen should allow the user to register if convinced, each screen should allow to learn more if not convinced yet.

Scribble on this page.Each box is one screen

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

goal:make me »wow«

patrick mckenzie

»I can tell you with a fair degree of certainty that no matter how great your product is, it is very likely that 40-60% of your free trial users never see the product a second time. Which makes that first use of the software really really freaking important.«

selling more software (2012)

minimize time to wow

pattern

#1

old tumblr

new tumblr

(The new new onboarding

moves this step even further

down)

p. 14: make a wow flow1. Pick the main job/task (2.1) the user wants to get done. Write down an immediate, real outcome of it your users would value.2. Can you can that it a safe “test drive” without consequence/cost?3. Write the minimum set of interactions imaginable to arrive at that outcome4. For each interaction, check whether you pre-populate with a smart default, auto-suggestion, or sample content

Write outcome here

Write steps here

Write pre-populated info here

p. 15: scribble a wow flow1. Scribble the resulting first use screen flow2. If you haven’t already, consider: Can you move this first use before registration in your screen flow map? If so, move it

Scribble on this page

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

Goal:teach me »how«

the onboarding Anti-pattern

in contemporary fashion

an example

so what did we see here?

context of learning = context of use

principle

#1

do > show > tell

principle

#2

do > show > tell

textbook

online video

game

principle

#2

tell: walls of text

show: decontextualized screens

whole, real-world problems with a story

principle

#3

• Convey personal relevance• Give meaning, emotion, urgency• Give coherency• Ease memorization

whole, real-world problems with a story

minimize »Time to wow«

principle

#4

scaffolded learning

principle

#5

what are your loops?

get money

buy fish feed fish

sell fish

scaffold loops

Skill

Time

sawblade curve learning

principle

#6

the traditional model ...

… and its problem

the games model …

… and its effect

don’t enforce/lose tutorials

principle

#7

no screenshots of despair

principle

#8

http://screenshotsofdespair.tumblr.com

http://screenshotsofdespair.tumblr.com/page/2

http://screenshotsofdespair.tumblr.com/page/2

Nothing grows here.

No friend here.

No friend here.

No friend here.

No friend here.

No friend here.

No friend here.

3+1 basic formsof onboarding

contextual hints (»coachmarks«)

form

#1

don’t stand in the way!

guided first run

form

#2

guided apprenticeship

form

#3

content as tutorial

form

#4

do you even need onboarding?

No onboardingGoogle Search

Yahoo! Weather

no

velt

y o

f in

tera

ctio

ns

number and complexity of interactions

Guided first runMailbox

Google Inbox

Guided apprenticeshipMS ExcelEvernote

Contextual hintsHipmunkAirBnB

p. 16: determine onboarding form

1. On your key jobs/tasks (p 8-10) underline tasks that are so novel and circle tasks that are so complex that users need help2. Decide on an onboarding model:• no novel, no/few complex interactions: no

onboarding• a few novel interactions: a guided first run• no novel, many complex interactions:

contextual hints• a few novel and many complex interactions:

guided first run plus contextual hints• many novel and many complex interactions: a

guided apprenticeshipUnderline and circle the tasks/

interactions in these boxes

p. 17-19: design onboardingcontextual hints1. List the interactions that need hints2. Determine when & in which order they’re shown3. Sketch a sample contextual hint displayguided first runs/apprenticeship1. List interactions in self-sustained bundles with a valued outcome. (they likely match the main jobs/tasks)2. Arrange bundles in logical order from (a) most to least frequently used and (b) requiring input/knowledge of previous bundles3. Determine how, when, where to display the guided run/apprenticeship4. Sketch a sample screen flow for the first run/one task of the apprenticeship

List interaction here

Sketch hintdisplay here

List bundles here

Sketch screenflow here

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

Goal:make me return

system push notifications

new offers

new/unused features

personal statisticssocial statistics/information

personalized information

anatomy of a push notification

1. Personally valued information:A reason to open & not consider as spam

2. One main call to action:A mutually useful, easy way to react

3. A valued outcome:A reason to follow the call to action

4. An appropriate channel:The right moment & place to listen & react

(+ Social proof from others you knownever hurt anyone)

p. 20: design push notifications1. Think through events that may trigger a push notification:• changes in time, e.g. trial period expires• changes in space, e.g. user is at location with special info/offers close by• changes in product, e.g. you’ve added a new feature• changes in user, e.g. user installed a new app that integrates with yours2. For each event, go through these questions:• valued information: can you tell the user something s/he cares about at this event, e.g. “there’s a

special offer close by”?• call to action: can you suggest one clear action in response, e.g. “take offer now”?• valued outcome: does the action produce an outcome the user cares about? Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question. Try to find at least 3 entries.

Fill in these

Event

social push notifications

p. 21: design social notifications1. Think through user actions that may trigger a push notification to another user 2. For each user action, go through these questions:• valued information: can you tell the other user something s/he cares about at this

event, e.g. “your friend just started a project”?• call to action: can you suggest one clear action, e.g. “support his project”?• valued outcome: does the action produce a valued outcome, e.g. helping a friend? • channel: with what channel and time can the user act on that information + call to

action, e.g. mobile push notification, e-mail, facebook notification, …?Add an entry for a notification, with event, information, action, outcome only when you have a clear positive answer to each question.

Fill in these

works best in viral loops ...

action call to action

call to action action

FarmVille Gifting

Foursquare Mayorships

Yelp! compliments

goal/ctaFollow user

goal/ctaGive thanks

motivationFeeling helped

feedbackGet answers

actionWrite question

goal/ctaAnswer question

motivationCompetence

feedbackGet thanks

actionWrite answer

goal/ctaFollow user

goal/ctaAnswer question

motivationRecognition

feedbackContent, backfollow

actionFollow user

p. 22: design social loops1. Think through user actions that may trigger a Call to Action to another user, whose response will trigger a Call to Action to the first user 2. For each of the two user actions, go through these questions:• valued information: is there something the other user cares about you can tell him at this event, e.g. “your

friend just started a project”?• call to action: is there one clear action you can suggest the user takes in response, e.g. “support his project”?

Fill in these

• valued outcome: does the action produce an outcome the user cares about, e.g. helping a friend?

• action: does the resulting action trigger a notification encouraging the first user to take the action that triggered this response?

Note at least 3 social loops down.

Our Journey today


Registration

Paying user

Invitation


Purchase

First use

Goal:convert me

Our Journey todayFind the opportune moments

Find the opportune moments

make the value immediately clear** e.g. with a test drive

or samplecontent:

1. For each offer, note the opportune moments when and where in your interface the user is motivated to buy it because its value is immediately clear and in need2. Note what call to action to offer at that point, e.g. user clicks ADD MEMBER: “Your plan only supports 5 users. UPGRADE just 15 NIS/month”

p. 23: purchase paths

Write opportune moments & calls to action here

make their choice easy

pattern

#3

leave nothing unclear

reduce choice

Use ordering

do their math

Choose your subscription

Economist.com subscription: $59,00One-year subscription to Economist.comIncludes online access to all articles of The Economist since 1997

Print and web subscription: $125,00One-year subscription to the print edition of The Economist and online access to all articles of The Economist since 1997

use anchoring




68%

use anchoring




68%

32%

use anchoring




Print subscription: $125,00One-year subscription to the print edition of The Economist





0%





16%

0%





16%

0%

84%

1. Scribble the screen with all possible purchases (if you offer a fixed menu of plans) or the most frequent micro-purchase (if you do multiple in-app purchases).Remember to: make a clear offer; let users test drive or preview the outcome if possible; anchor with different options; reduce choice; use defaults, order and highlighting to make one preferred option stand out if possible

p. 23: purchase screen

Scribble here

[email protected]

@dingstweets

codingconduct.cc

Thank you.

mailto:[email protected]

mailto:[email protected]

mailto:[email protected]?subject=Slideshow%20%22Meaningful%20Play%22

mailto:[email protected]?subject=Slideshow%20%22Meaningful%20Play%22

http://www.twitter.com/dingstweets




http://codingconduct.cc




more onboarding ...http://j.mp/cconboarding

Fun on First Click - Workshop Slides - Sebastian Deterding

Design

Transcript of Fun on First Click - Workshop Slides - Sebastian Deterding