Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Onboarding Deep Dive
Basecamp.com

@SamuelHulick
Some of these details are tiny.
Best viewed in full-screen mode!
Overview
Home Page

Signup Confirmation

Getting Started

Tutorial Project

New Project Form

Pricing Page
1. Home Page
So Clear, So Human

A friendly face to draw you in,
front and (almost) center
So Clear, So Human

Benefits-oriented intro headline,
written in plain English
So Clear, So Human

The screen’s primary
purpose is very clear…
So Clear, So Human

… as is its
secondary purpose.
So Clear, So Human

Supplementary navigation present,
but WAY out of the way
So Clear, So Human

Unique colors call
your attention
So Clear, So Human

This is obviously
a button
A Couple Nitpicks

“Progress on their projects”
is terse, but a bit abstract
A Couple Nitpicks

No way to visualize
using the product
A Couple Nitpicks

Button text too
small to scan
1b. Pricing Page
VERY Forthright

So distraction-free
& digestible!
VERY Forthright

Easy to determine if pricing is
usage vs. feature vs. user
based
!
( … it’s usage )
VERY Forthright

Descending prices
anchor around the higher
rate, creating perception of
value for lower-priced plans
VERY Forthright

“The same as online banks”
is a VERY strong reassure-er
VERY Forthright

A 60-day free trial
is unusually generous!
A Couple Nitpicks

“Pay by paper check option”
is much harder to parse than
“You can pay by check”
A Couple Nitpicks

Easy to skip over this CTA
( doesn’t look like a button )
2. Signup Confirmation
Setting the stage well

“Create a bunch of projects, invite your co-workers”
plants an early seed for core setup activitie...
A Couple Nitpicks

Holy whitespace!
A Couple Nitpicks

This layout could be VERY EASILY mistaken for
a “go confirm your email” screen
( … it isn’t )
A Couple Nitpicks

Also… what is this screen accomplishing
that a modal on the following screen couldn’t?
Is it worth inte...
3. Getting Started
Super Easy to

Take First Step

Nice intro message, with high-contrast color
& handmade aesthetic to help stand out
Super Easy to

Take First Step

