How to create a smart onboarding overlay walkthrough using stacked visibility rules

This is a technique I developed for our app because we were seeing a lot of signups but very few people completing the steps necessary to join one of our hackathons (ie. filling out their skill set, applying for the event, completing their pre-event checklist).

Through trial & error I learned that you can stack visibility rules to have complex conditionals for showing/hiding images throughout your app. This allowed me to create a sequence of friendly visual cues that prompt new users through the steps necessary to earn a sponsorship to our event. This has dramatically helped our new user engagement and fixed a flow that was previously bleeding new signups.

This Loom shows the frontend user experience: Adalo onboarding walkthrough overlay: Front-end experience | Loom

And I wrote up a post with a full walk through on what you do in the backend to implement that here:

Let me know if you have any questions. This is the first of a series of posts I’ll be doing on my blog to document a bunch of useful stuff I’ve learned in Adalo since starting with it back in January. Lots to share… cheers

4 Likes

Great idea with the nested visibility concept! Thanks for the tutorial.