Restaurant Food Ordering

Product Design • Front-End Development • University Project

The challenge

This group assignment was for the module, User Interface Programming & Graphics, during my Bachelors Degree in Computer Science at Taylor's University. The purpose of this assignment was to design, implement, and evaluate a user interface.

My team and I decided to create a restaurant website whereby user can learn more about the restaurant, order food online as well as make reservations. We researched, designed, coded and conducted usability tests within 3 weeks.

Timeline

Nov 2017, 3 weeks

Team

Farhana Islam
Dalia Abdulkareem Shafiq
Oliver Sim

Role

Research, wireframing, front-end development, usability testing

Module

User Interface Programming & Graphics

Tools

Visual Studio

Languages

Bootstrap, CSS, HTML, JavaScript

Week 1: Research & Design

Given the short turnaround, we conducted quick research on restaurant websites and food ordering systems to familiarize ourselves with the domain. We went about it by visiting Malaysian restaurant websites as well as ordering food via FoodPanda to understand the online food ordering process.

After our research, I created wireframes of a few screens as well as the information architecture for the website. We decided on a modern and minimal visual design for ease of development.

Week 2: Coding a prototype from scratch

One of my team mates and I coded the website using Bootstrap as the base design system to ensure that the website is fully mobile responsive. We used to JavaScript to provide some basic functionality to the website and to help mimic an actual food ordering system. The coding was done on Visual Design Studio and it was quite exciting to see our concepts come to life while coding.

Project highlights

Homepage

The homepage acts as an introduction to the users of what the website has to offer. A carousel is placed on top of the page to encourage users to either reserve a table or order food online.

A menu section is also included with some of the restaurant's special dishes and if users are interested, they can choose to view the full menu as well as order food.

A testimonials section is placed at the end to help build customer trust. The testimonials' source is also provided (Google) to provide credibility to the reviews.

Project highlights

Order food / Menu

The main menu serves as a page whereby users can simply browse through the food offerings and order food if they desire.

Users can click on each food item to learn more about it before adding the food to cart. Menu sections are provided for ease of navigation, so that users can quickly jump to the section of their interest.

Project highlights

Checkout

Checkout process steps are shown on top to provide users with an overview of the overall flow. Only three checkout steps are included which are delivery, payment and order review for a quick checkout process.

Only essential form fields required for delivery are shown by default to avoid overwhelming users. Delivery options are presented with the estimated delivery time and cost.

An order summary is provided throughout the checkout so that users can confirm and refer to important information such as product and pricing information, shipping cost, etc.

Project highlights

Order tracking

After an order is placed, user is taken to the order tracking page where user can see the full order details as well as track their order status and the location of rider in real-time. There are four delivery events:

Processing ⏳
In the kitchen 🍳
Out for delivery 🛵
Delivered ✅

Once order is out for delivery, user will also be able to view the rider's vehicle registration number in addition to their contact number so that users can easiliy communicate with the rider

Project highlights

Reservation

A simple form is provided where users can make a reservation on the date and time of their choosing. Dates are presented upfront as mutually exclusive options. Dates on which restaurants are closed and/or fully booked are shown but kept disabled in order to fully inform users about reservation availability. Time slots are also presented in a similar manner.

Lastly, user must select the number of guests and enter contact details so that the restaurant can contact them.

Week 3: Usability test & paper

My team mates and I ran usability tests to test if the website was usable and useful. The usability tests helped us gain valuable insight into how users interact with our website as well as key areas of improvement.

Lastly, we wrote up a paper regarding our initial research, the webiste development and usability test findings.