A Mobile Payment App Case Study
"The vision is that people should have the ultimate in convenience. Being able to get things they care about on the appropriate device." - Bill Gates
Project Overview
The objective of this project was to design a native mobile payment app to service the customers of Balibago Waterworks Systems, Inc. (BWSI), a water utilities company operating in the Philippines.
Based on competitor research and discussions with the company's President, there was evidently, a need for the app as they currently do not have one. While competitors have been making processes easier for their customers, Balibago is lagging behind in this aspect. Not providing an app has been disadvantageous to their customers who feel the hassle and inconvenience of doing simple transactions. This posed a problem to be solved.
​
How, therefore, might an app make the customer experience better, efficient and convenient for all? Will the existence of an app make customers feel that the company cares about them? This case study will be able to answer the pressing problems customers face and how the product will be a good and valuable solution to the problem.
​
My ROLE:
For this project, I was the sole UX/UI product designer and my responsibilities included: User Analysis, Design System & Strategy, Wire-framing, Prototyping, Branding, Usability Testing and Synthesis. Figma was my main tool.
The project took a total of 4 weeks to complete and is now ready to be handed off to programers.
Problem Space
Balibago Waterworks Systems, Inc. is a water utility company that services 76 branches across 21 provinces in the Philippines.
At the moment, the system is unorganized and outdated. Other utility companies have mobile apps where transactions, specifically payments, can be done. BWSI does not have an app, only a website.
Due to the large customer base of the company, an app will be useful and advantageous to the direct customers of BWSI. It will be an added value to them because of its’ accessibility and convenience, solving a user’s:
External needs: accessibility, practicality and convenience and
Internal needs: peace of mind, certainty and security.
Let's first take a peek into how BWSI users currently connect and stay updated
(1)
(3)
(2)
(1) The existing website is where customers can read about the company's updates. It is more informational vs functional and intuitive for users to transact with or complete tasks.
​
(2) These are payment options which can be done through 3rd party apps (Bayad, PayMaya, Gcash) which offers some convenience if the user already has to app downloaded on their phones. However, users will have to input the details on their own. Payments can not be made through their website.
​
(3) Contact form for users to get in touch with customer service. Although a confirmation is emailed, response time is dependent on the person who receives the emails.
​
The Solution
Project Proposal
To design a Balibago Waterworks Native Mobile Payment App
With thorough research on features of existing competitor apps and by understanding BWSI's customers' needs and expectations I was able to define the key objectives of what the Balibago app will offer, coming up with a product that is convenient to use, functional and intuitive.
Key Objectives (features included in the app)
-
How might users view their monthly bills?
-
How might users pay their bills through the app?
-
How might users get in touch with customer service?
USER RESEARCH User Objectives
Who is the app for?
What kind of tasks will users complete as they use the app?
JOBS TO BE DONE (JTBD)
When will the users use the app?
Where will they use the app?
Why is the product more suited to a native mobile app than a responsive web app?
The app is for customers of the company who would like to view their bills, get updates and pay and get in touch with customer service.
The tasks for the users include:
-
viewing their billing statements
-
paying their bills
-
contacting customer service
The users will use the app monthly, weekly and whenever they feel the need to or want to check their bills or contact customer service for any concerns
The users will use the app on their mobile devices therefore giving them the flexibility to check the app anytime and from any location (including worldwide)
It would be easier for users to log in and use the app's features without needing to access the web. Since many people have their phones with them most of the day, having a native mobile app is convenient and more accessible, especially when users are on the go.
I compared and reviewed different utility apps and other payment service apps to give me an idea of how each one presented information, the flow and information architecture. I wanted to also gather details on what services they offered and how each app was able to translate it through the visual presentation and implementation of elements.
​
Below you'll find some information about each of the competitors:
G-Cash
Competitive Analysis
The top Philippine payment mobile app at present. It has made transferring cash and making payments through mobile a lot more practical for Filipinos who are heavily dependent on their mobile phones. They also offer a range of other services including but not limited to insurance policies and investments.
Meralco
An electric company that distributes power to Metro Manila and other provinces. It has recently made payments more convenient through their responsive web and app services.
Manila Water
Water distribution company and direct competitor of Balibago Waterworks.
Additional Information to Strengthen the Case
"Philippines is tied with Indonesia for the highest number of Android smartphone users that use their gadgets for mobile payments, according to a global research on digital payments conducted by multi-national cybersecurity firm Kaspersky."
​
Based on the recent findings / studies, it therefore makes sense that Balibago should have a mobile app for practical and convenient reasons to better serve their customers.
HYPOTHESIS
What am I designing?
MVP DELIVERABLES
The objective of this native app is to give the customers of BWSI a convenient and practical way to view and pay their bills, stay up to date with the latest services and updates and to make them feel connected to the company thus making them feel like a valued customer.
​
In the User Flow Diagram below, there are three (3) Jobs to be Done (JTBD), illustrated and explained, that will be part of the MVP (Minimal Viable Product) Deliverables. These User Flows will be helpful during the Usability Testing phase to see if the product achieves its initial objectives.
INFORMATION ARCHITECTURE
User Flow Diagram
JTBD 1: When I sign in the app, I want to be able to view the amount due from my billing statement.
Success Criteria: Display current bill total and easy access to viewing past and present billing statement.
JTBD 2: To be able to pay for my bill and be given payment options.
Success Criteria: Payment options and payment transactions made easy and convenient. Steps are clearly defined and organized.
JTBD 3: To be able to get in touch with customer service through chat.
Success Criteria: There is a response within a reasonable timeframe.
After drafting the Information Architecture of the product and narrowing down to three user flows for the MVP, I came up with mid-fidelity wireframes that were sent out (link was emailed) for Usability Testing to get feedback for improvements.
​
The product went through several iterations and minor adjustment such as aligning some of the elements to to the grid. Some buttons were not functioning properly and padding had to be added around to make it easy to press. The logo also go a fresh makeover. Overall, the usability test was a success and the product was ready after that to go through the UI design phase for the visual elements to be applied.
​
Below is the transition from mid-fidelity wireframes to high-fidelity wireframes.
UI PHASE
Branding & Visual Design
LOGO
Giving the brand a new drop
v.01 logo - old version
Letters were too thick, although the logo was updated a few years back, it was time for a fresh, clean and lighter feel. Also, readability needed to be improved.
v.02 logo - new version
The updated logo retains the rounded edges to keep the familiarity but is typography is more slender, allowing additional space between letters. It feels more upscale but casual. The colors are sharper against a white background but still within the blue hues, improving readability.
The updated logo retains the rounded edges to keep the familiarity but is typography is more slender, allowing additional space between letters. It feels more upscale but casual. The colors are sharper against a white background but still within the blue hues, improving readability.
v.03 logo - variation
The full logo as an option will include the drop above the Balibago Waterworks text with text also below to clearly state what the company is about.
v.04 logo - acronym variation
Acronym and shortened logo design, also the company's monogram is an option that can be used for smaller spaces and as headers. Not straying far from the full logo, an element of pipe is still present in the "B".
CUSTOM ICONS
Icons were customized to align with the overall visual direction of the product. Rounded edges and colors were taken from the logo resulting in a cohesive style. The custom icons add to the uniqueness of the app, expressing friendliness, helpfulness and serenity.
COLOR SCHEME
#285AA5
#068FBD
#95CCDE
#312C38
#5A5B5C
#EEEEEE
#F8F8F8
Since Balibago Waterworks is a water company, their colors are within the blues hues. The chosen updated colors are a refreshed version, giving more contrast for readability. But to stay within the company's branding guidelines, the colors could not stray far from the older version.
UI PHASE
When Everything Comes Together
These style elements were applied to the product during the UI Phase to make the product visually appealing while also being intentional about the navigation functionalities of the components included in the app.
Below are the mockups of the Balibago app for both iOS and Android.
iOS
HIGH FIDELITY WIREFRAMES
Android
HIGH FIDELITY WIREFRAMES
Balibago Payment App Prototype
Please wait, it may take a moment for the video to upload
The Approach and Summary
It was clear from the get-go that there was a need to design a native mobile app for Balibago Waterworks. After doing research on competitors and the services they offer, Balibago had some catching up to do.
How was the problem approached? From user research and information shared by the company, I took note that users were frustrated for different reasons. From the payment delays due to not receiving bills for those who are still receiving paper billings, to not being able to view their statements on hand for payment (example, a user finds himself in an area with wifi and wants to pay but does not remember the amount due) to issues related to reaching customer service to file reports and the uncertainty of not getting a response right away. These are some complaints in a list of many.
*It was important to keep in mind that demographics is a factor as many users do not have wifi access to wifi.
With these in mind, I was able to review other payment apps and I took from them the features that I felt would make the navigation and usability of the app easy. Through research it answered questions such as:
-
How did customers view billing statements? Was it through a downloaded pdf file or was it shown immediately on the homepage? I found that showing the amount on the home screen was a practical straightforward feature with a CTA for payment. No need to keep going back to the statement to check the amount which is an added step.
-
When paying, will the user have to input the amount due or will they be able to view, click and pay? What are the available payment options that would be easy for all customers based on demographics? Most apps now include credit card and access to third party payments accessible within the native app which gives several options, giving a user the choice that is easiest and most convenient.
-
How might a user contact customer service? What was the best way to appease a customer? Among the apps that were included in this case study, G-Cash app was the most efficient, it included intuitive features with a process that made a customer feel heard and hopeful.
I found that competitor research and analysis was the most challenging part of the process. With a blank slate to fill, there was a need to be thorough in understanding the crucial elements from different apps (like puzzle pieces), what to take from them that would be useful and effective, assembling them together to form a picture that aligned to the company's objectives and vision then applying and organizing them into User Flows -- the goal was not to cause information overload or make the navigation complex for the users. Overall, the project was successful. The visual architecture was well received and usability heuristics followed good practice.
By understanding the company's core values which puts the customers' satisfaction first, Balibago now offers a solution to the customers' needs with an app / product that's convenient and practical to use. The app is easy to navigate with features that allow the customers to 1. view information, 2. pay their bills and 3. reach out to customer service, addressing the need of accessibility and presence, delivering convenience to the lives of their customers.
Thanks for checking out my portfolio. If you have any thoughts or questions,
feel free to send me a message. Email adresworkspace@gmail.com.