COLLEGE PROJECT

DINE AR

Designed and developed an AR application to get to know about how the food looks and compare its size.

Prototype link

View prototype LIVE (View on Mobile)

01

Problem statement

We all have been to different kinds of restaurants. Everytime we visit a new one the menu might get confusing in terms of the portion/ quantity of the food they would serve.

Generally, a menu would have quantities like - ½ plate, 4 pieces, 3 nos, but it is hard for us to visualise how much the half plate or how big the 4 pieces would be. This often leads to wastage of food or the customer still remains hungry because of the longer serving cycle.

We are trying to solve the problem with the use of Augmented Reality to help customers better visualise the quantity of the food of their plates/ tables.

02

User flow

03

Features

Since it was a redesign project, I focused majorly on the simplicity of interface and the microinteractions that can be utilised to simplify information presentation to new visitors on the website.

#1

Comparison: Compare the sizes of same items or different

#2

Waiting Time: Would know expected waiting time for the order

#3

Data about food: E.g, Calories, spiciness, making time.

#4

Related Dishes: In taste, category, Quantity

#5

Waiting Time: Expected waiting time for the order

#6

Customization: would be able to create custom orders easily

04

Steps

Here are some of the steps how a person can get to know about how to use this service.

Scan QR code
The user scans a QR code or type the link which takes them to the DINE-AR webpage

Open Website
The website loads with the list of menu items to visualise in AR

View menu in AR on website
The user can browse through the menu items.

Scan surface
The user tap to enter AR mode to visualise the food item.

Show food in AR
The user can then view the food item n Augmented Reality

07

Final design

For the final design and implementation our team designed the prototype of Adobe Xd. We made sure that the schedule is easy to navigate and gives adequate amount of information. Programming of this schedule was again split among the team mates and was completed in 2 weeks of time in HTML, CSS and Javascipt. Some of the features for the final design are shown below.

01

Home
In here we can the landing page. When clicked upon enter the menu, the person is taken into AR mode where he/she can select whichever food the person wishes to visualise. For placement there is white circle which appears. When tapped on it the object is placed above the circle.

02

Food details
Along the food we can also see the amount of calories, fat and other values right next to AR food item. This helps the person to know these values without looking them up elsewhere

03

Size Comparison
There is size comparison visualization available for specific foods. For example, we have 3 sizes for pizza.

04

Suggested dishes
For some items suggestions are also provided. But they are provided at a farther distance so as to avoid confusion. For example, brownie can be suggested with coffee/tea.

06

Future Scope

Make models for more food items

Realtime data about food status

Option to customize food in AR

Currently only accessible on android, try for iOS

Designed and Developed with by me © 2021