Duncan Hopkins

UX and Design Leadership.

Sign up more customers with best practices for application on boarding

dropboxIf you build it, they don’t necessarily come. That’s what makes application on boarding so important. Once you’ve designed and created an app for the web or mobile devices, customers need help signing up – and reasons to stay with you.

Simplifying the on boarding process

To encourage users to quickly start using your product, it’s critical that the sign-up process is minimized, making it a simple and fast task. To get new users through the door:

Understand what motivates or prevents someone from becoming an active user of your site or app. Frequent user testing will help validate results, and A/B testing of various landing pages can reveal the optimal solution.

Front-load the experience. Engage the user in activity on the product straightaway. If your product can be used immediately, let the user do it. This allows them to see the value now, not later. For example, on Google.com, the main function is to start searching, so the search box is the most prominent feature.

Squareup.com mobile site features a Short Header, Call to action Button, product in use. All other content is below the fold.

Squareup.com mobile site features a Short Header, Call to action Button, product in use. All other content is below the fold.


Emphasize a big, clear call to action. If you squint your eyes and look at your page, the call to action should be the most visible item. Always keep the call to action above the fold. If the user can’t see it, they can’t click it. This is also where you start introducing consistent style and action buttons to familiarize users with the brand. Make it the most visual element on the page.

If it’s free, say it’s FREE! I love free, don’t you? You will have a much higher conversion rate by letting users know it is free or a free trial in the call to action. There are various marketing techniques available, depending on what you are selling. Free is always a great incentive. If it’s not free, you had better explain that up-front, too, as users will lose trust if you try to pull one over on them.

Get social. Social sign-in is a great shortcut if your users are active on social networks. But you should always include an email option as well, since not everyone uses social media or prefers not to link those accounts to other apps. Be sure to mention that you will not spam their mailbox or post on their wall, especially if using social sign-in. Letting users know this will increase conversion by starting to build trust in your company. And seriously, don’t spam them or post items to their wall! If you don’t use a social sign-in, embed the full signup form on the home page. This decreases the steps to sign in.

Keep it simple. The ideal design features a simple page with a short message and call to action. Look at the example sites on this page. Every one of them has a short, precise product description. If you need a paragraph to explain your product, you have already begun to lose customers. Product benefits can be added below the fold (scroll) or in a short tour, but the user should not have to view them before they can sign up.

Pre-fill via API. When signing on with social media, import the user’s information by API to pre-fill basic entries such as address, email, profile photo, and even contacts. This will further decrease signup time for the user.

Import contacts early. You want more people in your funnel sooner. Allow simple import from multiple services, including email. But don’t force it and allow users to skip this step. You can always remind them later or offer this as a main action in the user interface.

Use a progress bar. Sometimes called wizards, progress bars show where the user is in the signup process. They stop users from giving up and leaving. These can be numbered steps or a simple set of dots. Ideally, a progress bar includes a maximum of three to five steps. If you can keep the process even simpler, don’t include it. Allow the user to skip steps that do not apply or are not needed to sign up. Tutorials can be invaluable at signup, but keep them short and allow users to skip and access later.

Pinterest uses multiple social sign up with optional email form.

Pinterest uses multiple social sign up with optional email form.

Tips for a great on boarding design

Keeping the page simple is always the best solution, but these ideas can help the site’s appeal and help incorporate branding:

Large applicable images can improve conversion rate. A visual splash is nice, but don’t take the emphasis away from the call to action. Use it to add focus.

When using people in photos, make sure they are same as the target audience. Choose images where people are smiling, attractive and having a great time. Stay away from the same old stock images of shiny, happy people that are on 30 percent of sites out there. Add interest by being unique! ┬áTake the photos yourself, or spend the money to hire a professional. You want visitors to think, “Hey, I want to hang with these guys. They look like fun!”

Don’t forget the power of illustration. Many sites are using hand-illustrated artwork to bring a simpler human feel to the technology. Good examples are dropbox.com and axure.com. This can bring focus to a differently styled call to action.

Give the user social testament of your product. Show number of people, social share buttons, press, testimonials, etc. This validates the site as worthy, useful and full of content. Again, use this sparingly and put it below the fold based on your marketing goals.

If a link takes the user away from the call to action, put in the footer. This is a standard practice, and most users know where to go to find the small print. The landing page might not

need any at all except for SEO purposes, so save it for the main site. Include a prominent call to action button on every page if the user has not logged in.

Even with a busy background, the big green button is hard to miss on Spotify.com.

Even with a busy background, the big green button is hard to miss on Spotify.com.

All these practices are applicable for web sites,  mobile sites, and apps. When designing responsive sites, be sure to apply to each view size.




Comments are closed.