OCBC Pay Anyone

We refreshed the look of OCBC's Pay Anyone app. The app provides seamless transactions, withdrawals and allows you to split bills with friends, all on one app.

role

UI Designer

made at

Codigo

contributions

Mobile UI Design, Interaction Design

Banner image of OCBC Pay Anyone landing screen
Mobile banner image of OCBC Pay Anyone landing screen

Onboarding a new user

First time users will be greeted with graphical onboarding screens to introduce them to the key features of the app.

4 onboarding screens that new users will see
4 onboarding screens that new users will see

Make payments. Transfer funds.

Users will be able to scan a QR code to pay for their meals, withdraw cash and much more right on the home screen. There is also a quick-pay feature that provides a shortcut to make payment to their recent transactions.

Zoomed in on a recent transaction for the quick pay feature
Zoomed in on a recent transaction for the quick pay feature

Pay your friends with ease

You can easily transfer funds to friends through your contact list, a PayNow ID, using a mobile number or email address. To have a more consistent visual, we opted for a customised number pad rather than using a native one.

Before going through with the transfer, review your transaction with a clear emphasis on all the important information; the payee, the amount that's being transferred and the bank account that you're transferring from.

Paying screen showcasing amount to pay, keypad and a payment confirmation screen
Paying screen showcasing amount to pay, keypad and a payment confirmation screen

Request money or split bills with your friends

Select multiple contacts from your contact list directly and request money or split bills with them. A breakdown of how much each person owes, including what items applies to them is shown to avoid confusion.

Requesting money from someone on your contact list and summary of how the bill is being split
Requesting money from someone on your contact list and summary of how the bill is being split

Graphical icons

Since you would be able to request money from multiple people at one time, I created varying graphical icons to illustrate each situation — transferring to 2 people, 3 people and more than 3 people respectively.

Graphical icons representing different splitting bill scenarios
Graphical icons representing different splitting bill scenarios

Micro interactions

After confirming a transaction, I also illustrated a short animation to signify the transferring of funds. This acts as the loading screen.

Animation of a claw machine representing the transfer of funds
Animation of a claw machine representing the transfer of funds
previous project
Duo
next project
Ready To Travel

Want to create something awesome?
Drop me an email.