How to create a star ratings component in Adalo

If you’re building an app in Adalo and seeking to give your users the ability to leave star ratings, it can be confusing because there are infinite ways to skin that cat. How do you handle displaying the star review? Do you modify a numeric field in the listing table? If so how do you track new reviews and prevent gaming of the system by users repeatedly reviewing listings?

I’m going to show you a simple technique for how to accomplish all this and in the process teach some lessons around visibility rules, custom formulas and a key principle of database design.

Questions on how to do this come up quite a bit in the Adalo Forums and it’s one of the more requested components in their feature request system. The technique I’m about to show you is what I used in building a kiva clone for us at Charity Makeover to add progress meter functionality for donations.

In this video I’m going to demonstrate from scratch how to build a simple wine listing directory app with a 5-star review component.

The first video sets everything up from scratch to the point of being able to review the wine:

And this second video shows how to display the star ratings and rating count:

That is the 80/20 of how you do it. Something I forgot to show in the video is you’ll want to use the Round() function in the custom formula for the magic text that generates the star graphic. As it stands now if I were to add one more rating that made the review average something like 3.33333333 it would break the graphic. But to prevent that scenario you just do this:

Leave a comment if you have a question about anything in the videos and if you enjoyed this tutorial you’ll love getting my emails. Sign up below.

Improving the first-time user experience in your Adalo app with smart visual onboarding prompts

Getting your users over the “suck threshold” sooner

You’ve worked hard to build a great app and have done a bunch of work to promote it. You’re getting signups but too many of your new users are fizzling out and leaving before they get their first win in your application. Kathy Sierra calls this getting over the suck threshold:

Image credit Kathy Sierra

You need to improve your first-time user experience but how do you do that? How do you help your users get over the suck threshold faster?

If your app is built in Adalo you can easily create a custom walkthrough overlay that hand-holds your new users through the steps necessary to get them their first win. This overlay will conditionally display custom visual cues to your users in sequence until they take the necessary actions that get them to the point where they’ve accomplished something that makes them want to come back.

What’s different about this approach

You’ve undoubtedly experienced one of those visual walkthroughs when first logging into a new software application.

It likely took the form of a tour that explained the gist of how to get started and maybe it was even interactive, but chances are it was a canned, one-time, linear sequence – essentially a slide show. The technique I’m about to teach you is better because instead of being a one-time canned tour, it’s a smart, persistent set of visual cues that handhold the users through a series of steps until they achieve their first win.

Why this matters

What is the impact of getting more of your users past the suck threshold early on? Well for starters:

  1. More engagement means less churn/attrition and a wider funnel.
  2. Every dollar you spend on advertising or hour you spend on organic traffic promotion yields more return.
  3. New user satisfaction improves and consequently…
  4. Referral rates on your application go up because your users are delighted with the experience.

Boom! For a few minutes of work this technique pays dividends indefinitely unkinking the hose with your new signups. So let’s dig into the nitty gritty of how it works.

How it works

The video below shows you first the front-end experience as a new user so you can see how it works:

And this video shows you the back-end of how to create this experience in Adalo using layers of elements with nested visibility rules:

Pretty cool, right? Try it out with your own app and see what it does to your new user engagement. Post any questions on this technique in a comment below.

This is my first post. I’m trying an experiment for the next month documenting a bunch of useful insights I’ve gleaned from having worked with various nocode tools and platforms for the past few years. If you want to get juicy tips like this one join my list below. And if you found value in this the greatest compliment you can pay is that of a referral or a social share. cheers