Role
UX/UI Designer
1 Month
A digital wallet that makes sending payments easy with a simple click.
Note:
Prototype only showcases key features so it is not fully functional. Features include:
Digital cards selector
Send/request payment using QR codes
Tracking ongoing payment requests
Recent transactions
Notifications
Search
Recipient & Card Input Fields
Adding digital cards
CONTEXT
What inspired my project?
During dinner with some friends, we were discussing some of the ways we all paid each other back after splitting the bill. There are various payment apps out there, but I noticed my friends also had trouble keeping track of who had already paid and who did not. I got the idea to combine a wallet and payment app into one so users can easily access their cards when they need to pay, keep track of what they spent, and manage who has already paid or not paid back yet.
CHALLENGES
What are the User Needs?
Access payment methods - Normally users need to have their payment applications access their payment methods, including credit, debit, or other processing accounts. There should be a method to add these type of payments so the app can process the payments.
Track who paid - A common trend that seems to be occurring is tracking down who owes what when paying back people. Creating a method to track the missing and paid users should be included to make it easier for users.
A method to easily send payments - To streamline the payments, there needs to be a way for users to easily send and receive payments within the app.
CHALLENGE
Create a prototype for a wallet and payment app that users can easily use to track, send, and receive payments.
DESIGN DECISIONS
The Essential Features.
Stored cards.
As the app also functions as a wallet app so users can easily store their payments together, I created a method to quickly add card details. I provided two options: one is to scan the card quickly by following the on screen instructions, or two, enter card details manually if users prefer or if the scan doesn’t read the card. I also made it easy to see which cards are in the app through the dashboard that the can scroll through and also individually manage by clicking the cards individually.
QR Code Send / Requests.
One of the fastest methods for users to provide payment details is through QR code technology. There are three options in the top selector users can choose for either scanning a code to pay, creating a code, and viewing current QR codes or requests. Using QR codes with a mobile device’s camera allows users to easily scan it no matter the mobile device.
Payment Tracker.
Since the primary concern is being able to track pending and received payments, I created a tracker that shows each QR code that’s being tracked. Originally, I actually only had one QR in the initial design, but realized a user could have multiple payments they need to send or are still waiting to receive. So, I added in the feature to name the QR code so users can easily label as well as make notes for the different QR codes.
THANK YOU FOR READING MY SHOWCASE!
Final Notes
Overall, I feel I had a great learning experience while designing this payment and wallet app. I’ve realized specifically for these types of apps, accurately mapping out the user flow helps with designing the final prototype. Since over time it can get complicated especially when realizing there are missing elements that help improve the user experience that can be overlooked during the initial design phase.