Our top 5 user onboarding flows will inspire you to prototype excellent onboarding experiences for web and mobile apps
Intuitive user interfaces are the Holy Grail for UI designers and digital product managers. But it’s not always realistic to expect 100% of users to dominate a mobile or web app’s features from the get-go. This is particularly true for intricate enterprise application interfaces requiring intimate knowledge of an organization’s workflow; however, it can also be true of relatively simple products aimed at a wide variety of users, or a product with frequently updated features.
All users appreciate a helping hand to get them started on a product or feature sometimes. And that’s where user onboarding comes in.
User onboarding: the basics & the benefits
User onboarding flows come in a variety of shapes and sizes, but all of them aim to help users make the most of a web or mobile app, fast. To do this, onboarding flows might:
- introduce new users to a mobile or web app, walking them through features or account management
- explain an app’s most popular actions or features
- introduce a new feature and why users should try it
- all of the above
The benefits of building user-centric onboarding flows revolve around the impact on user retention and user engagement. Whereas ineffective onboarding leads to high churn rates, decreased product renewals and a disappointing rate of conversion from free products to paid versions, good user onboarding flows reverse downward trends, improving user return rates, engagement and sales funnel strength.
A user onboarding flow should guide users through potentially confusing or difficult moments, improving their experience of the product and converting them into loyal users.
If all this is reminding you of Clippy, Microsoft’s well-meaning but intrusive Office Assistant paperclip, the it’s time you got up to date with these 5 examples of inspiring user boarding flows that boost user rentention and improve user experiences.
Download Justinmind today and prototype onboarding flows from scratch
Basecamp: onboarding new users with great UX
When we interviewed Basecamp‘s UI Designer Jonas Downey, he told us that his team aims to make Basecamp “an enjoyable collaborative space“. That design idiology is obvious from Basecamp’s onboarding process for new users: starting from a landing page with a distinctly approachable vibe (witness the client testimonials and distinctly homey design aesthetic), Basecamp moves users along a conveyor belt that includes account creation, and a personal note from Basecamp’s friendly looking CEO.
This is all great, but then comes the real onboarding juice: the flow asks new users which projects they’ve got going on right now, and takes them straight over the project template they need. Say you want to set up a company HQ, a central point for shared documentation and news – Basecamp directs new users through that set up in 3 steps.
Basecamp also provides new users with sample projects in the Account page, which users can use as templates to build out their own projects. Users are encouraged to upload information, add members and start working with the tool almost without realizing. The onboarding flow is unobtrusive, useful and helps boost retention by ensuring users upload documentation sooner rather than later.
Justinmind: Tailored onboarding for new or advanced users
Here at Justinmind, we’ve just updated our onboarding experience for first-time users. Now, when new users download our wireframing and prototyping tool and open the web app, they are presented with two options: traditional ‘full mode’, the full user interface complete with Justinmind’s complete range of floating palettes and actions; or newly-introduced ‘beginner mode’, which guides users through the interface with interactive tooltips linked to our support section and YouTube tutorials.
Beginner mode users are guided through features and floating palettes step by step and, once they feel up to speed, can easily switch to Full mode at any point. By adapting the onboarding experience to different user abilities, we can create a Justinmind experience tailored to user needs.
Netflix: Clear pricing, personalized onboarding
Getting started with Netflix could be a nightmare for users: a potentially overwhelming number of movies and series to choose from, plus worries about data crunching and monthly payment, could make users reluctant to dive into the paid streaming service. Netflix cleverly assuages any uncertainties with its personalized onboarding flow. The landing page gets the payment thing out of the way first off, with the claim “Watch anywhere. Cancel anytime”.
With that out of the way they take users right along to an easy to understand pricing page – they also offer the first month free with no commitment. ‘Hooked‘ author Nir Eyal, quoting Evernote’s CEO, points out that the free trial is a great tactic to get more paying users: “As usage increased over time, so did customers’ willingness to pay. After the first month only 0,5% of users paid for the service. …By month 33, 11% of users had started paying… At month 42, a remarkable 26% were paying for something they had previously used for free.”
Savvy pricing presentation apart, Netflix’s user onboarding is strong on personalization. By asking new users to rate a selection of movies on a sliding scale, Netflix then algorithmically produces a list of recommended content in much the same way Amazon or Spotify does, to keep users moving through the app, discovering and engaging with content.
Dropbox: Step by step onboarding made easy
Dropbox makes it incredibly easy to both understand the product’s USP, and to get started on file saving and sharing. Once users create an account and open the web app, they are walked through the process of user verification, document uploading and sharing in only 7 steps – Dropbox designers have chosen to present these steps in a progress bar at the top of the interface, to relieve user anxiety about the complexity of the onboarding process.
In terms of textual content, Dropbox’s onboarding process favors clarity over wise-cracking; however, branding opportunities are leveraged in the cute illustrations, which lighten the mood without obscuring basic functionality.
Find out more about design at Dropbox in our interview with Design Manager Anisha Jain
Duolingo: User engagement through goals and rewards
Language app Duolingo wastes no time in its onboarding process: users select their language and choose their goal right from the landing page. In asking new users to commit to a goal, Duolingo is cleverly tapping into behavioral science theories of goal achievement and commitment, in a bid to keep users engaged for longer.
Kind of like Justinmind, Duolingo also provides new users with two options once they’ve set their language goal – they can start from the basics, or take a placement test. The experience thus becomes personalized at only the third interface step. Light-hearted tooltips then introduce the user to useful features based on their knowledge and chosen language.
Duolingo’s user onboarding aims to get users started as soon as possible, and within 10 clicks users are deep into language learning. By enabling users to get into core functionality from the start of their app experience, Duolingo presents itself as highly intuitive.
Inspiring user onboarding – the takeaway
Good user onboarding isn’t just about getting users to interact once and only once with your app; rather, it’s about getting them to come back to your product again and again, until it becomes an integral part of their online lives. Designing and prototyping onboarding flows is crucial to creating meaningful onboarding experiences, so get inspired by these 5 examples and start prototyping your own user onboarding flows. Check out these tips and tricks on creating user onboarding flows for more ideas on improving conversion and retention.