PPS Mobile App
Overview
PPS's design patterns were found to be below industry standards, and its user interface was not user-friendly. To tackle these issues, a redesign project was undertaken with the goal of enhancing the user experience. The redesign involved simplifying the user flow and reducing overall complexity. As a result, the new design is cleaner, more intuitive, and provides users with a greater sense of security.
Role
UI/UX Designer
Year
2019
Tools
Figma, Sketch
About PPS
PPS is a convenient and simple phone and online bill payment solution that allows users to pay their bills anytime and anywhere. Payments can be made to a number of companies and organizations through any touch-tone phone, internet-linked computer, or mobile smartphone, using pre-registered bank accounts from 20 different banks.
Users can use PPS to pay bills for public utilities, government/statutory organizations, banks, telecommunications companies, educational institutions, charity organizations, and more.
Context
In my capacity as a frequent user of PPS services, I often use their website to pay my credit card, electricity, and water bills. However, despite the availability of a mobile app with the same functionality, I do not use it for bill payments. The primary reason behind this is the subpar mobile user experience. The existing app's outdated user interface design and lack of user-friendliness make it difficult to use. Therefore, I propose a redesign of the mobile app to address these issues.
Research
User interview
To identify problems in the existing design, I interviewed 5 users of PPS (website and app) to learn more about their bill payment habits and experiences using PPS’s service.
App store reviews
The reviews in the app store echoed what I heard from my interviewees. They also mentioned issues with login and a poor user interface that led to bad navigation. Some users even prefer to use the web version instead of the app.
Findings
Based on the results of user interviews and my study of the app, I concluded that the following are the main issues:
Users find the registration process through the terminal to be inconvenient and time-consuming.
New users who do not have a PPS account need to find a nearby physical PPS registration terminal to complete their registration. This registration experience is not seamless and requires a significant amount of time from users.
Users think that the login method is not user-friendly.
Users are required to enter their username and password each time they log in. If they forget their login credentials, the process becomes even more time-consuming. As a result, users are seeking a simpler way to access their accounts.
Users prefer using the website over the mobile app because they find it easier to understand and navigate.
The design of the current app is outdated and inconsistent with other commonly used apps. Users find it unintuitive because it behaves differently from familiar apps, leading to confusion and reducing the app's reliability as a payment app.
Certain flows in the app lack a back button, forcing users to tap the "Menu" button on the top right to return to the beginning. Additionally, there is no clear indication of the user's location within the app, which can cause confusion and disorientation.
Users feel overwhelmed upon first opening the app due to the large amount of information presented.
The app presents a significant amount of information without clear hierarchy, making it challenging for users to identify useful information and take action.
Furthermore, the app presents information at inappropriate times during the user journey. For example, the registration locator information is only useful for users who want to register, but it is placed in the bottom tab bar, which is unnecessary for registered users.
Users may be concerned about security, as transactions can be completed without any verification.
The transaction can be completed with just a few clicks, regardless of the payment amount. This may cause users to worry about the possibility of unauthorized transactions.
Scope
After conducting user interviews and analyzing the results, I have came up with the following "how might we" statements. Due to limited resources, I have decided to focus and work on the last three:
How might we simplify the registration process to make it less time-consuming and more convenient for users?
How might we improve the mobile app's navigation and user interface to make it easier to understand and navigate?
How might we present information in a more organized and hierarchical manner to reduce the feeling of being overwhelmed for users?
How might we increase the security of transactions by introducing a verification process, without making it too burdensome for users?
Wireframes
Before delving into the details, I created some sketches and turned them into wireframes. This approach establishes a framework for the app's functionality and enables me to make adjustments during the design process.
Design
Biometric login
Users can enable or disable biometric login at any time in the settings. This provides an easier way to log in to their account without requiring them to remember their username and password.
Intuitive IA & navigation
I have restructured and simplified the information architecture of the existing app. Certain information has been relocated to a more appropriate section in the user journey. The objective is to keep the payment flow straightforward and easily accessible, enabling users to concentrate on the task of paying bills.
The navigation in the new design is much simpler. Users can now easily access the most frequently used features without being distracted by irrelevant information. The tab bar links users to the core functionality zones of the app: Bills, Payment History, and Settings. This makes it easier for users to find, view, and manage their bills, including saved and scheduled bills, all in one place.
Clear hierarchy
Every page has a title to help users quickly understand its content and functionality. Grouping information into smaller, more digestible pieces reduces users' cognitive load, making it easier for them to find what they're looking for and complete tasks.
Safer transaction
Users can enable biometric verification to use their biometric ID for verifying their payments. If they choose not to enable biometric verification, they will receive a one-time password to verify their payment.
