FNB credit card UX
Assumptions are often wrong.
FNB asked us to have a look at their emails and come up with a proposal to make them better. The issue they were facing was twofold; FNB Cardholders were either not using their credit cards or only using them for big-ticket purchases
FNB's assumption was that if they created better, more engaging emails, customers would use their credit cards more often.
But actually, research showed us that most consumers fear credit because they don’t really know how it works and feel they will get themselves into debt.
Tough convervations.
Obviously fancy emails weren’t gonna solve this problem, so we looked at FNB's online banking platform to see if we could make the way credit card balances were shown easier to understand. It’s not what they asked us to do, but its what we knew had to be done.
Our solution involved visually representing all aspects of the cardholder's credit balances including showing how many days they had interest-free, how much they owed in interest and when they would be billed. We even showed when cardholders had a positive balance on their credit cards and how they could use that to their advantage.
Telling the client that the small job of fixing their emails had spiralled into a web and app UX job wasn’t fun. We had many meetings with increasingly scary audiences, but in the end, they agreed that we had identified the key issue and had a way to tackle it head-on.
Visualising the problem & solution.
This was the web view of all accounts in the FNB website at the time. There's no visual hierarchy and it's hard to see at a glance how your accounts are looking. It's clear that the sales team got their way and made the promotions the most important things visually.
The below is what your credit card looks like in isolation. The way monetary values are handled is completely different to a normal chequing or savings account and people get very confused by what's going on. Our research showed this confusion leads to people being too afraid to use their credit cards.
The first thing we wanted to do, is show visually what your credit card's balance looks like. We used an orange bar to show the credit line. It gets more red as you use more of credit. We also showed your credit limit as a figure, along with the available balance, making it more like a normal account.
As you used your credit funds, we would visually indicate how much had been used as well as provide the exact value as a figure.
Then we showed people how many days they had until they would begin to pay interest on the amount of credit they had used. Showing them this along with the next payment date took the guesswork out of using a credit card.
Few people realised that you can actually just use a credit card just like a normal account. This means you never pay interest and get all the security and benefits of using a credit card. We proposed encouraging people to maintain a positive balance on their credit cards. We showed this with a bright "FNB teal" positive balance bar.
The FNB app.
Our thinking was applied to the app as well. We made use of push notifications to help cardholders make better financial decisions and use their credit card in a way that benefitted them. We also made use of some of Visa's credit card APIs to give cardholders extra control over their cards. These APIs allow the bank to notify a cardholder when they reach spending thresholds and give them the ability to pause their credit card or stop it from being able to pay for eCommerce transactions.
The emails.
We did actually do what they asked, we’re not crazy. Our goal was to make the information in the emails as clear and easy as possible to understand using FNB’s restrictive CI and brand guidelines. We took the guesswork out of using a credit card and showed people a credit card is a financial tool rather than a scary temptation that leads to financial trouble. Old, left. New Right.
