MOBILE BILL PAY

As a customer, I want to be able to use the mobile app to pay multiple bills at once.

Overview

Redesign the pre-existing bill pay feature to allow users to make (1) multiple payments, (2) select the frequency of payments, and (3) activate/deactivate e-bills.

Case Study

The pre-existing mobile bill pay feature was designed to accomodate one time payments. Stakeholders and users found this too restrictive for a digital bank. Although the web application supported multiple payments, frequency of payments, and e-bills, 90% of customers were using the mobile app.

To better understand the users journey and wrap my mind around the functionality of bill pay, I created a flow chart. This would aid me in figuring out where I could potentially place multiple payments, frequency of payments, and e-bills.

Below are selected screenshots of what the app looked like previously. In the Pay Bills screen, users can navigate to the Scheduled Payments or Payment history by swiping left. Users are also able to select on the Payee to begin a one time payment.

In the one time Payment screen, users can schedule a payment and opt to receive a notification prior to the payment being sent. In the upper right hand corner the settings available are (1) Edit Payee, (2) View Payment History, and (3) Remove Payee.

Screenshot of the Bank X Bill Pay Screen Screenshot of the Bank X One Time Payment Screen

Note: the black border in images 2-3 are from testing with VoiceOver on iOS.

I went through several iterations on how to incorporate multiple payments, and I felt that the most logical approach was to include a switch to enable input fields.

I've also added a right chevron to make the whole list item clickable, as opposed to only have the account name clickable.

Below the account name, I placed labels for scheduled and payments due to account for e-bills. In the Bill Settings screen, I've decided to eliminate the settings cog, and bring all options up front.

New Screenshot of the Bank X Bill Pay Screen New Screenshot of the Bank X Bill Settings Screen New Screenshot of the Bank X Make a Payment Screen New Screenshot of the Bank X Activate E-Bills

Accessibility

Since this was my first mobile application project, I did some research on mobile accessibility as the developers had no prior experience. Since the developers were using Xamarin, I did some research on the application and found out that the developers would have to use the accessibilty APIs provided by Android and iOS.

Another important feature to ensuring the accessibility is by grouping items. Grouping items makes UI components more accessible to screen reader and switch device users.