Citizens
Bank

Payment Delegation for Small Business Owners on the Mobile App
B2C/ Mobile/ Payment

The Challenge

Most small business owners primarily use their cell phones primarily to access their bank accounts daily. However, the payment approval functionality did not exist on the mobile app, so the users needed to log in to the website on their laptops to approve payments. This added a lot of friction to their operations.

RESPONSIBILITIES
I led the end-to-end design process, designing a way to allow business owners to approve payments via the mobile app.
ROLE
Product Designer. I worked with the Payment Experience Owner (PM), Design Lead, and 4 engineers for the iOS and Andriod apps.
‍
‍
DURATION
4 months

Product Solution

Our team decided to create a payment approval feature for the mobile app. I led the end-to-end design of this feature.

Original Product

The business account holder could do the following tasks when I joined the Payment Management team.

- Add payments
- Modify payments
- Cancel payments
- Manage the Payment List
- Add payees
- Modify payees
- Cancel payees

Recommended Solution

For the new payment delegation feature, we wanted to allow the business owners to approve, edit, or reject the bill payments. What’s more, they can assign delegates to carry out these functions by authorizing them for certain tasks.

1st Option


The first option was to show the pending approved payments on the top bar. “3” means 3 payments are yet to be settled and the total amount is $614.99. When the user taps the top bar, it will show all 3 unsettled payments with the payment amount. The delegates can approve all payments at once by checking all the boxes and tapping on the “Approve” button.

2nd Option


The second idea was to tap on the top bar to show all unsettled payments on the next page. On top, it shows the available banking balance so the user can see if there is enough balance to settle the payment. They can approve multiple payments at once or choose an individual payment.

3rd Option


The idea is similar to the second option, but the difference if the "Approve Payment button", the “Available balance”, and the total transferred amount are located at the bottom of the screen.

Working with the engineers

I showed these design explorations to the Payment product owner and the engineers to see if my designs were feasible. The engineers told me that some payments could go through while others might not, due to backend issues. It would be confusing to show the users an error message about which payments went through and which did not.

So I decided it would be easier to approve the individual payments one by one. I did a few iterations of this idea.

A

The user needs to tap on the top row which shows the number and total amount of unapproved payments. The next screen shows the unapproved payments. The user needs to tap on the payment he wants to approve or reject. The payment row expands to show approve, edit, and decline actions.

B

The difference is when the user taps on the payment he wants to pay, it will go to a new screen, which shows the payee, address, amount, the bank account it will pay from, and the payment delivery date. After approval, the user can tap on the top right corner to go to the next payment.

Updated the UIs with the new design system

During the design process, the design team was working on revamping the design system with modern UIs and typography. I updated the UIs with the new design components. Now, once the individual payment is approved, an informational banner about when and where the payment will be sent slides up from the bottom.
Then I further improved the design by reducing the steps users need to take to finish the payment approval task. I introduced a new swipe pattern on the mobile app, by swiping right to left to choose one of the 3 options to approve, edit, or decline the payment.

Validating the design

Since this was a new interaction for the mobile app, the team was unsure whether it’s intuitive for the average user. To validate this design, I conducted a quick usability test with the User Researcher to:
‍
a) Understand whether the swipe-to-approve interaction is intuitive to users
b) Understand whether the green bars on the right-hand side of the screen are a sufficient visual indication

The target group included 8 iOS users and 8 Android users. From the results of this research, the team would decide whether to move forward with this swipe interaction.

Test Result

- We found that the success rate was much higher in the version with a green bar than the one without. 
- Their first instinct was to click or tap the Verizon payment. When nothing happened, many users rage-clicked on Verizon payment line and then tried other UI elements that were nearby. A couple of users initially thought the prototype was broken.
- About 50% of the users in the green bar version commented it would have been nice to have some kind of messaging to tell them they needed to swipe

Improvement

An informational banner was added on the top to tell the users about this action and an animation of the green bars moving left and then back to the right was added to show the row can be swiped. For accessibility purposes, we also allowed users to tap on the row to perform the task.

Success Metrics

This feature empowers business owners to streamline their financial operating processes using the banking mobile app. Through constant improvement, Citizens Bank’s mobile app's rating has increased to 4.7 from 4.5 on the App Store.
Get in Touch!