Create Your Free Store
UX Design
12/30/2019

Why onboarding matters? First impressions count.

Written by
Photo of Sophie
Sophie King

First impressions matter. Therefore, you need to show the user the value of your application by helping them to reach that ‘aha’ moment during their ‘first-time user experience.’ If not, there is little chance of them returning regardless of how fantastic your product is.

There is no ‘best’ UI pattern to use for onboarding. However, there are the best use cases for popular flows. The right UI pattern, when used correctly, can transform a hand fisted product tour into one that helps users see the product's value by creating a connection between them and your product.

In this article, I will outline some popular methods for onboarding and explain how they have been used to drive engagement and increase retention rates which can result in brand loyalty.

Humans nearly always judge a book by its cover.

Welcome pages serve two purposes:

  1. They greet the user.
  2. They help outline expectations.

It sets the tone whilst establishing the groundwork for a long term relationship. Furthermore, it provides designers with an opportunity to encourage users to complete the product tour with an eye-catching, compelling ‘call to action’ function.

If during the sign-up process you have taken the users name, utilise that information by providing them with a personalised message. This has proven to effectively hold interest because it builds familiarity, makes them feel appreciated and suggests they can personalise your product to their specific requirements.

Headspace’s application welcomes its new user’s with a personalised greeting. The persona-based onboarding ensures the user has a relevant experience with higher engagement.

The overall UI is a good reflection of the product - calming and tranquil. Headspace is an excellent example of onboarding done right, but it could be improved by allowing its users to skip the lengthy onboarding process.

Humans have a cognitive bias toward consistency.

Sometimes there can be a drastic jump in experience when users transition from onboarding to interacting with your application. Therefore, it is imperative to ensure the language and aesthetics of the onboarding process are a good representation of the product - keep the value proposition consistent.

Nutshells sign up process is fun but informative and persuasive which helps drive engagement and prevents drop off. Nevertheless, the visual language is not consistent. When the user starts interacting with the application it loses personality.

Humans are cognitively biased towards completing things.

Progression bars are a very common UI element that have been designed to encourage users to complete a task. A good way to enhance this UI pattern is to start with it partially filled. It makes the user feel as though they are well on the way to completing the task, instead of starting from scratch which can be a deterrent if there are lots of steps.

Tumblrs personality shines through with its use of copy and visual design. However, an important instruction ‘select five’ is hidden in the top right-hand corner of the screen. It would be more beneficial to incorporate that in the main body of copy.

By allowing users to take control and customise their feed it helps to create a sense of ownership - this ultimately could increase engagement and retention due to the endowment effect!

Humans crave choice.  

Some users may already know what they want from your product. However, this is not true in all cases. Therefore, persona-based onboarding is a great tool to use when you are trying to communicate to a vast audience with different abilities and needs.

This type of onboarding can happen one of two ways; either in the background without the knowledge of the user or through a choose-your-own path option. Either way, this should improve the user's experience by making it more relevant to their specific wants and needs.

Codecademy is an excellent example of persona-based onboarding, throughout the journey users are given a series of options that tailor the experience to their needs - this should result in the user reaching that ‘aha’ moment quickly.

Users are not bombarded with a lengthy questionnaire. Instead, Codecademy asks one question at a time. Opting for a minimalistic design with an abundance of white space to reduce the risk of cognitive overload. The copy is informal but clear and easy to understand which is an excellent representation of the product.

Product Tours.

Product tours can be a really powerful tool as part of the onboarding process. They draw attention to particular features helping users learn, understand and become familiar with your interface. Essentially, it nudges users towards that ‘aha’ moment that ultimately increases product adoption, activation and retention rates.

Dropbox uses a combination of coach marks and modals to show users how to access the most important product features. They provide the user with the option to exit the tour at any point which helps to reduce frustration and friction.

The modal changes from blue to green to provide the users with visual feedback indicating it is the end of the tour. The product tour is quick, simple and easy to navigate.

Humans respond to checklists as they manage complexity and offer instant feedback.

Checklists are a valuable UI element when onboarding a user to a complicated application. It allows the user time to explore and retain information in their own time which prevents the user from feeling overwhelmed. Additionally, the checklist motivates the user to complete the process by using a number of powerful psychological principles (cognitive closure, principle of least effort, etc.)

IBM uses the psychology of small wins to encourage users to complete the onboarding process.  It states that with each success our brains releases a small amount of dopamine. This, in turn, makes us feel good and helps us to concentrate.

Teasing the user with a sneak peek of the applications interface.

Often designers choose to have the welcome/onboarding screens appear as a modal with a transparent overlay. This user interface pattern is popular because it allows users to see the application. It shows the user where they will end up and therefore, should keep them focused on the task in hand.

Hotspots.

Hotspots are a relatively new UI pattern but they are being used more and more frequently because the unique pulsating animation (if done correctly) catches the user's eye in a subtle and unobtrusive way. Hotspots are essentially a cross between a tooltip and a notification badge, and are a good alternative if you want to provide your users with contextual information without disrupting their workflow - activate certain elements and features.

Grammarly's onboarding process starts with personalisation so it can assess your skill level. The entire process is sequential and takes the user on a journey, introducing you to the UI one step at a time.

Grammarly has adopted the ‘learning by doing’ approach by providing users with a demo document which allows them to explore features without  ‘risk’ and thus encouraging discovery. The pulsing hotspots are subtle and do not obscure the interface (eye-catching enough to ensure engagement) - when clicked they reveal tooltips.

Action-driven tooltips.

Action-driven tooltips are used to guide users through a more technical workflow. They isolate elements like buttons or form fields. Once this action has been completed, it guides them onto the next one. When used in the correct context it can be frictionless. However, use this approach sparingly as it can quickly become overbearing.

IBM Cognos Analytics allows the user full control over choosing their path to start understanding and becoming familiar with the platform. The copy and visual language is concise and clear which adds value to the selective onboarding experience.

IBM Cognos Analytics onboarding uses a mixture of both ‘doing-focused’ and ‘function-focused’ walkthroughs. The visual design looks native to IBM’s products and has enough contrast to stand out.

Gradual engagement.

Gradual engagement is the process of moving users through an application slowly, helping them to experience the value firsthand before creating an account.  By lowering the barrier of entry and the amount of personal information you require of users it can increase conversion rates. There are two approaches either delay account creation until after the landing page or entirely until after a user has reached their ‘aha’ moment.

Duolingo uses gradual engagement which is an excellent way to help users see the value of the product. Additionally, it makes registration feel insignificant and doesn’t feel like data collection.

The questions asked by Duolingo help ensure that the user's experience is tailored to their proficiency. Additionally, users are prompted to choose a learning goal - getting them committed before signing up which should have an impact on how likely/frequently they will engage with the platform.

Final Thought

Onboarding isn't just about welcoming users to your application, it is about helping them to experience the value of your product first hand and securing good retention rates.

Want your name on the Mercarto blog? Write For Us

Recommended Reads

Finding Your First 100 eCommerce Customers

Download this free resource to get expert tips and advice on how you can sell more products. Learn about social strategies, PPC ads, SEO and lots more ways to get ecommerce customers.

Got questions? Let’s chat.

Maybe you want to discuss business ideas, discover more about our features, or just want to speak to a friendly human.
Whatever it is, we’re all ears.

GET IN TOUCH