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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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
First impressionOrientation
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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!
The product is awesome!
The company is awesome!
The experience is awesome!
A B C
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 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
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.
job 1On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored.
competitionDonutsBagels
Bananas
job 1On my morning commute, I want to keep myself busy and fed without making stains so I don’t feel bored.
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
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. 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: 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
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
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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
tell
tell
show
callouts
do
do
= investment before commitment
always be closing
pattern
#2
multi-screen: at each screen
multi-screen: at each screen
multi-screen: at each screen
single-screen: persistent head
single-screen: persistent head
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
Claim + blurb for job
visual shows how
Claim/blurb/visualchunks for each job
Claim + blurb for job
visual shows how
Claim + blurb for job
visual shows how
on mobile?
on mobile?
Claim + blurb for job
visual shows how
Screens = jobs/tasks
on mobile?
Claim + blurb for job
visual shows how
complex: multiple jobs
simple: multiple tasks
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
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
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
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
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
Anatomy of a Testimonial
a title and known branwdInformational and trustworthy: Qualifies the expertise of the person (for those who don’t know/recognize her)
Anatomy of a Testimonial
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)
Anatomy of a Testimonial
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)
Anatomy of a Testimonial
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
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
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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
lazy Registration: how late can you be?
pattern
#4
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: 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. 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
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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. 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
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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
do
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
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
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. 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
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
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
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
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
hi
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.
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
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Our Journey today
First impressionOrientation
Registration
Paying user
Invitation
OnboardingRe-engagement
Purchase
First use
Goal:convert me
Our Journey todayFind the opportune moments
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
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
do their math
do their math
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
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
68%
use anchoring
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
68%
32%
use anchoring
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
Print subscription: $125,00One-year subscription to the print edition of The Economist
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
Print subscription: $125,00One-year subscription to the print edition of The Economist
0%
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
Print subscription: $125,00One-year subscription to the print edition of The Economist
16%
0%
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
Print subscription: $125,00One-year subscription to the print edition of The Economist
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
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
@dingstweets
codingconduct.cc
Thank you.
more onboarding ...http://j.mp/cconboarding
Top Related