Overview

With a considerable increase in cyber financial crime over the last few years, customers of banks and fintech organisations are faced with continuous potential risks of frauds and scams. As a bank, it is AIB’s responsibility to put our customers’ best interests in mind and help protect them from financial crime. The first line of defence is education. Customers should be educated on how to spot a scam and, even more importantly, what to do if they’ve been caught in scam.

Process

1. Discovery

Peer analysis

Completing a peer analysis allowed for us to compare ourselves to others banks and fintechs to look at how similar brands are handling their fraud and scam education, prevention and action online and explore alternative solutions to AIB’s Security Centre journey.

From our peer analysis, we identified that information architecture, mainly titles and categories are one of the strongest tools within security centres that are content heavy, like ourselves. We also found most peers had short, catchy slogans throughout their security centres to help customers remember steps to take in order to prevent frauds and scams.

2. Empathise

Personas

After our discovery, speaking with stakeholders, identifying the current journey highlights and pain points and understanding how our peers are combating fraud and scam awareness online, we were ready to visualise the personas of customers that would be using the AIB Security Centre and why.

We found there to be three personas we needed to create our Security Centre keeping in mind:

1. Design first for fraud customers who are likely in a panicked state and need to contact AIB immediately for help.

2. Design second for information seekers looking to educate themselves on frauds and scam prevention tactics.

3. Design third for reporters looking to understand and report on what AIB is doing to help protect its customers.

3. Ideate

Information architecture

Good information architecture ensures that customers can quickly locate what they need, making their experience smooth and enjoyable. Looking at the information architecture allowed for us to strip back the existing journey of the AIB Security Centre and replan the page layouts and navigation so that people can easily find their way around. It involved organising and structuring the existing content in a logical way, making the journey more intuitive.

4. Design

Wire-framing

Based on the discovery, information architecture and content review, I moved to low-fidelity wire-frames in InVision Freehand. These are simple layouts with placeholder content that show where the key information, in coordination with the personas, should be placed on the webpages. These wire-frames allowed me to visualise various potential structures of the pages that could provide a solution to our problem.

Internal testing

Before moving on to high-fidelity mockups, I tested the lo-fidelity prototype internally within the AIB Design team of 12 designers at various experience levels. Through this feedback, I was able to incorporate third-party considerations of best design practices from designers unfamiliar with the content. This involved further iterations of the low-fidelity mockups until we believed to have found the best solution possible at this stage of design.

Key changes from the internal testing include:

• Character limit considerations,

• Removing sections that were deemed unnecessary for the purpose of the personas, and

• Navigation considerations outside of the Security Centre webpages, and throughout the rest of the AIB group websites.

High fidelity design

After feeling confident in my low-fidelity designs and receiving feedback from fellow designers, I was ready to start the high-fidelity designs. These designs are rich in detail, including the AIB branding and existing components from our AIB Design System component library with placeholder imagery only.

As our initial requirements did not allow for further development due to budget restraints, I used only existing components, which allowed me to quickly narrow the high-fidelity options down to only a handful of components.

5. Test

User testing

Using Lookback to connect virtually with our users and Dovetail for note-taking, we completed user testing with the following high-level guidelines:

Questions

During the interviews, we asked the users a number of ‘warm-up’ questions to get them comfortable discussing the topic of frauds and scams and to better understand their day-to-day interactions with potential financial risks and everyday banking.

We then dived into three scenarios within our prototype, asking the users to navigate their way through the journey considering the scenario they had been prompted each time.

Findings

Challenges

No project comes without its challenges. Some key challenges we faced throughout the project include:

• There was limited data for us to reflect on from the website as it was, which caused initial concern over how the website was performing and what the problem really was. Additionally, this restricts our findings to compare a before and after and track performance post go-live properly.

• The legacy systems used at AIB and developer resource issues caused a restriction on the extent of change allowed, as we could only use components and technology that was already in use within the AIB group websites.

• Consistency among the various AIB platforms (app versus website) only allowed for the website within scope changes, as the app sits within a different software and team. However, our findings reflected that most users only use the app and we could be missing a large chunk of our customer-base by putting the Security Centre in the website only.

Final design

Design handover

Once we were happy with our final designs, we presented back our findings and updates to the stakeholders. They were delighted with the updates and were happy to move forward with handover for the design build.

We hosted a meeting with ourselves, the stakeholders and the AIB website authors, presenting the designs and clarifying any questions. Developers were not included in this call due to resource restrictions, no development was necessary.

Reflection

As my first end-to-end redesign in a designer role, I’m overall happy with the outcome of the project.

Having experience as a Product Management Associate working on redesigns from another angle, I did find the change in role perspective of thinking challenging at times, potentially going a bit above and beyond of the designer role to manage the project. However, I also think my previous role better prepared my soft skills and management skills, allowing me to feel confident in those aspects of the project and focus on further developing my design skills.