Streamline Sales - Customer Frontend

Overview

Description

Objective 1: We want to create a system for customers at take out restaurants (order & pick up at counter) to order food by

  1. Scanning a QR code and opening up a responsive mobile friendly web app
  2. Picking desired items on the menu and reviewing the order
  3. Paying via Clover or Stripe (Apple Pay)

Objective 2: We want to create a system for the owners of these take out restaurants to modify menu and view current orders.

  1. Restaurant owner should be able to add new menu items (most likely via computer one time/infrequently)
  2. Before every work day, the restaurant owner should be able to select what menu items are available for the day (most likely via computer once a day)
  3. During the work day, the restaurant owner and other employees should be able to view current orders (on a tablet). There should be a button to “complete” the order (make it disappear) and provide more screen space to show the next order.

Current Menu Setup

Combo Menu

Untitled

In our customer view of the menu, the numbers (1-9) would be automatically set by our system

Singles & Drinks

Untitled


Functionalities

Admin Dashboard

Login Page

The restaurant owner should be able to log into the web application via email & password. Do not worry about forgetting password or anything like that.

Menu View

The “Menu View” is for the restaurant owner to add/edit menu items and change the menu on a daily basis (likely done on a computer). The owner will also be on the menu view occasionally throughout the work day to change visibility of a menu item if they run out of ingredients to create a menu item (likely done on a tablet).

A. The restaurant owner should be able to

  • Create menu items and include information on attributes mentioned in Part C
  • View current menu items and their attributes mention in Part C
  • Edit any current menu item’s attributes
  • Previewing the menu as seen on the customer’s mobile device
  • Search menu items by title
    • Not explicitly mentioned as a requirement by the restaurant owner, but would be useful as the restaurant owner would be browsing through a long list (think 30+ menu items) to choose what to make available daily

B. Menu items are separated into the following 3 categories:

  • Combo
    • Combo items are split up into either “Meats” or “Vegetables” and can be combined with any other combo items in the following specific configurations to make a meal.
    • Configurations: 1 meat 2 vegetable for $11.99, 2 meat 1 vegetable $12.99, 2 meat 2 vegetable for $13.99, or 3 meats for $13.99
    • Every configuration includes a rice bowl.
    • Link to PDF of current combo menu items for reference: https://cdn.discordapp.com/attachments/952690982212739215/954414884555218944/Copy_of_.pdf
  • Single - Single items are a single meal that can be bought by themselves
  • Drinks - Functionally the same thing as “Single Items” but should be separated into their own section

C. Menu items should contain the following attributes

  • combos - the combos that consider the menu item as a combo option
    • ignore for now
  • Visibility - Boolean, whether it is visible on the menu
  • Price - Price of the meal
  • Title - Name of the menu item
    • We need to show this information in multiple languages: English, French, Chinese in the future
    • For now we can keep all 3 languages in one line, example:
      • “Double-Cooked Pork / Porc Cuit Deux Fois / 回鍋肉”
  • Type (only for Combo items) - Either “Meat” or “Vegetable”
  • Image - Image of the meal
  • Optional: Can be ignored for now — I don’t think the restaurant owner has descriptions to upload yet based off of the spreadsheet of menu item information that was provided earlier
    • Description - Short description of the item (and would probably include a short list of ingredients)

Order View

The” Order View” allows the restaurant owner view a list of orders submitted by Customers in submission time order (recent is first).

A. Each Order Component should contain the following pieces

  • Name of the Customer
  • List of items they want to order
    • Name of Menu item
    • Menu item number (automatically generated by system)
  • Button to “complete” the order (and make it disappear from view so the next order shows up)
    • UX Note: Worried that restaurant employees will accidentally press the “complete” button and the order will disappear and the employees are left not knowing what to make. But we also don’t want it to be so difficult to “compete” the order (for example by making the user confirm by clicking 2 buttons) such that it is annoying since the employees will be doing this very frequently.

Customer Mobile

Browse Menu Items

The Customer should be able to browse menu items of different categories (Combo items, single items, or drinks). There should be a button to proceed to order in order move on to the “Review Order” page.

A. Each menu item should include

  • Category - “Combo”, “Single”, “Drink”
  • Type (if Combo item) - “Meat” or “Vegetable”
  • Cost
  • Image
  • Menu item number (automatically generated by system)
  • “Add to Order” button

B. Details on Customer selecting Combos

  • If selecting Combo item, restrict the customer from making an order unless selecting a valid configuration.
  • Configurations: 1 meat 2 vegetable for $11.99, 2 meat 1 vegetable $12.99, 2 meat 2 vegetable for $13.99, or 3 meats for $13.99
  • Indicate to the customer somewhere the cost of each configuration

Review Order

The customer should be able to review the order before paying. There should be a summary of items ordered, each items costs, and the cost of sales tax (this is necessary right?). There should be some method of removing items from the order. There should be a button to go back to “Browse Menu Items” and another button to go to “Pay”.

Pay

The Customer should be able to pay for their order via Clover or Stripe (Apple Pay)

A. The Customer should be able to choose their method of payment

B. The Customer should be able to input any information necessary to make the necessary payment (as required from the API) and then make the payment

  • If possible, provide option to email customer the receipt as a confirmation