NFC PAyment for Bus transportation
Product Design | Research | Design Systems
2020 Jun - 2020 Dec
Overview
The U Money Bus Card is the sole payment method for Ulaanbaatar buses, but limited charging stations and restrictive hours pose challenges. In response, Hipay Wallet App partnered with U Money to introduce mobile NFC payments, launching the first version in November 2020.
Problem
U Money Card employs NFC technology, which was uncommon in Mongolia. With a 25% success rate at launch, we needed to identify the issue with transactions. Initially, limited data made it hard to analyze what was wrong, requiring an additional month before the examination.
Solution
To pinpoint the issue, I conducted group testing and individual interviews with the Hipay team. We discovered users didn't hold NFC cards long enough for reading and writing. We went to the drawing board for design changes to ensure they waited for transaction completion.
Initial Design
I designed 1st iteration of U Money NFC Payment in 10 days. It was close to release and we didn't have much time to research, test, and iterate. Due to this, I had to make the design simplest and easiest to understand consisting:
Read U Money NFC
U Money Balance, Transaction History
Payment Information (Amount, Payment Card, Confirmation)
Write U Money NFC
Research & Interviews
I spoke with users of various ages who experienced failed transactions and contacted our call center. Identifying the issue via voice call proved difficult, so I requested video recordings of their charging process for the recharge reward.
Upon analyzing the videos and further discussions, I concluded that users were not holding the NFC card long enough for the tag to write successfully. Here's a demonstration:
Read NFC Tag
Recharge Request
Response from U Money
Write NFC Tag
2-4 sec approx.
Findings
NFC typically writes on tags in 2 seconds, but with older phones common among Mongolians, the process varies, taking 2-4 seconds to write on the tag.
IDEATION
Initially, I considered a progress bar, circular loading, and general loading. Internal tests revealed that loaders appeared unresponsive, causing anxiety. Since we already deducted the recharge amount, users needed reassurance. The progress bar performed better in internal tests, with users holding their U Money cards until completion.
I created three After Effects animations and conducted further internal testing. The circular loader proved more popular in the company's alpha testing, conveying a sense of completion better than progress bars.
PRODUCTION READY DESIGN
In the final design, I added
EDUCATING THE USERS
What's NFC?
As previously noted, users were confused about using the NFC Technology for the U Money recharge. I designed a few animations to explain NFC and guide users through their first recharge seamlessly.
These animations were made in Adobe After Effects and custom illustrations were drawn in Adobe Illustrator.
WHERE IS MY NFC LOCATED?
Mongolians use a wide variety of mobile phones, each with different NFC reader locations. Statistics show that primary brands include Apple, Samsung, Huawei, Xiaomi, and Google. We created a web page that utilizes your phone's details to indicate where to place your U Money Card for optimal NFC connection.
OUTCOME
Conclusion & Personal Thoughts
This project means a lot to me—it was a great challenge. The first reactions and feedbacks were pretty rough and had me questioning everything, but I dug deep, curiously searched for answers, and came up with the best solution I could.
Check out these success metrics after one month of new design:
Successful Transactions
Successful transaction rate went up from 42% to 76.2%.
Improved Ratings
Average Play Store review went from 3.7 to 4.2.
Happy Users
Compliant calls on our call center was reduced by 70%.
More Projects?
I am currently working on bringing more case studies, but in the meantime, you can check out the Hipay case study, Centered Project, or my Dribbble!
