• Bytes Route logo

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

Felix Diaconu

October 13th, 2020

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 Bytesroute.com 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.

Welcoming and informing screen displayed as a modal window

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.

empty state as four steps configuration wizard

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.

last step displayed as expandable collapsable banne

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.