‘Scan & Pay’ is a way for customers to use Amazon Pay for their offline purchases by simply scanning the smile code or QR code at the merchant.
Due to the unique nature of the offline customer context, the existing Amazon's UI patterns did not seem to provide the optimal customer experience. The design hence included redesigning some of the patterns like text input while entering the amount to be paid and the payment success state.
Successful payment flow
Renewed input experience
Customers paying for their offline purchases are in a situation of divided attention between their mobile screen and their physical context. For this, a new input experience was designed that prominently displays the merchant being paid to as well as puts the emphasis on the amount being paid. This new input experience has also been designed to be above the keyboard fold in order for customers to be able to enter the amount and proceed without having to dismiss the keyboard.
Rethinking the success state
In an offline payment scenario, the success screen serves the purpose of communicating payment completion for both the customer as well as the merchant. The animated success icon helps the merchant verify it as a live transaction while the amount and merchant name are designed to stand out prominently for easy readability.
Easy access to recently scanned merchants
The offline payment context also poses unique challenges for customers like the smile code being inaccessible in a crowded environment. The recent scans was designed to be easily accessible right from the scanner screen itself for customers to be able to trigger a payment to a recently scanned merchant.
Prototype using Origami Studio
The prototype was used to validate the designs with real customers across 3 different cities in India. To simulate a successful QR code scan, a 4 second timer was used on the device camera screen such that when the user pointed it to a physical QR it would appear to have detected the QR to the user.
Modular cards for a scalable experience