Giving control back to customers and time back to bankers

Role

Product Designer at Bank of New Zealand

Responsibilities

Research • UX design • Mobile design

Tools

Figma • Miro • Jira • Confluence

Define
The background
Bank of New Zealand is a big 4 bank with a strong digital offering.

This project focussed on improving the debit/credit card experience.

Before a new or replacement card becomes fully functional, a card pin needs to be set.

In order to set a pin, customers needed to physically visit a bank branch, as pin setting was an exclusive ‘bank teller’ action.

This was a major inconvenience for customers (particularly remote and elderly customers), and was costing the bank considerable time in teller hours.
The challenge
Deliver a solution allowing customers to set and update their debit/credit card pins themselves.
Requirements, scope and constraints
I started by collecting from a legal and operational perspective the current business processes that would need to continue in the solution.

The customer would still need to be mailed the bank card to a physical address.

For security, only once the customer physically has the card, can a pin be set.

Further constraints came from developer capacity. Within the cards team, the mobile developers were best placed to pick up this project. The team agreed to focus on the mobile apps first, it also aligned with the existing experience of allowing customers to have control over their cards whether at home or on the move.

Post release, we would revisit the need for a desktop solution, if required.
Design
Wireframing
Based on the requirements and constraints I began wireframing concepts.
A set of wireframes
I then refined the screens down into a prototype flow for 6 customers to go through in usability sessions. The prototype would allow customers to set a pin in the mobile app for a new card.
Some key learnings
The final flow
The first screen in the flow
First step
Providing a visual indication of the card and its 4 digit number ending gives customers the confidence its the exact card they received in the mail.
The second screen in the flow
Step 2
By requiring customers to enter the 3 digit card number on the back of the card, we satisfy the security requirement of the customer needing to physically have the card.
The third screen in the flow
Step 3
This step replicates the conversation points bank staff would be having with the customer before setting a pin.
The fourth screen in the flow
Step 4
A simple, clear screen to allow for the individual step of setting a pin.
The fifth screen in the flow
Step 5
Following similar password patterns, the customer is required to re-enter their chosen pin.
The last screen in the flow
Last step
This screen gives the customer confidence their pin has been set and the card is now ready for use.
70%
Card pins set by customers
1,000+
Bank staff hours saved per year