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!