Iana – Online Restaurant Reservation System iOS and Android

Function: Iana is a turnkey app solution for creating orders and reservations for restaurants and bars.

Context: UI screens will look modern on both iPhone and Android gadgets, interface elements can be easily modified in Figma, Adobe XD and Sketch.

Subject matter: This app has been tested by 500,000 users in restaurants and pubs in London. More than 95% positive feedback from real users who have successfully committed to a restaurant.

Concept: One of the concepts of the app is to move the restaurant menu to a mobile app. For my list, I chose a calm color palette, in which the main task is to introduce the user to the assortment of the restaurant.

User interface details for online restaurant booking

The interface design uses Inter font, with a user-friendly hierarchy. Home in the hierarchy of elements in the selection of categories. This component has horizontal scrolling and it is convenient for the restaurant, which has numerous menus with breakfasts, lunches, drinks, desserts, etc. Within the dish, there is also an option to select additional toppings, applied using the interface element “checkbox”. Interface element “plus” adds food to the cart. The order details screen has basic input fields such as name, email, and cell phone. It is easy to add additional input fields as well, such as a Google ID button. The cart screen replicates the elements of the main menu and below-added items from the restaurant menu or cart cleaning element. You can also change the item in the cart to add toppings. Then you can leave a note in the cart for chefs, for example, you can add in the input field a wish “remove salt and spices”. On the payment screen, you’ll see a strict hierarchy of payment choices. Designed two types of payment, such as Apple Pay and Credit Card. After a successful payment, the order goes to work and the performer starts preparing it. The user gets an order number in the center of the screen, which they will need to get their order. The app uses a mint color, which you can easily change to another. You can also try the gradient library, which is great for designing the main elements: buttons, checkboxes, active lists.