Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Introduction to Adalo
An introduction to the Adalo app maker website, showing the 3 key features that are needed to build an app: screens, components and collections.
Unit 3 - Testing
Lesson 3 – Iterative design
In this lesson you will start to think about how to improve the design of your app, with small improvements and testing.
Iterative design is a technique for making apps that has become popular more recently. Modern apps allow you to update them any time, and to release these updates to users. This means that you can add features and fix errors any time.
Finding ways to make your app easier to use, and to make it look more pleasing, is an important part of development.
First, take a look at the branding section of your app in Adalo. Try changing the colours of your app slightly to make sure it feels good to use. If you haven’t already, try using coolors.io to create a color palette, and use those colours as your primary and secondary colors.
Next, we will fix some of the errors we found in the last lesson:
1. Nothing happens when you click a restaurant in the list
We want to add a feature that will show all the details about a restaurant when you click one in the list. To do this, we will link to a “Modal” screen. This is a popup screen that shows in front of the current page.
Go to the list of Restaurants on the Items screen. On the left hand menu, under Advanced Options, click “Add Action”. Select “Link”, then click on “New Screen”. Find the “Modal” option in the Create section and add the name “Restaurant Details” at the top. Click Create Screen.
You will now have an extra screen that contains the modal popup. Edit that screen so that it displays all the information about a restaurant. You will have to use magic text and an image component. Adalo automatically adds buttons that bring you back to the last screen.
2. You can’t get back to the home page from the restaurant page
We can add a Home page button on any page. Go to the Restaurants page, add a button component and edit the text to say Home. Add an action to Link to the Home page.
3. You can’t log out
We can add a log out button to any page.
Add a button component and edit the text to say Log Out. Add two actions to the button:
- More > User login > Log out
- Link to Login screen, so that the user is
brought back to the login screen when
they log out
Congratulations on completing this course!
You now have a working prototype app that has a login and features that allow users to save data. You have also started to think about iteratively improving your app.
You can move straight onto the next course to learn about adding more features to your app. Or you can spend some time editing this app to get used to the Adalo controls.
