This screen is a full camera view with blue bar used to scan the barcode of any given product.
Once you scan an item, the scanned product view will pop up that allows you to edit the amount of products you want and confirm or cancel.
The checkout button will redirect you to the cart checkout view where you can then pay.
The “$10.99” box, to the right of the checkout button, keeps track of the total cost of your cart and displays it.
Scanned Product View
Once a product is scanned this screen will appear
This screen is used to confirm the item you intend to add to your cart with the confirm button located below the item quantity
Item amounts can be altered using the corresponding +/- buttons located on either side of the item quantity
You can decide not to add the item to your cart by pressing the down arrow button located above the item name
Cart Checkout View
This view will be displayed to the user when they are preparing to pay for the items they have scanned or are just reviewing what has been scanned. The view will be broken into two subsections:
List View: this view will contain a list of items in the cart, separated into “cards.” Each card will contain the item’s description, price, and quantity.
Pay View: this view will contain the sum total of items in the cart, along with payment options. For the time-being, we will support google pay and apple apple for checkout.
Completed Checkout View
This view is shown to the user when they have successfully paid for their items
The user can enter their phone number and or email for a text/email receipt
View Flow
Color Scheme
#FAFAFA - clickable buttons
#E0E0E0 - widget / card backgrounds
#000000 - text
User Experience Flow
Scan a QR code at the store entrance to open the EZBag web app
Enable camera permissions
Scan any product's barcode (EAN, UPC) with my mobile phone camera
Automatically present scanned product card on screen
Use plus/minus buttons to increase/decrease the item quantity on the item
Press down arrow button to go back to scanner view
Press the "Confirm" button to add the button to cart
Press "Checkout" button open cart view when pressing cart button in top right
Checkout via Apple Pay OR checkout via Google Pay
Upon payment show the checked out view, displaying the customers unique cart number
Display input form for customer email and/or phone number to send digital receipt
Press the "Send" button to send the receipt to email/phone
