Tap To Pay
Tap-to-pay system using NFC technology may be integrated into the Myanmar Net app.This allows quick transactions at various shops using Myanmar Net smart cards. Users can simply tap their card on another user's phone for transactions.
Lead UX/UI designer
Fintech Mobile Payments Digital Wallets Contactless Payments
Figma
Illustrator
Photoshop
After effect
LottieFiles
Google slides
Google survey form
2 months
My objective is to delve into tap technology, acquaint myself thoroughly with its functionalities, and craft a comprehensive UX/UI proposal that seamlessly integrates tap features into our application. This entails understanding the intricacies of tap technology, exploring its potential for enhancing user experiences, and developing an intuitive interface that simplifies and optimizes interactions for our users when utilizing this technology within our app.
Maximum transaction limitation , Authorized merchant restrictions ,Absence of loss recovery support
“How might we streamline the user experience while seamlessly integrating a tap-to-pay system into the existing Myanmar Net app?”
Design process
Use Case : Checking the card information and transaction history
User need to tap the “Card” icon from the home screen.
Use Case : Accepting card payments through Myanmar Net app
Card Owner's Scenario:
Visit the shop.
Confirm the amount and tap the card on the back of the shop owner's phone to complete payment.
Shop Owner's Scenario:
Open the Myanmar Net app and enter the received amount.
Tap the customer’s card on the back of the phone to process the payment.
Verify the transaction details on the success screen.
Use Case : Topping Up an MN Card at Resellers or Stores
Card Owner’s Scenario:
Request a Myanmar Net card top-up from the reseller.
Specify the top-up amount and tap the card on the back of the reseller’s phone.
Pay in cash and check the updated balance using the Myanmar Net app.
Reseller’s Scenario:
Open the Myanmar Net app and select 'Send.'
Tap the card on the back of the phone.
Enter the transfer amount and wallet password for confirmation.
Show the success screen to the card owner.
Use Case : Connecting with a card reader for phones without NFC
For users whose phones don't support NFC technology, they need to connect with a card reader.
The app will automatically display an alert box prompting users to connect with a card reader when they use tap-related services.
The company will provide card readers to merchants and resellers after confirming their phone conditions.
Tap animation
Tap animations are crafted using Illustrator and After Effects, then exported as a Json file through Lottiefiles.
The app will seamlessly switch to the 'tap card to reader' animation when detecting that users' phones lack NFC technology.
Reflection
As a designer, I was really excited to be part of this project and explore the fascinating world of tap technology. Unfortunately, the company decided not to go ahead with the project for various reasons. If it does launch in the future, my next step would involve understanding real users, gathering feedback, and improving the product's user interface and experience.