top of page

QR HoReCa Menu

QR Menu is a kind of web app which appears after scanning a QR code. It is a web app made for a HoReCa ( Hotel Restaurant Cafe) menu card's but in this case it is designed for cafe which shows different categories of food items which are present in traditional menu card.

Home.png
tea.png

Project Overview

The Product : QR Menu is a kind of web app which appears after scanning a QR code. It is a web app made for a HoReCa ( Hotel Restaurant Cafe) menu card's but in this case it is designed for cafe which shows different categories of food items which are present in traditional menu card.

It is designed for a cafe where QR code is placed on each table so that everyone on the table can see the menu QR menu by simply scanning the QR code individually instead of single traditional menu card.

It is useful since single menu card might take time to arrive on customers table from another table. If it arrives then questions arise what is the condition of that menu card . While in the case of QR menu card every person on the table is able to see the menu card at one time so the hotel could get more chance of getting more orders from the customers. Also it will help the HoReCa owners to change the price of the products on the fly as they want.

Web App Link (Open on Mobile): https://cafe-nirvana-menu.vercel.app/
 

Project Duration : January 2023 to February 2023.

The Problem : single In any HoReCa (Hotel, Restaurant, Cafe) menu card might take time to arrive on customers table from another table.

The Goal : To help users to select florist near them as per their choice and order flowers as per their need.

My Role & Responsibilities : Paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

User Research

Wireframes

Paper Wireframes
Taking the time to draw the iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain point. For the main two screens, I prioritized a quick and easy design for users understanding.

Paper Wireframes
Paper wireframes for all screens 

IMG20220109192807.jpg
IMG20220109192959.jpg

Digital Wireframes

Frame 9 (2).png
IMG20230225163916.jpg

Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of selecting and viewing details of item.

Screenshot (59).png

High-Fidelity Prototype
The normal  high-fidelity prototype presented cleaner user flows to select different items through categories and to view sub-items inside it.

Screenshot (60).png

Mockups

Home (1).png
search 1.png
tea (1).png

All Mockups

Sticker Sheet

Stickersheet.png
bottom of page