<p>Published on <a href="https://blog.prototypr.io/essence-of-user-on-boarding-in-ux-c8597e5b57d3?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Ishan Manandhar <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*goVGknEeeinKo4HJP-VaoQ.jpeg">Air Onboarding</p>
<h4>What is User On-boarding?</h4>
<p>The beginning, experience of the user with your brand, product, and people, which starts after signing up is commonly known as user on-boarding. It is the process and associated user experience by which new users become proficient using an application.</p>
<blockquote><p><strong><em>“User on-boarding is the process of increasing the likelihood that new users become successful when adopting your product.”</em></strong></p></blockquote>
<blockquote><p><strong><em>— Samuel Hulick of UserOnboard.com</em></strong></p></blockquote>
<p>Let’s suppose I am traveling to Florida. I am there for the first time. I don’t know the people, culture, street, religion, food nothing. Looks I<strong> </strong>need someone who can guide me through the cities I visit. Introducing me the exciting areas and make my stay longer. So, its critical stage where I might extend my stay or get out of there quickly.</p>
<p>Alike this example there are new users for the new product. So, the business intension would be to extend the stay and go for a premium version and user intension would be getting the most feature out of it and making life easier. So, as a role of UX designer we have to align between this two to get our users hooked into our product.</p>
<p>Most of the users use your product because they expect something better to become(better version of themselves). The first impression of your product is what user rely on building their trust upon the product. On-boarding is the most critical stage of the product where the user decides weather he/she will continue with the product or think about some alternatives.</p>
<p>Its the “Beginning,” “first mile of a product,” and “first user experience” relate to what a new user experiences after signing up. This critical movement is so fragile, hence minimising frustrations/distractions and making a atmosphere for trust and slowly guiding the steps into the product is the momentarily goal. Once we define the space between the intolerable “before” and the ideal “after,” it’s easier to identify key moments in the customer journey.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/761/1*0hVDaVr_NW5klLlZt6bt5w.jpeg"></p>
<p>This is most applicable to <strong><em>SaaS product</em></strong>. But, as we all know getting users is tough job. The identification and sharing of successful user on-boarding patterns has been a big driver for the evolution. Here’s a few of tips for its success:</p>
<h4><strong>Short tour/Product introduction:</strong></h4>
<p>We often enter a tour experience the first time when we use a native iOS or Android mobile app. Usually, the tour walks us through 3 to 5 instructional steps and often showcases screenshots of the app or icons that represent the main themes or features. We should aim on introducing brief of the app features and how to use the product with this tour.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/809/1*nLjHMc9uwOXI05MeN4q_8w.jpeg">User On-boarding-Evernote</p>
<h4>Shorten amount of time to find products core values:</h4>
<p>Focusing on how the product can help new users understanding their need is a must. A new user needs to be convinced about the value of the product and how the product can benefit them in their works. This impression needs to be provided in very less period of time if not users shall be demotivated and less attracted to the product we built.</p>
<h4>Easy login</h4>
<p>If users need to create an account to use your app, social login is a great way to simplify the process. We cant onboard anyone unless we make the conversion process as quick and pain-free as possible. So for this we need easy login where we can offer option for one-click sign up rather than spending five minutes manually typing their full name, email and other data.</p>
<p>Reveal the number of steps to completion. This way, users know how long the process will take and won’t feel frustrated if they have to complete five steps and still haven’t finished.</p>
<p>After the account has been created, set up a welcome screen. This should include a link to a frequently asked question(FAQ) section or related tutorials that the user has the option of clicking on and that aren’t necessary.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ohM1diwN3ZUhzZm4I81r5Q.png">Image credit : Janrain</p>
<p>But which social login options are right for our app? Much depends on the our product. For example, Facebook cant use twitter as a way to login their application.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-DsUOomvCPaDngdOLliGmA.png">User Login Examples</p>
<p>In a 2013 Blue Research report commissioned by <a href="http://www.janrain.com/">Janrain</a><strong>,</strong> it was found that 92% of people have stopped using a site because they’ve forgotten their password. Also, as Web Hosting Buzz says in their infographic, 86% of users are bothered by the need to create an account for a website. Easy social logins solve this problem almost entirely.</p>
<h4><strong>Encourage with benefits not features:</strong></h4>
<p>Speed and convenience of information in this Age, is what we all are used to. Explaining everything step to step is often impatient and user can wait start diving in your product. Thus, with user on-boarding, don’t spend limited screen space on text explaining the features of your app.</p>
<p>Instead, we word our copy to explain how your app directly benefits users. A user who immediately understands and finds value in your app will become an active and engaged user.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*4ktu7mW-YKVoinAMnFi-AQ.png">Pinterest User-boarding app Screens</p>
<h4>Educating the users:</h4>
<p>User on-boarding can take many forms depending upon kind of app. Apps with less intuitive designs such as tough navigation or complex gestures mostly requires some form of user on-boarding. For service, e-commerce or m-commerce apps, a tutorial can be helpful for users.</p>
<p>We need to keep the tutorial short and precise, so that users wont feel they are learning something more complex. They should figure out how to handle /operate the app in less than in minutes.</p>
<p>Placing easy location of reference also works. The last step should be dropping users off on the page where they’ll be most engaged. This may not be the app home screen, but instead a page where they will take action, like main dashboard screen or home screen.</p>
<h4>Progressive profiling:</h4>
<p>One of the best ways of greasing the on-boarding is allowing users to progressively build their profiles. Only the most important information are to be filled during registration. If we ask too much of new users and they may not complete the process. Don’t ask enough and users are more likely to churn. Requiring just enough information increases the odds of retention.</p>
<p>“Just enough” information means we won’t be giving users the complete experience from your product right away.</p>
<p>Eg: Up work does this by assigning user profiles a strength rating. The rating is displayed on every user profile, with a call to action to “Improve Your Profile Strength/Completion”. This gives users the chance to complete elements of the profile they left incomplete during their initial on-boarding. With each step they complete, users are rewarded with an improved strength rating. As we’ll examine later though, progress should be based on what the user wants to do, not what the business wants them to do.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*a3SrSC4ZQLigsjZS36nrFg.jpeg">Progressive profiling in different visit</p>
<h4>Using colours as guides:</h4>
<p>Colours play a important role in user on-boarding. We should still follow the colour scheme we created when you began designing your app, but use higher contrast hues and bright colours against empty space to draw attention to where users should navigate (especially on the main-screen). This will keep users visually engaged, while emphasizing actions they should take. The buttons we want users to take action must be made with higher contrast.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SkEQiQA-DTr8DTpGK3a-xg.png">Get started button Invision</p>
<h4>Annotated tips:</h4>
<p>This idea is to get users right into the application, drawing their attention to key features with subtle visual cues. Dubbed <strong>“</strong><a href="https://www.dtelepathy.com/blog/design/ux-flows-onboarding"><strong>The Joyride Approach</strong></a><strong>”</strong> by designer MK Cook, this technique is fairly<strong> </strong>new — and one of the more exciting one. When the user interacts with these cues, they get tips on using the feature.</p>
<p><a href="https://slack.com/">Slack</a> does a awesome job with this method. The visual cues, which animate in to their locations, then pulse to ensure they grab your attention.Once you click the pulsing visual cue, it will explain the user on-boarding process steps.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*e8nXBSE-wGl4av5_BFikHA.jpeg">Annotated tips in slack</p>
<h4>Encourage using the product:</h4>
<p>We need to find the means to encourage our users using the product in a way that helps to complete meaningful task with clear goal in mind. Our users understand the value of our product and how it’s going to enrich their lives, you’ve guided them thoughtfully through a very simple sign up process — and now you want them to start using and enjoying the experience of what you have created.</p>
<p>Provide a tutorial of how to use our product’s essential functions of the product. Let users should be able to turn off the tutorial if they want (and of course quickly refer to it again in the future when they are stuck).</p>
<p>Very clear ‘success’ messages are needed to be displayed to the user as they progress, that the value and benefits of the product are reiterated throughout, and that there are no ambiguous calls to action.</p>
<h4>Creating excitement / momementum / motivation:</h4>
<p>The “aha” moment is the time when a user internalises the value your product provides. It’s the moment when they’re ready to buy (especially if they’re on a free trial) or deepen their relationship with the product (become a fan/share with friends/give access to more data/etc.)</p>
<p>Getting to ‘aha’ should be the goal of your user on-boarding. This applies for both product on-boarding and also feature or redesign on-boarding.</p>
<p>We may not be able to articulate the “aha” moment today, so the first step is to generate a hypothesis and test it. Identify the main value proposition or differentiator of your product. We may consider the most-used feature or what fans get most excited about.</p>
<h4>Creating lifecycle emails:</h4>
<p>User on-boarding isn’t merely the process of introducing your new signups to your product’s features, but instead the process of driving people to success, getting there will take many follow-up trips.</p>
<p>For that, we need to think of ways to get people logging back in something our interface can’t do on its own because, well . . the user would already be there!</p>
<p>Instead, we need a system for continually going out to where your users are and luring them back to the good stuff. And for that, there’s no place better to find them than their inbox.</p>
<p><a href="https://medium.com/help-scout/why-lifecycle-emails-are-magic-pixie-dust-for-user-onboarding-472614bc0d53">Lifecycle Emails Are Magic Pixie Dust for User Onboarding</a></p>
<h4>Combining different channels :</h4>
<p>There are 3 main techniques used for on-boarding new users: email, in-app messages, and product tours. Using a combination of these channels to motivate, teach, and engage your users.</p>
<p><strong>Emails</strong> are great for transactional messages and re-engagement. For example, signup success or newsletters and announcements. Email is the only way to access inactive users, so don’t overload it in case they unsubscribe. However, it’s out of context: Users may read your email on a different platform or on the move, so it’s hard to prompt specific actions. Instead focus on developing motivation and explaining benefits.</p>
<p><strong>In-app messages</strong> are essentially emails with context, for active users. Use these to deepen understanding of the product and for important announcements or updates. They don’t prompt product actions easily, so stimulate conversation and self-discovery. Ensure the content is easy to digest in text and media format.</p>
<p><strong>Product tours(</strong>Annotated tips<strong>)</strong> consist of a variety of in-product prompts. This can include takeovers, modals, hotspots, tooltips, notification bars etc. Use these to highlight parts of the interface and encourage users to act. They are often designed poorly which leads to a bad reputation. Users should find product tours compelling, valuable, and enjoyable. This should help users achieve their goals, not your goals.</p>
<blockquote><p>Product tours should help users achieve their goals, not your goals.</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/720/1*u8BBgRkoDtKIjQg3qbLamw.jpeg">Air Boarding</p>
<h4>Create Teams</h4>
<p>Collaborative, team-based SaaS products like Asana, Dropbox and Slack know the sooner they can connect these individual users to a team the more momentum they build toward a premium upgrade.</p>
<p>In each of these examples, when signing up with an email domain others have already used, new users are prompted to connect with teammates on the same domain. “Ask to join” and “Find your team” are common ways to encourage users from a company, who may not know their colleagues are considering the same tool, to connect.</p>
<p>Slack alike builds its teammate invitation right into the on-boarding flow prior to letting you use the product. In this case, teammates make the tool valuable. With a simple opt in, Slack allows new users to let their teammates join without additional permissions if they’ve created an account using a verified company email address.</p>
<h4>Generating leads:</h4>
<p>Ultimate aim of the on-boarding game is of course to guide our new active users along the path to purchase.</p>
<p>It may be that you want our new users to upgrade from freemium to premium, and during the on-boarding process is a great opportunity to do this, as new users are motivated users. Our freemium version is full of value that’s already been communicated but we’ve really got to focus on how great our new users’ lives would be if they chose to upgrade. <em>We’ve got them </em><strong><em>hooked, now seal the deal</em></strong><em>.</em></p>
<h4>Analyse and iterate frequently:</h4>
<p>User on-boarding isn’t something that you can build once and then revisit in 5 months. We need to consider it a feature that needs fine-tuning to increase engagement, We’ve set a goal and now we should measure and test variations.</p>
<p>Continual improvement is necessary to get an optimised user activation rate.It’s incorrect to think of user on-boarding as a set-and-forget flow.</p>
<h3>Questions to answer</h3>
<ul>
<li>What do our users need to do to get value from our application?</li>
<li>What do we need to know about your users to provide them with a great experience?</li>
<li>What are the costs and benefits of adding friction to your on-boarding process?</li>
<li>How will we motivate users to complete it?</li>
<li>At what point in our users’ lifecycle does on-boarding need to be completed?</li>
<li>What actions must our users take regularly to drive growth and revenue?</li>
</ul>
<h4>Recommended Reading:</h4>
<ul>
<li><a href="https://www.trychameleon.com/">Chameleon | User Onboarding &amp; Product Tutorials for Web Apps</a></li>
<li><a href="https://www.useronboard.com/how-slack-onboards-new-users/">How Slack Onboards New Users | User Onboarding</a></li>
<li><a href="http://usabilitygeek.com/user-onboarding-comprehensive-guide/">User Onboarding: A Comprehensive Guide &#8211; Usability Geek</a></li>
<li><a href="https://www.useronboard.com/power-of-faces/">Putting the Power of Faces to Work | User Onboarding</a></li>
<li><a href="https://www.netguru.co/blog/great-user-onboarding">4 Steps to Great User Onboarding</a></li>
<li><a href="https://www.invisionapp.com/blog/grow-your-userbase-with-better-onboarding/">Grow your userbase with better onboarding &#8211; InVision Blog</a></li>
<li><a href="https://www.dtelepathy.com/blog/design/ux-flows-onboarding">UX Flows: How to Turn Onboarding into an Amazing First Date with Your User</a></li>
</ul>
<p>Hence, first user experience” relate to what a new user experiences after signing up. This critical movement is so fragile, hence minimising frustrations/distractions and making a atmosphere for trust and slowly guiding the steps into the product is the momentarily goal for product’s success.</p>
<h4>~~~~~~~~~~~~~~~~~~~~~~~~~~ Thank you ~~~~~~~~~~~~~~~~~~~~~~</h4>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c8597e5b57d3" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/essence-of-user-on-boarding-in-ux-c8597e5b57d3">Essence of User On-boarding in UX</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Essence of User On-boarding in UX

What is User On-boarding?

Top Stories