Family Of Eateries

Mobile Based Web Application

Tools Used

Project Overview

Family of Eateries is a restaurant franchise mobile application of different restaurants in the chain. In total, it has three

– Ceviche – Fine dining establishment serving multi-course gourmet meals and an upscale dining atmosphere

– Five Vines – Italian restaurant serving Mediterranean cuisine with fine wines

– Crispy’s – Fast food establishment serving with quick-service dishes

This project was focused on creating a prototype app that would enable a user to select any of the three restaurants and access its general information, view its nightly specials, and book a reservation on visiting any of the restaurants for quick service.

Color Scheme

The Objective

To create a logo that represents the brand identity of Family of Eateries and its three restaurants. Later, to develop a mobile app that allows users to access restaurant information and make reservations with ease.

THE PROCESS

Planning

The project began with planning and drawing to get all the ideas organised and working simultaneously on the same. During this step, research was quite beneficial in assisting with the logos for each restaurant.

The colour scheme utilised for the logos and company represents the type of cuisine served. All the logos were created with a similar round format to demonstrate a little symmetry as they are affiliated with a single chain of family diners.

Designing

The main layout of the mobile application was built in Adobe XD so that when the app was finished, the movements and transitions could be planned and tested before the coding step. A short loading layout was also added with the ‘Family of Eateries’ logo which is to appear once the user accesses the app.

Developing

Then appears the restaurant selection page of the app which allows the user to go into the restaurant of their choice. Any restaurant can be selected and then the main information page will appear specific to the restaurant theme. There is a ribbon below on the screen which allow user to access different options like Home, Specials and Reserve. ‘Home’ button allows user to go back to homepage of a particular restaurant. In ‘Specials’, users can read the nightly special cuisines for each day of the whole week specific to each restaurant. By using ‘Reserve’ option, the user can make reservation in the selected restaurant based on date, time, and number of guests in their parties. To improve user experience, all restaurant sites will use the same hamburger menu navigation which takes the user back to restaurant selection screen.

The final stage was the creation of an app for mobile devices using HTML/CSS and JavaScript. Because the app was built specifically for mobile devices, it will have a mobile size overlay when visited on a desktop or tablet.

Developing

Then appears the restaurant selection page of the app which allows the user to go into the restaurant of their choice. Any restaurant can be selected and then the main information page will appear specific to the restaurant theme. There is a ribbon below on the screen which allow user to access different options like Home, Specials and Reserve. ‘Home’ button allows user to go back to homepage of a particular restaurant. In ‘Specials’, users can read the nightly special cuisines for each day of the whole week specific to each restaurant. By using ‘Reserve’ option, the user can make reservation in the selected restaurant based on date, time, and number of guests in their parties. To improve user experience, all restaurant sites will use the same hamburger menu navigation which takes the user back to restaurant selection screen.

The final stage was the creation of an app for mobile devices using HTML/CSS and JavaScript. Because the app was built specifically for mobile devices, it will have a mobile size overlay when visited on a desktop or tablet.

Deliverable

The goal of this project was to create a simply accessible design and working application for viewing various restaurants menus and book reservations. Finally, all the steps came together to create a successful app. This interactive software demonstrated skills from many different fields of design and media. You can access the final app prototype to have a clear understanding.