Giving users more flexibility & control over their Bill Payments.

Overview

Timeline

12 - 14 weeks

My role

UX and UI Designer

Project overview

AIB is the largest bank in Ireland catering for over 3.2 million customers across Ireland and the UK. Their ‘Pay a Bill’ feature on the mobile app is outdated, and as a result of this the customer interaction with the feature is extremely low. I was tasked with improving the overall user experience of this feature with the end goal of increasing the customer interaction and usage with ‘Pay a Bill’ feature.

Company

AIB - Allied Irish Bank

The Problem 

Customer engagement with the Pay a Bill feature is extremely low due to lack of features and the difficulty of adding a new payee/biller their account.

The Solution

A simplified experience off adding new payees/billers and providing users with more control around their bill payments.

Ability to add new biller from the app

Users can now add new bills and pay them within the app, as opposed to going online to the AIB website just to add a new.

Addition of control features

User can choose the date they wish to make the payment. This includes setting up a bill payment to paid at a future date.

Users can now set up their bill once and have it paid automatically every month on their chosen date.

Aligning the UI with the other payment flows within the app.

A more clean, intuitive and modern UI style applied throughout the flow.

Updated and improved UI

The Research

1

To establish any pain points in the existing flow

2

To gain a better understanding of users need for Pay a bill, in order to correctly add value

3

To find the key insights from customers when it comes to paying/setting up bills

Research goals

To kickstart the research phase, I first identified what my goals were and what exactly I wanted to get out of my research phase. These goals were broken into 3 main points. This helped to guide my research and in the right direction from the offset.

Analysing the current journey

By understanding the existing user experience, we gained insights into the current pain points, inefficiencies, and areas for improvement. This analysis provided a solid foundation before carrying out competitor research, allowing us to benchmark against industry standards and identify opportunities to differentiate and enhance the user journey.

What the numbers told us:

From the data we know that among all payment types offered within the app, the 'Pay a Bill' feature has a significantly lower engagement rate, with a percentage of only 3% of current users actively using this feature over the course of a six month period (October 2022-March 2023).

Competitor analysis

Exploring the payment flows of leading banking apps to identify best practices, innovative features, and areas for differentiation. By understanding how competitors approach similar challenges, we gained valuable insights to inform our UX redesign.

Some key takeaways:

  • Location of Pay a Bill feature varied in each with each app. Located in Payments, Wallet, or it’s own individual tab.

  • Pay a Bill flow is separate to other payment flows in all cases except Revolut.

  • All competitors have option to add a new payee/biller within the payment flow.

User interviews

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis velit eget elit commodo posuere. Donec commodo aliquet neque, eget placerat diam convallis eu. Curabitur auctor id mi sed facilisis. Donec suscipit rhoncus nulla quis tristique. Nam aliquet magna lobortis dignissim pharetra. Nunc pulvinar odio id tellus rhoncus, at ultricies risus blandit. Duis nec nisl eget turpis tempor blandit vitae vel elit. Sed placerat vel eros tempor lacinia. Phasellus augue tellus.

Defining & Designing

Defining the problems

After analysing our current journey, analysing our competitors approach and gaining insights into our customers mindset and perspectives around paying a bill, we could now define the most problematic areas with the current user experience.

  • Users avoid using this feature as they must go onto the website in order to add a new biller/payee.

  • The interface is dated and not in line with the rest of the flows within the app.

Communicating early concepts with stakeholders through Low-Fidelity Iterating 

Once the problem areas were defined we began developing various concept and possible user flows. The use of low fidelity prototypes allowed us to quickly map out all our ideas and concepts, and easily communicate ideas with stakeholders and keep the focus on the experience and user flow, as opposed to the aesthetics of the designs.

High fidelity prototyping

As we narrowed down our concepts and decided on a suitable approach for both the customer and the business, we progressed our designs into a higher fidelity.

As these designs progressed, we continuously communicate with our UI Design principle, as well as holding design critiques with the wider design team. This was found to be a great method of getting great feedback, while also aligning with other designers who were facing similar UI challenges before bringing the design into user testing.

Testing & Improving

Usability testing with customers

1. Testing prep with Stakeholders

First we set out the goals for what we want to achieve from testing. This involved gathering stakeholder's to define what exactly we wanted to get out of the testing, identify the key questions that needed answering , and discuss any other concerns. From this we decided on the most appropriate approach to take for testing and began writing our transcript.

2. Carrying out the tests

This testing was carried out remotely with 5 AIB customers, with each session running for 45-60 minutes and each one being recorded. To be more productive we had one designer carrying out the session with the user while the other designer actively took notes and timestamped any important behaviours, answers or comments. This method saved a lot of time for when we go into analysing the data.

3. Analysing and developing insights

Rainbow spreadsheet

The use of the rainbow spreadsheet was to record behavioural patterns presented by research participants. Every time a participant exhibits a new note-worthy behaviour the observation is written in the left-most column of the rainbow sheet. This way we could recognise the common trends among all of the participants.

4. Key insights from testing 

Tagging

This involved going through each transcript and set of notes, and tagging important comments, actions or data with specific labels. These labels consisted of various types of behaviours, feelings, pain points, successes and/or areas on specific screens.

Applying testing insights to the design

Bright living room with modern inventory
Bright living room with modern inventory
Bright living room with modern inventory
Bright living room with modern inventory

The final deliverable

Adding a new biller and setting up a payment for a future date

Interactive prototype

  1. Setting up a new biller

  2. Selecting a future date for a payment

  3. Paying a newly set up biller

Results

As these designs progressed, we continuously communicate with our UI Design principle, as well as holding design critiques with the wider design team. This was found to be a great method of getting great feedback, while also aligning with other designers who were facing similar UI challenges before bringing the design into user testing.

Key learnings from this project

As these designs progressed, we continuously communicate with our UI Design principle, as well as holding design critiques with the wider design team. This was found to be a great method of getting great feedback, while also aligning with other designers who were facing similar UI challenges before bringing the design into user testing.