Scan & Pay
Pay for offline purchases at local businesses by scanning a QR code or an Amazon Smile code using the Amazon app

About Scan & Pay

‘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. Here, ‘offline purchases’ refers to a broad range of use cases like paying at local convenience stores, supermarkets, workplace cafeteria, restaurants, pharmacies, etc. to name a few.

Apart from this primary benefit of paying for offline purchases, Scan & Pay also enables an Amazon customer to pay for their Amazon delivery at doorstep by scanning the QR code on the box or even transfer money to another peer.

Core needs and problems

Based on an initial research by the marketing and research teams, the following core needs and problems were identified for both customers and merchants.

Design Directions

For this particular project, I looked at the customer side of the experience of paying at a local merchant. The following design direction were formed basis the understanding of the customer needs and problems that acted as guardrails during the design process.

Quickly pay and be on their way

Customers should be able to complete the payment in the least amount of time possible and continue doing what they were doing in their offline context.

Aid to avoid mistakes

Customers are often in a situation of divided attention in an offline scenario which could result in them committing mistakes. The design should aid them in avoiding mistakes like entering the wrong amount or not verifying the merchant that they’re paying.

Ease of access to repeat actions

Repeat actions like paying previously paid merchants should be easy to access as there are cases where the QR code may not be visible or reachable for the customer.

Embrace the offline context

The offline context that the customer is in may involve dealing with crowds, having to use the phone using just one hand, communicating payment success with the merchant, etc. The design will need to work harmoniously within this context that the customer is in.

Overall happy flow

In a happy case when the customer has enough money in their Amazon Pay balance, they can just scan the QR code at the merchant, enter the amount and hit Pay Now to complete the payment.

Customer scans the QR code
Customer enters the amount
Payment success state

Design decisions

The what and the why behind key design decisions

1. Ingress to Scan & Pay from the Amazon app gateway

What didn’t work
Amazon already had the visual scanner for searching products that also similarly would launch the phone camera. But realised early on that this did not have enough affordance towards a QR based scanner and that it was also more relevant to search in terms of information hierarchy than payments.

What works
The icon representing ‘Scan’ using the metaphor of a QR code that is pretty standard among other similar payment apps. This was further validated through a usability study.

2. Recently paid merchants on scanner

The problem
Customers often find themselves in situations where the QR code displayed is not accessible or visible to them due to other people standing in front of them or the QR code being too far away to reach. Typically these situations happen at places where people visit frequently like tea counters, workplace cafeterias, metro ticket counter, etc.

Recent scans for quicker payments
For customers who frequently visit a select number of merchants, the recent scans list helps them to quickly select any previously scanned merchant and continue paying. 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.

3. Renewed input experience

The problem
Customers paying for their offline purchases are in a situation of divided attention between their mobile screen and their physical context. But Amazon’s input elements were designed with guidelines for the online shopping experience that didn’t cater to these scenarios.

The renewed input experience
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.

Designed for zero error state
The interaction of entering the amount was limited to entering only numeric whole values that are below the regulatory limit of ₹10,000 for a single transaction.

4. Renewed success state experience

The problem
In an offline payment scenario, the success screen serves the purpose of communicating payment completion for both the customer as well as the merchant. Merchants often want to check that the screen being shown to them is not a screenshot of a previous transaction.

Animated success icon
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.

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.

Usability Testing

Usability tests were conducted with the prototype in 3 different cities with 12 participants. The research itself was conducted by the in house research team which I shadowed for all 12 participants.

Video showing how the prototype was used by one of the participants:

Learnings from the usability study

All participants were able to seamlessly use the prototype for the case of sufficient balance. But in the case where they had insufficient balance to complete the payment, there seemed to be a mental block of even trying to attempt the payment. Instead they tried to add balance first and then pay. While actually they could have hit Pay Now which would have anyway taken them to the add balance and pay flow.

Due to this mental block, we stopped showing the actual balance amount they had in their account on the enter amount screen in the final designs.

Scalable design for other payment methods

What are the other potential payment methods?
With the introduction of payment methods like UPI, customers can now also directly pay from their bank accounts instead of having to load balance first.

How will this scale?
Once a QR code is scanned, on the enter amount screen customers will be able to choose what they would want to pay with and proceed with the payment.

Further explorations

Fallback payment actions

The problem
Merchants whose QR codes have been damaged, removed or pasted over by others cannot receive payments from customers wanting to pay through the Amazon app.

Pay using phone number or show your barcode
Merchants can tell customers their mobile number and ask them to pay using it. In case of organized retail like supermarkets who have a barcode scanner integrated to their POS, they can ask customers to show their barcode and complete payment by scanning the barcode.

Modular cards for offers discovery

The opportunity
Customers frequently using Scan & Pay do not have any way to discover merchant offers nearby them.

Modular offers cards
A customer just browsing through the experience can select ‘Show offers’ to reveal various merchant offers nearby them.

A summary of more of my work at Amazon Pay

Send Money - Peer to Peer money transfers

Send Money uses UPI to enable customers to transfer money to their friends directly from one bank account to another using the Amazon app.

Amazon Pay dashboard

This was initially a self initiated project to bring all of Amazon Pay’s offerings under one page or dashboard so that customers could find everything payment related at one place on the Amazon India app. The proposals soon influenced the product roadmap and became the highest visited payments related page on Amazon.

Payment selection page for online merchants

The existing payment selection page on Amazon where a customer chooses the right payment method to pay for their order has multiple issues. This was a redesign of the payment selection experience to cater to these usability issues.

Reimagined Add Card experience

Adding a card on Amazon has multiple usability issues. This project looked at leveraging the metaphor of a physical credit card during the interaction of adding the card details.

Aggregated transaction history

Common questions that customers had related to their payments were ‘Where is my cashback?’, ‘Where is my refund?’, etc. The aggregated transaction history aims to help customers find this information as quickly as possible.

Back to projects