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: https://www.loom.com/share/8f1369c95f9c4964a4fe59b688a4ba30

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

3 Likes