PaySwipe
Project Brief — Fintech
Role — UX Designer, UI Designer
Methods — User Research, Prototyping, Wireframing, User Tests, A/B Testing, Body Storming, Semi-structured Interviews
Studies — Prototyping, Interaction Design BachelorMaking payments using smartphones has made users less aware of spending money. This design solution aims to create friction in payments to make users more aware of the amount of money spent.
Research
Desktop research and interviews showed that a lot of people struggle to comprehend digital financial activities such as transactions and payments. Currently, all payments feel the same no matter the size and impact they have on a person’s economy. According to user research, the efficiency of digital payment creates an abstraction of money spending and enhances a sense of insignificance. Before digitalization, people had a sense of loss when they payed, as they had to pick the money themselves out of their wallets. More so, people were aware of the amount of money in their accounts as they looked into their wallets when they made payments.
HMW convey the feeling that a payment with digital means is an exchange of money for an item or service?
Conceptualizing & Prototyping
We conceptualized around friction and awareness of payments by creating tactile experiences through tangible prototypes. Firstly, exploring a paper prototype to enhance the sense of letting go or releasing money through a dragging motion. Secondly, exploring two prototypes to enhance friction in payments by squeezing the terminal to pay, this solution was tested in a low and hi-fidelity prototype. Thirdly, exploring a vibrating card aiming to create awareness of payments and indicate the size of the transaction through vibration.
User Testing
User testing with seven participants revealed that squeezing interactions felt unnatural and disconnected from the concept of payments. While some users appreciated the tactile feedback for indicating the amount, many expressed concern about unintentionally exceeding the desired value by pressing too long. In contrast, the dragging interaction was perceived by five users as intuitive and efficient. It maintained a clear visual representation of the payment amount, which reinforced users’ sense of control. Overall, the dragging prototype was preferred for its usability and clarity, though users suggested some design improvements. The experience was perceived as game-like, partly because the money resembled a token. However, the square element confused users, as its purpose or meaning was unclear.
"When I usually pay it is only one blip; but now you can see the amount of money and when swiping it, it is like removing it from your wallet or card."
— User
Redesigning UI
The core focus of the UI is the interaction with the card component. Users slide the card upward to make a payment, mimicking the gesture of removing or handing something over. A subtle upward shine in the background acts as feedforward, visually hinting that the card can be swiped upward to perform an action. After the action, a soft glow provides feedback, reflecting the completed interaction in a playful, satisfying way. I redesigned the UI’s using the feedback given in the user testing, and this were the results.