The app’s prefab content is its own tutorial!!
What an awesome tactic.
!
( much more on th...
A Couple Nitpicks

Is seeing a list of product updates
really that helpful for getting set up?
A Couple Nitpicks

Really hard to tell what this is supposed to be
!
( it’s the default avatar for my user )
4. Tutorial Project
Interface = Educator!

This to-do list teaches you
about Basecamp projects!
Interface = Educator!

This to-do list teaches you
about Basecamp to-do lists!
A Couple Nitpicks

These don’t seem to teach me
much about Basecamp discussions
- they just feel like “content”
A Couple Nitpicks

Perhaps reverse the order
for these two? The info in
the second is helpful for
figuring out the first.
A Couple Nitpicks

This is really awesome, but it
would be EVEN COOLER if the
items not only helped me
understand the app,...
5. New Project Form
Streamlined Creation Flow

This comes pre-highlighted.
Very thoughtful!
Streamlined Creation Flow

Annotation greatly increases likelihood of
the important info being communicated.
What’s gained by
removing the header?

A Couple Nitpicks
A Couple Nitpicks

Unclear on how to invite
more than three people
A Couple Nitpicks

New users are unlikely to be ready to
create Templates. Hiding this on first use
could help streamline ...
The End!

Everything from here on is
just free exploration!
I hope you enjoyed the deep dive!
There’s lots more where it came from check out samuelhulick.com/user-onboarding for upda...
How Basecamp Onboards New Users
How Basecamp Onboards New Users
How Basecamp Onboards New Users
How Basecamp Onboards New Users
How Basecamp Onboards New Users
How Basecamp Onboards New Users
Upcoming SlideShare
Loading in …5
×

How Basecamp Onboards New Users

108,053 views

Published on

37signals is renown for producing clean, no-nonsense products, and their onboarding experience is exactly that. They also have a very cool tactic for getting new users acquainted with the interface!

If you like this kind of stuff, check out http://samuelhulick.com/user-onboarding

Published in: Design, Technology
  • @SamuelHulick Maybe a title change to 'Welcome to Basecamp!' would do the trick?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @SamNissinen That's a good point! Ironically, since I thought this was a 'go confirm your email' screen, I nearly closed the window entirely without reading it, after all. I'm sure there's something workable in between.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • A little comment on screen 31. People have a tendency to dismiss modals because of their similarity to pop-up ads and other annoyances. Putting that content into it's own page makes the modern impatient user less likely to abandon the information. If they're shown the product behind the modal it's more likely they will simply close the modal and reach out for the product.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How Basecamp Onboards New Users

  1. 1. User Onboarding Deep Dive Basecamp.com @SamuelHulick
  2. 2. Some of these details are tiny. Best viewed in full-screen mode!
  3. 3. Overview
  4. 4. Home Page Signup Confirmation Getting Started Tutorial Project New Project Form Pricing Page
  5. 5. 1. Home Page
  6. 6. So Clear, So Human A friendly face to draw you in, front and (almost) center
  7. 7. So Clear, So Human Benefits-oriented intro headline, written in plain English
  8. 8. So Clear, So Human The screen’s primary purpose is very clear…
  9. 9. So Clear, So Human … as is its secondary purpose.
  10. 10. So Clear, So Human Supplementary navigation present, but WAY out of the way
  11. 11. So Clear, So Human Unique colors call your attention
  12. 12. So Clear, So Human This is obviously a button
  13. 13. A Couple Nitpicks “Progress on their projects” is terse, but a bit abstract
  14. 14. A Couple Nitpicks No way to visualize using the product
  15. 15. A Couple Nitpicks Button text too small to scan
  16. 16. 1b. Pricing Page
  17. 17. VERY Forthright So distraction-free & digestible!
  18. 18. VERY Forthright Easy to determine if pricing is usage vs. feature vs. user based ! ( … it’s usage )
  19. 19. VERY Forthright Descending prices anchor around the higher rate, creating perception of value for lower-priced plans
  20. 20. VERY Forthright “The same as online banks” is a VERY strong reassure-er
  21. 21. VERY Forthright A 60-day free trial is unusually generous!
  22. 22. A Couple Nitpicks “Pay by paper check option” is much harder to parse than “You can pay by check”
  23. 23. A Couple Nitpicks Easy to skip over this CTA ( doesn’t look like a button )
  24. 24. 2. Signup Confirmation
  25. 25. Setting the stage well “Create a bunch of projects, invite your co-workers” plants an early seed for core setup activities
  26. 26. A Couple Nitpicks Holy whitespace!
  27. 27. A Couple Nitpicks This layout could be VERY EASILY mistaken for a “go confirm your email” screen ( … it isn’t )
  28. 28. A Couple Nitpicks Also… what is this screen accomplishing that a modal on the following screen couldn’t? Is it worth interrupting the flow?
  29. 29. 3. Getting Started
  30. 30. Super Easy to Take First Step Nice intro message, with high-contrast color & handmade aesthetic to help stand out
  31. 31. Super Easy to Take First Step The app’s prefab content is its own tutorial!! What an awesome tactic. ! ( much more on this in a bit )
  32. 32. A Couple Nitpicks Is seeing a list of product updates really that helpful for getting set up?
  33. 33. A Couple Nitpicks Really hard to tell what this is supposed to be ! ( it’s the default avatar for my user )
  34. 34. 4. Tutorial Project
  35. 35. Interface = Educator! This to-do list teaches you about Basecamp projects!
  36. 36. Interface = Educator! This to-do list teaches you about Basecamp to-do lists!
  37. 37. A Couple Nitpicks These don’t seem to teach me much about Basecamp discussions - they just feel like “content”
  38. 38. A Couple Nitpicks Perhaps reverse the order for these two? The info in the second is helpful for figuring out the first.
  39. 39. A Couple Nitpicks This is really awesome, but it would be EVEN COOLER if the items not only helped me understand the app, but actually guided me towards converting it into a real-life project!
  40. 40. 5. New Project Form
  41. 41. Streamlined Creation Flow This comes pre-highlighted. Very thoughtful!
  42. 42. Streamlined Creation Flow Annotation greatly increases likelihood of the important info being communicated.
  43. 43. What’s gained by removing the header? A Couple Nitpicks
  44. 44. A Couple Nitpicks Unclear on how to invite more than three people
  45. 45. A Couple Nitpicks New users are unlikely to be ready to create Templates. Hiding this on first use could help streamline things even further.
  46. 46. The End! Everything from here on is just free exploration!
  47. 47. I hope you enjoyed the deep dive! There’s lots more where it came from check out samuelhulick.com/user-onboarding for updates!

×