The Knewton Blog

As a designer here at Knewton, I’m always on the lookout for examples of great UX design from other companies.  From a user interaction perspective, a good onboarding experience is one of the most important aspects of a website or application.

A user’s first click onto a website is a make-or-break moment. If the onboarding process is confusing, overwhelming, or complicated, the user is likely to give up and close out of the window.

Here are five websites that have designed clear, simple, and effective onboarding experiences for their users.

1. Hunch

Here’s the Hunch homepage. New users can click on an easy-to-find intro video that introduces them to the site.

To get started, the user answers ten simple questions or, if she prefers, starts building her profile right away.

Since the questions are short and simple, the flow gives off a bit of energy—the user can answer all ten questions quickly and with ease. After clicking on “start building your profile” and/or answering all of the ten questions, the user is prompted to add personal details.

The welcome screen entices the user to keep taking action with the promise of a reveal if they do so: “Rate 5 items to activate our star predictions for you.”

2. Codeacademy

Here’s the welcome screen:

Codeacademy pushes the user to start taking action in a friendly, easy-to-understand way.

Cleverly, a full lesson is used in tandem with capturing personal details such as “name” and  ”email” to build the user’s profile.

3. Tumblr

Here’s the home page:

The sign-up process is simple; the user only needs to fill in 3 fields in order to start posting.

After clicking on “Start posting” the user is taken into the created blog’s dashboard and given only two suggestions to explore and use the interface: “Make your first post” and “Pick your theme.” There are plenty of other items to dive into, but Tumblr doesn’t overwhelm the user with too many suggestions.

As the user dives into other areas of the site such as the Dashboard, he will notice more suggestions on what to do next. Again, these suggestions are limited to two.

Tumblr is constantly testing out their onboarding experience. I just realized last night that it has changed once again! Here is a current screen of what new Tumblr users see:

This new approach is more direct than before since the user is faced with all suggestions to help him get started through a simple list on the dashboard. Each list item on hover highlights the particular UI element so that the user is directed to take action.

While Tumblr’s previous approach was seemingly simple, it was definitely passive; rather than directing the user to take a specific set of actions, Tumblr seemed only to explain the function of specific UI elements rather than allow the user to truly explore.

An important thing to note about a successful UI: there should be minimal to no explanation of specific UI elements. In Tumblr’s previous onboarding experience, they pointed to the area in which the user should click to create his/her first post. Not needed! The best part of Tumblr’s dashboard is that it is so simple to use. It’s fairly intuitive how/where to start posting; the post icons are prominently displayed. Having an arrow to point to the post icons is just silly. And after seeing Tumblr’s new approach, it seems like they’ve agreed. Tumblr’s new approach is similar to the dashboard in Tripit’s onboarding experience, which we’ll get into next.

4. Tripit

Here’s the welcome screen:

Sign up is simple: just 4 fields.

After signing up, the user is prompted to add plans to his/her Tripit through a Google calendar import. Tripit is notably different from other social apps: instead of initially asking the user to important her contacts from external social networks like Twitter or Facebook or through email, Tripit first asks to import information that is useful only to the user and the success of the system.

Rather than being primarily concerned with building a network like most apps, Tripit prioritizes building a useful application that is unique to each user.

After the initial screens that ask the user to import his calendar and contacts, the user is taken to Tripit’s Dashboard. The Dashboard contains a mini-checklist of outstanding/completed items (e.g. setting up Tripit up on a mobile device).

5. Pandora

Creating an account takes a few steps, starting with a simple form. This form contains fields that may seem questionable, such as “Birth year” and “Gender.” When a user digs further and clicks on “Why?”, Pandora explains that it needs this info to serve up relevant ads. This may seem sneaky, but to be fair, Pandora asks these questions from the very beginning of the signup process, gives the user the opportunity to ask “Why?”, and provides an honest answer.

Once registered, the user is given a clear choice about whether to share profile and activity info.

 

Pandora’s onboarding experience does a good job providing contextual explanations and help. On this screen, there is a link to a page that explains Pandora’s Music Genome Project in detail, which then gives the user clarity on the technology that is powering his/her recommendations.

 

After clicking into the text field on the “It’s a new kind of radio—stations that play only music you like,” a tool tip pops up that requests an action (“Enter an artist, song, or composer”) and explains the direct benefit of that action (“We’ll create a radio station featuring music and more like it”).

Posted in Inside Knewton, Knewton | 4 comments