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
Overview
For this project, I designed a native mobile payment app to service the customers of Balibago Waterworks Systems, Inc. (BWSI), an operational water utilities company in the Philippines. Based on competitor research and discussions with the company's President, there is a need for the app as they currently do not have one which puts them behind and at a disadvantage compared to their competitors.
With thorough research on features of existing competitor apps and by understanding BWSI's customers' most pressing needs and expectations and how this product would offer convenience, I was able to define the key objectives of what the Balibago app will offer.
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 it's accessibility and convenience, solving a user's:
- External needs: accessibility, practicality and convenience
- Internal needs: peace of mind, certainty and security
Let's first take a peek into how BWSI users currently connect and stay updated
- 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.
- 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.
- 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 App
Key Objectives
- How might users view their monthly bills?
- How might users pay their bills through the app?
- How might users get intouch with customer service?
USER RESEARCH
User Objectives
Who is the app for?
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.
What kind of tasks will users complete as they use the app? JOBS TO BE DONE (JTBD)
The tasks for the users include:
- viewing their billing statements
- paying their bills
- contacting customer service
When will the users use the app?
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.
Where will they use the app?
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).
Why is the product more suited to a native mobile app than a responsive web app?
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.
Competitive Analysis
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:
GCash
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 noted 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 organizing the architecture information of the product and narrowing down to three user flows for the MVP, I came up with mid-fidelity wireframes that went through 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
Summary and Approach
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.
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 immediate 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 with 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? I observed that the G-Cash app had an intuitive feature 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 to form the Information Architecture of the product -- the goal was not to cause information overload or make the navigation complex for the users.
Overall, the project was successful. 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.