User Research
User Flow
UI Design
A payment app should be easy to use and make users feel secure. PPS is a payment service provider based in Hong Kong. Their existing mobile app is not user-friendly and out-of-date. This redesign project was aimed to solve the problems of the existing design to improve its user experience. I reduced the overall complexity to make the user flow cleaner and more intuitive.
About PPS
PPS is a convenient and simple phone and online bill payment solution that lets users pay their bills anytime, anywhere. Payments can be made to a number of companies and organisations through any tone-phone, internet-linked computer, smartphones from your pre-registered bank accounts. Users can use it to pay their bill of public utilities, government/statutory organisations, banks, telecommunications companies, educational institutions, and charity organisations, etc.
Story behind
As a frequent PPS user, I pay my credit card, electricity and water bills through their website most of the time. I never use their mobile app to pay my bills. I resist using it because of its outdated user interface design and poor user experience. To be more specific, they did not consider the characteristics of mobile platform when they were designing the app. I feel like they just embedded the website into the app. I therefore decided to redesign their mobile app.
Existing problems
Identifying problems first before solving them is important. I discovered the following problems by analysing the existing app:
#1 Outdated design
The current app design is outdated compared to other apps we use daily. Users may experience inconsistencies (controls and looks) when switching between different apps. Also, the outdated user interface makes it less trustworthy and reliable.
#2 Poor navigation
There is no back button in some userflows. Users must tap the "Menu" button on the top right to return to the beginning when they want to cancel the flow. There's no clear indication of the user's current location after userflow starts, leaving them feeling lost and confused.
#4 Unreasoned information architecture
The existing app provides too much information before a user is logged in, but users don't need those kinds of information every time. For instance, users only need the registration locator when they want to register the service. They don't need it anymore after that. It should appear at a more appropriate time throughout user's journey.
Simplified structure
I have revised the information architecture and simplified the user flow of the existing app. Part of the information has been rearranged into a more suitable section. The goal is to keep the payment flow simple and easy to access to let users focus on their task— paying bills.
I made some sketches and turned them into wireframes before delving into the details. It can provide a framework for the functionality of the app and allows me to make adjustments throughout the design process.

My design solution

Adding a bill easily
Users can find the bill they want to add by several ways. They only need to input a little information to add the bill.
Paying a bill fast and secure
I redesigned the input fields of payment details to make them easier to understand for users. For a bill that exceeds $500, they must enter a one-time password to proceed the payment.

Work inquiry, question or something else?

Contact me