Self-Serving POS system

Customer View

Worker's View

Design and develop a user-friendly Café POS System.

Tools

HTML

CSS

JavaScript

POS system is easy to understand

POS system will try to have the least amount of moving systems.

Have a minimal amount of buttons

References

Untitled

Is it feasable?

Yes, because we can code the elements and do it in a minimalistic way.

We also have references of popular coffee POS systems that we can look up to.

Why should we design and develop?

So that it can be easy for the end-user to use our POS system.

All Modules

How can admin access the POS system?

Admin Button

User Button

Item 1

Item 3

Item 4

Cart information

Pay now

Item 2

Queuing Module

Reduce customer lines and waiting times at the cafe

Enhance operational efficiency and customer satisfaction.

Ordering Module

Payment Module

Eliminate the manual order transcription and miscommunication.

Integrate various payment methods into the system.

Analytics Module

Find out how many users are using the POS system.

Design and Develop a user-friendly Cafe POS system.

The Process for the POS System

Step 1: If the POS system is opened for the first time, it will ask if the user is either admin or customer.

Customer Option

Step 2: If customer option was chosen, the user will be shown the ordering page of the POS System.

Step 3: Person clicks the items to add it to the cart.

Step 3: After they are satisfied, the person can then click finish order.

Step 4: Next, the POS system displays the orders in the cart again.
The “Customer” can either confirm the order or cancel the order.

Step 5: Next, the POS System will ask if they want to pay using their top-up account or through cash.

Step 6 (Normal Way): If cash was chosen, the customer will be receiving a code, and they will need to pay the cashier within 1 hour.

Order Status Phases:

  1. Initiated
  2. Processing
  3. Completed

Cancelled

Step 4: The POS system will create a receipt for the person.


Since we can't use a printer to print the receipt, the customer will copy write down their code either through their phone (like note-taking apps) or through paper.

Person has:

  • receipt

Step 5: If the person wants their meals, they would have to hold this receipt and pay it to the cashier

Database Transmit

Step 6: Cashier waits patiently for the customer.

Step 7: Cashier presents Receipt to Customer.


"Customer" will say their payment code to "Cashier", the "Cashier" will type it down the code.

Legend:

Blue is the progress of customer

Red is what the customer has during that process.

Purple are database processes.

Create a row in the database "Order_History".

Person has:

  • nothing

Order Receipt Created: {Created Time}

List of Orders: {Links to another database}

Payment Amount: {Payment Amount}

Step 6 (Optional): If Top-Up Option was chosen, the “Customer” will need to authenticate using a code.


Customer types their email. Then they will email the OTP code to customer.

Every hour, the database will check if the order is paid. If not paid, they will set the payment status to cancelled.

Email Code to Customer

Customer enters code to system

System checks if typed code = code to database.

True

False

Code in database is erased.

Step 7: The POS System will email that same code to the typed email.

Person has:

  • nothing

Order Status: Processing

Admin Option

Step 2: If Admin Option was chosen, the user will be asked for the Admin “Username” and “Password”.

Step 3: User Inputs Admin Username and Password.

True

False

It will say at the bottom of the text that either the admin "username or password is incorrect".

Step 4: User gets access to Admin Panel

Step 3 (Optional): User goes back because they don't want admin panel.

Payment Status: (Default) = Not Paid

In here they can see the:

Analytics

Orders

Available Items

User can Click on the "Sign up for an account".

Required Details:

Email

Password

click to edit

Check if email is part of the User_Account Table
This is to ensure that the user won't type any email.

Result > 0

Send Code to Email

Result = 0

ERROR: "That email is not part of any account."

Step 8: If the email is received by the "customer", "customer" will type the code to authenticate that they own the account.

After the user submits the code to the system. It will then check if that code is equal to the OTP code.

SELECT email WHERE email = userinput_email

Add Code to Database

True

Balance deducted