BUILD WORLD CLASS
USER ONBOARDING
Methods, Tools and Hacks @0zne
Let’s start at
There’s a person that
loves you
the end
How did she/he gets
from:
completely unfamiliar
to intrigued
to exploring
to investing
ultimately satisfaction
That, in a nutshell,
is what user onboarding is
about :)
If your company exists
to change the world
Crappy onboarding means it’s
changing a lot less...
In that way,
And as a business,
humanity is poorer
your company is
literally poorer
“ Excellent onboarding is
absolutely critical to customer
retention ”
Sean Ellis - GrowthHackers.com
+100%+10% +106%+100% +252%
KajabiHubspotAppsumoCustomer.ioGroove
User onboarding impact
Trial to paid conversion rate increase
To solve poor onboarding
Let’s turn the clock all the way back
before a user sign up
and follow the steps ;)
1. Capture users hearts
2. Capture users minds
3. Path the way in signup
4. Align in-app touchpoints
1. Capture users hearts
2. Capture users minds
3. Path the way in signup
4. Align in-app touchpoints
Pre-signup
Signup
Post-signup
Capture Users hearts
1
Value Prop
We are going to nail 4 things
Context
Aha! moment
People
Start with an extremely clear
value proposition
Mailchimp is
doing it right
Value - Context - People - Aha!
Place it directly within the context of a
familiar activity
Value - Context - People - Aha!
app’s place inside the
context of real-world
workflows.
Value - Context - People - Aha!
Focus on making better people
This isn’t what you sell
This is
Potential customer Your product Awesome person
doing rad shit
Value - Context - People - Aha!
A B
Which one do you think is most irresistible?
Value - Context - People - Aha!
B
Which one do you think is most irresistible?
Because it
focuses on
making better
people, not on a
list of features
make people
better at iterating
on designs
Value - Context - People - Aha!
Know what you are making people better at
make people better
at remembering
things
make people
better at
communicating
Value - Context - People - Aha!
Find your “aha! moment”
“oh! I can throw
fireballs by eating
flowers?”
Unlock your aha! moment as fast as possible
“Wait, I can rent
movies without going
to the video store?”
“Hold on, I just drag my
files into this one folder
and they’re automatically
on all my devices?”
“Whoa, I can have super
strong passwords
without having to
remember any of
them?”
Value - Context - People - Aha!
“If your “aha moment” comes
deep inside your product,
you’ve already lost.”
- Samuel Hulick -
User onboarding expert
● 1-3 minute video
● Explain your product value
● Narrative-driven by nature
Alternatively, do an “explainer video”
PROs: You control the story, it goes
through user's ears :)
CONs: Less easy to adapt, expensive
Sandwich Video is killing this game
Robinhood video
generated 1
million signups
before launch!
click to watch video
But
If you can’t sell people on using
your product in person, replacing
yourself with a video isn’t going to
suddenly make things click.
Ultimately don’t blindly follow the lead of the
Twitters, Facebooks, and LinkedIns.
They have the enviable position of
presuming everyone knows what they offer.
We’re ready to stop
talking about the user
and start talking about ourselves
Now we just need to
get sign-off from the
mind.
We’ve already
captured their heart
Capture users minds
2
Think beyond features
Specific ways your
product exceeds all the
other options
How your product is just
as good as all the other
List your product qualities
Quality #1
Quality #2
Quality #3
Security
Speed
Communicate qualities in 4 ways
Testimonials
Approvals Success
Numbers
Testimonials are effective at
establishing trust and credibility
Logo
Face
TitleName
intercom.com
Transparency, confidence, and
generosity can go a long way.
If you were featured, let people know!
If you have the power of numbers, let
prospective users know
Where there’s smoke, there’s fire.lydia.com
Including with social media counters
HTML hit counters
Btw, this is not new ;)
It’s for this same reason that restaurants seat
people at street-facing windows first:
restaurants that appear crowded are probably
crowded for good reason.
Make your user base more successful
Kind of person Slack helps
people become
Very specific and relevant vitality
real-world indicators. Impressive!
slack.com
All that’s left to do is pave that path
so nobody loses their way in your
signup!
We’re well on our way
Path the way in signup
3
Remove frictions that
slow people down
We are going to focus on 2 things
Don’t let users drift away
Remove frictions
that slow
people down
Screw CAPTCHAs unless
you’re absolutely dying from
spam.
Study about CAPTCHAs by
Do you absolutely HAVE to:
● Get their phone number at signup?
● Have them confirm email before using the
app?
If many information needed, consider
breaking down into consumable steps
N26 signup is composed of 15+ steps easy to take.
Don’t let users
drift away
Ever seen a field for a coupon code and opened a
new tab to do a search? That’s your flow being
allowed to drift, and it’s dangerous.
Requiring email address to be
confirmed is a big-time drifter
Allow provisional access until email is
confirmed to keep user in
By now your users should have
taken the first step by signing up.
Let’s align in-app touch points to
set them for success at every turn.
Align in-app touch points
4
First impression - One seat - Cut steps - Tour
4 rules to follow
Make sure this first impression ends with a
cherry on top
First impression - One seat - Cut steps - Tour
To do so provide users a taste of success
Buffer first
experience aligns
with product
essence:
scheduling social
updates.
First impression - One seat - Cut steps - Tour
Vimeo first experience does not expect people to wait
while their first upload takes 40 minutes to process
First impression - One seat - Cut steps - Tour
Make first win achievable from one seat
Let’s see how Google
Doc shrunk a chain of
dependencies down
from 5 to 2.
First impression - One seat - Cut steps - Tour
Cut as many steps as possible
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it
Does your Google Doc
absolutely HAVE to have
a name?
Google just default edit
to “Untitled document”.
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it
First impression - One seat - Cut steps - Tour
Do you absolutely need
to save it?
There’s nothing
happening here that an
autosave couldn’t
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it
First impression - One seat - Cut steps - Tour
Do you absolutely need to
copy the link manually?
In Google Doc the link is
automatically selected
and copied
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it
First impression - One seat - Cut steps - Tour
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it
1. Click create new doc
2. Name the doc
3. Save the doc
4. Copy the embed code
5. Paste it2.
Google shrunk the chain and sacrificed
very little power to create a doc
First impression - One seat - Cut steps - Tour
First impression - One seat - Cut steps - Tour
PRODUCT TOUR
There’s a slim chance a tour will
clear up some confusion
There’s a greater chance it will just
provide an annoying delay
First impression - One seat - Cut steps - Tour
When to build a tour?
First impression - One seat - Cut steps - Tour
Whenever YOU need information that’s
critical and isn’t likely to be changed often
Netflix focus mode”
draws focus away
from the single task
at hand
First impression - One seat - Cut steps - Tour
How to build a tour?
First impression - One seat - Cut steps - Tour
Actively guide the new user through
performing the activity
Rather than describing,
Optimizely gets the
user to actively engage
with it
First impression - One seat - Cut steps - Tour
Or setup quests
First impression - One seat - Cut steps - Tour
Setup quests are the opposite of product tour
as they encourage exploration
Use smart interface
You can see in the
background the cool
place you get to land
as soon as you finish
First impression - One seat - Cut steps - Tour
Or make it publicly accessible
Show what other
customer are seing
once they use the
product
First impression - One seat - Cut steps - Tour
Ultimately
First impression - One sit - Cut steps - Tour
Align it with your activation
Activation
Twitter saw a massive spike
in signup retention once
started encouraging people
to follow instead of search or
tweet.
Everybody knew people they
were interested in ;)
Twitter activation = ~ 30 followers
First impression - One sit - Cut steps - Tour
Align it with your activation
Follow ~ 30 people
Use these tools to measure each steps of
your onboarding satisfaction
Temper.io Gotcha.io Medallia.com
Now measure
Find Onboarding
next pain point
Build the fix
Roll-out
improvements
Repeat.
Congratulations!
Your product made great step toward
great user onboarding!
1. Capture users hearts
2. Capture users minds
3. Path the way in signup
4. Align in-app touchpoints
Remember the process
Great books I used
to write these slides ;)
...and blogs!
thanks to this guy for the design
inspiration
@mxbraud
You can also visit my blog
.com
THANK YOU!
Enzo Avigo
@0zne
enzoavigo@gmail.com
Let’s talk about building great products

