Using Web Augmented Reality to Add Visual Interactions to Contactless Restaurant Menus in Response to COVID-19

Master's Research Project by Eileen Xue
Ryerson FCAD logo MDM logo
Businesses that are slow to adapt to the digital world risk getting left behind.

Project Summary

My research explores how restaurants can adopt emerging technologies such as web augmented reality (WebAR) to improve the customer’s ordering experience during the reopening phases of the economy from COVID-19 and beyond.

While many restaurants are starting to reopen, they had to reduce their offerings and provide single-use paper menus or QR codes for customers to scan and view their online menu. Standard physical menus are often engineered to influence customer purchases through clever content placement, visuals and other psychological tactics that drive up a restaurant’s profitability. How can these strategies be applied to the new dining experience?

This project demonstrates how WebAR can be used in three different ways to enhance contactless menus to reestablish trust and build purchase confidence for customers. WebAR reduces the barriers for restaurants to create augmented experiences and makes it accessible for customers to interact with AR without the need to download apps. By observing the resiliency efforts of restaurants and technology adoption during the pandemic, this project will also discuss trends and behaviours in the hospitality industry post-COVID.

man wearing a mask with beer and phone in hands

1. Coaster to Drink Menu

A custom coaster was created for a fictional restaurant that also acts as the access point to the contactless menu and interactive web augmented experience. The process is seamless as it all happens on the same website and makes ordering more engaging and memorable.

sandwich in augmented reality

2. 3D Food Menu

The aesthetics of desserts is always fun to capture and to eat! A web based menu was created for a fictional bakery that displays 3D models of food that can also be viewed in augmented reality using native functionalities of the latest smartphones.

3. Interactive Food Promo

Food advertisements are powerful for long term brand awareness. A fictional burger joint and promotion was created to entice customers to test out the augmented experience to learn more about the company and their products in exchange for an incentive.

1. Coaster to Drink Menu

Adobe XD Prototype

coaster menu adobe XD prototype

Click the image to interact with the initial prototype on Adobe XD

Final Prototype

Portal+ Drink Menu

Try it yourself!

Portal+ Drink Menu
  1. Scan the coaster's QR code with your mobile device
  2. Browse the online drink menu and then activate the augmented reality experience
  3. Allow the browser to access your camera
  4. Use the same coaster as the image target and to anchor the drinks. This works best if the coaster is printed out and have the correct orientation.
  5. Use the arrow buttons to browse the virtual drink collection

Note: It's still a work in progress so some functionalities in this prototype may not be available.

Video Walkthrough

2. 3D Food Menu

Final Prototype

bakery menu overview

Try it yourself!

Bakery Menu
  1. Browse the selection of food items on the website menu
  2. Interact with the food directly in the browser, you can scale, rotate and see the background environment
  3. Trigger the AR icon to see it in front of you with realistic scale of the food (only works for compatible smartphones)
  4. Experiment with the default mobile AR viewers.

Video Walkthrough

3. Interactive Food Promo

Final Prototype

burger menu overview

Try it yourself!

Burger Menu
  1. Scan the QR code that's found on the poster or type in this link: bit.ly/ucburger
  2. Use the original burger posted as the image target to anchor your scene
  3. There are two versions of this experience:
    • In "Version 1" you can interact with the animated burger model and learn about where the ingredients are from in Canada
    • In "Version 2" you can see a video overlay ad on top of the existing poster and receive the incentive after the video finishes
  4. In both experiences, the user will receive a link to get a free coupon for the "Buy One, Get One Free Burger" promotion

Version 1: Video Walkthrough

Version 2: Interactive Bus Shelter Display

Animated Burger Ad