Scan & Pay Story
Rethink Paytm’s scan and pay interaction. I had dinner at a road side food truck and after that when I was paying through paytm this interaction took my attention. So thought to give it a shot 🙂
July 2019
Self Thought
3 Days
Pen & Paper, Adobe XD, Adobe Photoshop
Current version
Behaviour analysis
User’s behaviour is a root cause for unconscious actions performed. So without jump right in to a project I game sometime to understand a user. Behviour plays major role when you are designing something that user about to use on very frequent basis.
User about to use scan and pay interaction for numbers of times in a day. By doing so their first attemp to start a journey is to catch a QR code and try to fit that with camera in to a phone screen. This is a the only major task for them.
User’s need a clear attention of camera visual at this point of time. Once they catch it ideally next action they are expecting to do on app is enter the amount that needs to pay. Here app should not really ask user to do any action and that will lead a user to enter particular amount.
Because it is an expectation that drives user’s mind. So app interaction should also react that way only.
Wireframing ideas
The intuitiveness of the app depends only on demand and supply of expectations. If that is managed well then I think the job is done well.
Here I had tried to put all the possible interactions that can help to make it more intuitive and interesting to users. Out of many versions, you need to choose one is required a huge thought process. You need to cover up use cases and ease of use in each.
Sometimes it is a phase where you need to avoid a minority of the audience for a bigger impact. That’s why it is tough.
Scanning Screen
- Camera is taking a full screen and just widgets are on the visual. As per majority of transactions are being done y scanning a QR. So emphasis scan by camera more on visual.
- Good readability with minimum space occupying for previously paid payee with
- All scanning related actions button are clubbed together just below the scanning area for quick reach by thumb
- Clean and simple UI
- A loading animation will pops up if app is finding a QR related to any person or a merchant
Payee Screen
- After QR scan a particular person or a merchant for payment app should show user a screen where they can enter amount and hit the pay button
- There is a loading animation at the very bottom which will lead to this drawer when app find some person or merchant based on QR.
- The reason is when users are trying to consume information they are hesitated often when a book or a UI shows them entire new screen to do a small task. Again they need to put efforts to understand stuff and also need to make sure that nothing is getting in to wrong place.
- To solve this problem I thought of this approach where user simple scan a QR and when app find something related a bottom drawer just opens up till middle of the screen. So that way user don’t feel something entirely new is there understand first adn then do payment stuff.
- Hre in the screen users can also relate payee by their registered image whether there is a person or a merchant.
Success Screen
- After completion of entering an amount to pay process where user hit a pay securely button they remain on the same drawer and a half screen drawer takes a full screen but not entirely.
- There they see that a payment is done to the particular payee and they can rate that transaction and avail promotional offer based on the payment they have done.
- Paytm has started this promotional idea very long back and that leads take user’s attention when they are paing. Not after they get done.
- Users usually forget about what they need to do to avail the particular offer. So I thought to put it clear and better over here so they don’e forget and this offer section also shows how much efforts remained to get done.
Final Interaction