Build World Class User Onboarding

  • 1.
    BUILD WORLD CLASS USERONBOARDING Methods, Tools and Hacks @0zne
  • 2.
    Let’s start at There’sa person that loves you the end
  • 3.
    How did she/hegets from:
  • 4.
    completely unfamiliar to intrigued toexploring to investing ultimately satisfaction
  • 5.
    That, in anutshell, is what user onboarding is about :)
  • 6.
    If your companyexists to change the world
  • 7.
    Crappy onboarding meansit’s changing a lot less...
  • 8.
    In that way, Andas a business, humanity is poorer your company is literally poorer
  • 9.
    “ Excellent onboardingis absolutely critical to customer retention ” Sean Ellis - GrowthHackers.com
  • 10.
    +100%+10% +106%+100% +252% KajabiHubspotAppsumoCustomer.ioGroove Useronboarding impact Trial to paid conversion rate increase
  • 11.
    To solve pooronboarding Let’s turn the clock all the way back before a user sign up
  • 12.
  • 13.
    1. Capture usershearts 2. Capture users minds 3. Path the way in signup 4. Align in-app touchpoints
  • 14.
    1. Capture usershearts 2. Capture users minds 3. Path the way in signup 4. Align in-app touchpoints Pre-signup Signup Post-signup
  • 15.
  • 16.
    Value Prop We aregoing to nail 4 things Context Aha! moment People
  • 17.
    Start with anextremely clear value proposition Mailchimp is doing it right Value - Context - People - Aha!
  • 18.
    Place it directlywithin the context of a familiar activity Value - Context - People - Aha! app’s place inside the context of real-world workflows.
  • 19.
    Value - Context- People - Aha! Focus on making better people This isn’t what you sell This is Potential customer Your product Awesome person doing rad shit
  • 20.
    Value - Context- People - Aha! A B Which one do you think is most irresistible?
  • 21.
    Value - Context- People - Aha! B Which one do you think is most irresistible? Because it focuses on making better people, not on a list of features
  • 22.
    make people better atiterating on designs Value - Context - People - Aha! Know what you are making people better at make people better at remembering things make people better at communicating
  • 23.
    Value - Context- People - Aha! Find your “aha! moment” “oh! I can throw fireballs by eating flowers?”
  • 25.
    Unlock your aha!moment as fast as possible “Wait, I can rent movies without going to the video store?” “Hold on, I just drag my files into this one folder and they’re automatically on all my devices?” “Whoa, I can have super strong passwords without having to remember any of them?” Value - Context - People - Aha!
  • 26.
    “If your “ahamoment” comes deep inside your product, you’ve already lost.” - Samuel Hulick - User onboarding expert
  • 27.
    ● 1-3 minutevideo ● Explain your product value ● Narrative-driven by nature Alternatively, do an “explainer video” PROs: You control the story, it goes through user's ears :) CONs: Less easy to adapt, expensive
  • 28.
    Sandwich Video iskilling this game Robinhood video generated 1 million signups before launch! click to watch video
  • 29.
  • 30.
    If you can’tsell people on using your product in person, replacing yourself with a video isn’t going to suddenly make things click.
  • 31.
    Ultimately don’t blindlyfollow the lead of the Twitters, Facebooks, and LinkedIns. They have the enviable position of presuming everyone knows what they offer.
  • 32.
    We’re ready tostop talking about the user and start talking about ourselves
  • 33.
    Now we justneed to get sign-off from the mind. We’ve already captured their heart
  • 34.
  • 35.
    Think beyond features Specificways your product exceeds all the other options How your product is just as good as all the other List your product qualities Quality #1 Quality #2 Quality #3 Security Speed
  • 36.
    Communicate qualities in4 ways Testimonials Approvals Success Numbers
  • 37.
    Testimonials are effectiveat establishing trust and credibility Logo Face TitleName intercom.com
  • 38.
    Transparency, confidence, and generositycan go a long way. If you were featured, let people know!
  • 39.
    If you havethe power of numbers, let prospective users know Where there’s smoke, there’s fire.lydia.com
  • 40.
    Including with socialmedia counters
  • 41.
    HTML hit counters Btw,this is not new ;)
  • 42.
    It’s for thissame reason that restaurants seat people at street-facing windows first: restaurants that appear crowded are probably crowded for good reason.
  • 43.
    Make your userbase more successful Kind of person Slack helps people become Very specific and relevant vitality real-world indicators. Impressive! slack.com
  • 44.
    All that’s leftto do is pave that path so nobody loses their way in your signup! We’re well on our way
  • 45.
    Path the wayin signup 3
  • 46.
    Remove frictions that slowpeople down We are going to focus on 2 things Don’t let users drift away
  • 47.
    Remove frictions that slow peopledown Screw CAPTCHAs unless you’re absolutely dying from spam. Study about CAPTCHAs by
  • 48.
    Do you absolutelyHAVE to: ● Get their phone number at signup? ● Have them confirm email before using the app?
  • 49.
    If many informationneeded, consider breaking down into consumable steps N26 signup is composed of 15+ steps easy to take.
  • 50.
    Don’t let users driftaway Ever seen a field for a coupon code and opened a new tab to do a search? That’s your flow being allowed to drift, and it’s dangerous.
  • 51.
    Requiring email addressto be confirmed is a big-time drifter Allow provisional access until email is confirmed to keep user in
  • 52.
    By now yourusers should have taken the first step by signing up. Let’s align in-app touch points to set them for success at every turn.
  • 53.
  • 54.
    First impression -One seat - Cut steps - Tour 4 rules to follow
  • 55.
    Make sure thisfirst impression ends with a cherry on top First impression - One seat - Cut steps - Tour
  • 56.
    To do soprovide users a taste of success Buffer first experience aligns with product essence: scheduling social updates. First impression - One seat - Cut steps - Tour
  • 57.
    Vimeo first experiencedoes not expect people to wait while their first upload takes 40 minutes to process First impression - One seat - Cut steps - Tour Make first win achievable from one seat
  • 58.
    Let’s see howGoogle Doc shrunk a chain of dependencies down from 5 to 2. First impression - One seat - Cut steps - Tour Cut as many steps as possible 1. Click create new doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it
  • 59.
    Does your GoogleDoc absolutely HAVE to have a name? Google just default edit to “Untitled document”. 1. Click create new doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it First impression - One seat - Cut steps - Tour
  • 60.
    Do you absolutelyneed to save it? There’s nothing happening here that an autosave couldn’t 1. Click create new doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it First impression - One seat - Cut steps - Tour
  • 61.
    Do you absolutelyneed to copy the link manually? In Google Doc the link is automatically selected and copied 1. Click create new doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it First impression - One seat - Cut steps - Tour
  • 62.
    1. Click createnew doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it 1. Click create new doc 2. Name the doc 3. Save the doc 4. Copy the embed code 5. Paste it2. Google shrunk the chain and sacrificed very little power to create a doc First impression - One seat - Cut steps - Tour
  • 63.
    First impression -One seat - Cut steps - Tour PRODUCT TOUR
  • 64.
    There’s a slimchance a tour will clear up some confusion There’s a greater chance it will just provide an annoying delay First impression - One seat - Cut steps - Tour
  • 65.
    When to builda tour? First impression - One seat - Cut steps - Tour
  • 66.
    Whenever YOU needinformation that’s critical and isn’t likely to be changed often Netflix focus mode” draws focus away from the single task at hand First impression - One seat - Cut steps - Tour
  • 67.
    How to builda tour? First impression - One seat - Cut steps - Tour
  • 68.
    Actively guide thenew user through performing the activity Rather than describing, Optimizely gets the user to actively engage with it First impression - One seat - Cut steps - Tour
  • 69.
    Or setup quests Firstimpression - One seat - Cut steps - Tour Setup quests are the opposite of product tour as they encourage exploration
  • 70.
    Use smart interface Youcan see in the background the cool place you get to land as soon as you finish First impression - One seat - Cut steps - Tour
  • 71.
    Or make itpublicly accessible Show what other customer are seing once they use the product First impression - One seat - Cut steps - Tour
  • 72.
  • 73.
    First impression -One sit - Cut steps - Tour Align it with your activation Activation
  • 74.
    Twitter saw amassive spike in signup retention once started encouraging people to follow instead of search or tweet. Everybody knew people they were interested in ;) Twitter activation = ~ 30 followers
  • 75.
    First impression -One sit - Cut steps - Tour Align it with your activation Follow ~ 30 people
  • 76.
    Use these toolsto measure each steps of your onboarding satisfaction Temper.io Gotcha.io Medallia.com Now measure
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
    Congratulations! Your product madegreat step toward great user onboarding!
  • 82.
    1. Capture usershearts 2. Capture users minds 3. Path the way in signup 4. Align in-app touchpoints Remember the process
  • 83.
    Great books Iused to write these slides ;)
  • 84.
  • 85.
    thanks to thisguy for the design inspiration @mxbraud
  • 86.
    You can alsovisit my blog .com
  • 87.