Table of Contents

How we tackled the onboarding for the setup phase in Bytes Route

Did it ever happen to you to feel somehow lost in a product right after you registered or just installed? If your answer is ‘No’, then I suppose you are not on the dark side of the Moon and Lady Luck smiles upon you.

However, I rely on the fact that you felt this ‘pain’ at least once before. My goal is to simply share with everybody how we, the team behind Bytes Route, managed to tackle our own users onboarding in the initial setup phase, right after the registration and perhaps sweeten a bit the bitter taste of poor onboarding that you experienced in the past.

Bytes Route, in a nutshell, is a software created to help businesses better onboard their users with the help of in-app product tours.

Welcoming Bytes Route users

Right after someone registers (for free) on and logs in for the first time in the web-app, he/she is prompted with a one time showing “Welcome” message. The modal displaying a warm greeting has, besides the common sense of saying hello, the purpose of informing the guest of a few setup steps that he/she needs to complete.

We chose a modal dialogue because we really wanted to capture their attention, without interrupting in any form since it’s the very first UI element they see.

welcome user

Providing the needed information at the right time

Once the user dismisses the dialog, the application displays, as an empty state, a UI pattern in the form of a configuration wizard. Why did we choose a configuration wizard? Well, the reasoning is quite simple: based on the fact that our partners will only have to do it once, and that most of them, if not all, will be novices in setting up Bytes Route for the first time.

wizard steps

The wizard is composed of four steps, including the registration itself which is marked as completed, in order to reinforce the people they have already achieved their first goal. Most of the other steps are quite simple to tackle, with maybe the exception of the last one.

Gradually moving from an “empty state” to a “normal view”

The empty state of the application is gradually transformed into a regular display after the users would have completed the third step. This implies creating content, which in Bytes Route at the given time are dynamic product tours. The creation of a product tour needs a detailed onboarding process on its own since it can prove to be quite complex, but I will cover this subject in a different blog post.

Once all of the steps are completed, Bytes Route users will no longer be noobies, their experience using our SaaS will grow, therefore the setup wizard will no longer be needed nor will it be visible to them. An exception for this is the last step which we decided to keep in the form of an expandable/collapsable banner since this step can be performed multiple times at different time stages.

normal state with banner

Onboarding never truly ends

Since Bytes Route is a new startup, in time, with the addition of new features, capabilities and other goodies to the SaaS, the people who use the product will need to be made aware and helped in understanding what’s new, what is changed or how to do it.

I suppose the onboarding tasks required by specific types of users will only come to an end at the twilight of a product’s lifecycle. Until then, you can onboard your users with Bytes Route providing them product tours directly in your web application, for free.

About us

Bytes Route is a digital adoption tool designed for non-technical people to create no-code product tours for web applications.

Recent Posts

Follow Us

Weekly Tutorial

Create code-free product tours for user onboarding on your web application

Need Help with Onboarding?
Tell Us Your Challenges.