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

1. User Onboarding Deep Dive
Basecamp.com
@SamuelHulick

2. Some of these details are tiny.
Best viewed in full-screen mode!

3. Overview

4. Home Page
Signup Confirmation
Getting Started
Tutorial Project
New Project Form
Pricing Page

5. 1. Home Page

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

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

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

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

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

12. So Clear, So Human
Unique colors call
your attention

13. So Clear, So Human
This is obviously
a button

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

15. A Couple Nitpicks
No way to visualize
using the product

16. A Couple Nitpicks
Button text too
small to scan

17. 1b. Pricing Page

19. VERY Forthright
So distraction-free
& digestible!

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

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

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

23. VERY Forthright
A 60-day free trial
is unusually generous!

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

25. A Couple Nitpicks
Easy to skip over this CTA
( doesn’t look like a button )

26. 2. Signup Confirmation

28. Setting the stage well
“Create a bunch of projects, invite your co-workers”
plants an early seed for core setup activities

29. A Couple Nitpicks
Holy whitespace!

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

31. A Couple Nitpicks
Also… what is this screen accomplishing
that a modal on the following screen couldn’t?
Is it worth interrupting the flow?

32. 3. Getting Started

34. Super Easy to
Take First Step
Nice intro message, with high-contrast color
& handmade aesthetic to help stand out

35. 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 )

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

37. A Couple Nitpicks
Really hard to tell what this is supposed to be
!
( it’s the default avatar for my user )

38. 4. Tutorial Project

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

41. Interface = Educator!
This to-do list teaches you
about Basecamp to-do lists!

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

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

44. 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!

45. 5. New Project Form

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

48. Streamlined Creation Flow
Annotation greatly increases likelihood of
the important info being communicated.

49. What’s gained by
removing the header?
A Couple Nitpicks

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

51. A Couple Nitpicks
New users are unlikely to be ready to
create Templates. Hiding this on first use
could help streamline things even further.

52. The End!
Everything from here on is
just free exploration!

53. I hope you enjoyed the deep dive!
There’s lots more where it came from check out samuelhulick.com/user-onboarding for updates!