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