Refresh the look & feel of UI
The overall brief is to rebrand the look and feel of the UI of the whole mobile banking app
Tons of billers and biller categories
In the old app, they have two different menus of Pay and Buy where it contains tons of biller categories –– making users difficult to find the biller they want to see.
Simplifying payment flow
How can we streamline the payment flow experience despite there are specific requirements needed for a certain biller.
ideation
Here’s our first step in tackling this project.
Show long description
Show long description
solution
Here’s the new and improved bill categories. User also able to change the view between grid view and list view to help them to find biller.
Video of all billers in one screen.
solution
Now that we have the biller categories sorted out, we’re moving towards the Bill Payment landing page. After much discussion, we’ve settled on this structure:
Search bar
Top 3 biller categories
View all categories
Favorite transactions
List of last and recent transactions
List of saved transactions.
solution
We’ve streamlined the payment flow to this step from entry point to receipt.
Show long description
solution
There are three types of gather screens based on their payment type, which are:
Open payment is when the amount input in the gather screen is editable for users by default
This is the example of Qurban payment.
Closed payment is when the amount input in the gather screen is fixed to a certain value
This is the example flow of paying your taxes
Denom-based payment is when we display lots of values for user to choose from
This is the example flow of buying phone credits
solution
Other than the three main types, there are some special cases of payment, such as:
Special case where we also display the additional information of each data package
There are special case for specific credit card:
We can show the total bill amount
Because it’s open payment, user can freely enter any amount. But, in here we also add a chips that help them quickly enter the min/max amount to their credit card bill.
Takeaway
ACCOLADES
