Product Design : Supermarket Checkout App
- IoanaT
- Dec 10, 2021
- 2 min read
Idea
For retail businesses, who would like to enable customers to spend less time in the supermarket, My Supermarket Checkout App in an easy-to-use checkout app.
Unlike Skip Checkout or Self Checkout, My Supermarket Checkout App enables customers to shop at their nearby supermarkets, avoid the queues by scanning their products using their mobile phone and making payments through integrated e-payment options, show their active promotions, save and apply coupons.
Personas
To illustrate potential users who might be interested into using the app, I have created two Personas. Creating personas helps the Product Manager and UX Designer to understand the user's needs, experiences and benefits from using the app.
I have created two personas: Jay - a busy introvert who likes shopping at the nearby supermarket and Nora - a busy mum who likes quick shopping for qualitative products.


Wireframes
Homepage

The user enters the application and the first thing they see is the location where they are about to shop - the nearby supermarket.
A list of active promotions is displayed and to see all of them, the user clicks View all.
To start scanning the products, the user clicks on the barcode symbol.
Start Shopping

The user scans the product barcode and the number of items in the My cart section increases with 1. The price of the product is displayed automatically after scanning the barcode.
My Cart

To view cart details, the user clicks the V icon. A list of their scanned products along with their price displays. The user can modify the products quantity or delete one of the products. The total amount to pay is displayed after changes.
To proceed to payment, the user has the following options: credit card (with the possibility to use the one saved in their account), scan to pay (to scan a QR code) and cash (in case one of the options fails).
Payment confirmation

Once the payment has been confirmed, a QR code is displayed. The user needs to scan the QR code to leave the shop. The user can now view or download their bill.
Notes:
This is a fictional design produced by myself, any resemblance to actual applications is purely coincidental.
The views and opinions expressed here do not reflect those of my employer or any other 3rd party I might associate with.
Comments