Overdraft Cost Calculator
UX DESIGN LEAD
2020
The Financial Conduct Authority announced a number of measures last year as part of the High Cost Credit review which included proposals to change how banks charge for overdrafts.
In order to comply with the HCC regulation, an upfront eligibility element had to be implemented, which means the bank must provide customers an online tool to check the likelihood of being approved for a given overdraft amount without leaving a hard footprint on their credit file.
Goal
Give the users the ability to easily calculate overdraft costs and check if they are eligible before they apply.
Challenges
As it was the bank's policy to foster responsible financial behaviour, the calculator had to be designed in such a way that it would not come across as if it's encouraging the users to apply for an amount that's higher than they would normally go for. This was also necessary to get the Legal & Risk's sign off.
After investigating as to what influences the users' decision making when it comes to overdraft applications, there were 2 main takeaways that had to be taken into account:
-
Avoid displaying the maximum overdraft amount of £5,000 upfront as it's been observed that users presented with this information tended to request a larger amount, compared to those who haven't seen it.
-
If there were to be a slider as a way of inputting the overdraft amount, increments should not be more than £10 which posed a challenge for the mobile version as the slider could end up being too sensitive due to limited screen size.
User Journey
Outline of the stages of the journey
Overdraft cost calculator within the broader mobile user journey
Competitor analysis
In order the assess the potential issues with the competitor's overdraft calculators I've conducted a quick usability test on them.
The 3 competitors I've identified were Monzo, Starling and Barclays.
Monzo and Starling both had linear sliders only, whereas Barclays had a text input.
While participants had no issues with the text input for the overdraft amount, they found an advantage to having a slider, which would allow them to toggle around amounts more easily.
The findings showed that the sensitivity of the slider played a key role on participants' experience. It was important for them to be able to select the right amount on first attempt rather than struggling with the slider to get it to the right place.
This revealed that there was a case for having some form of a slider while keeping the sensitivity issue in mind.
Iterations
After analysing how users interacted with the competitors' similar products, the initial design was tweaked based on the below hypothesis:
By providing a slider that is circular instead of a linear line, the length of the surface the users move their fingers on would increase, therefore the sensitivity and the accuracy would be optimum.
The logic behind the hypothesis for a circular slider
Iterations after the initial design
Through multiple rounds of usability testings, the way the slider conveyed the information and its speed has been iterated. The version that provided the optimum usability was the one that utilised the area inside the slider itself to indicate how close the user is to the limit, as well as inform at what point the amount becomes less-likely / unlikely.
Prototype
In order to realistically understand how the users interact with the product, I had to use a more advanced prototyping tool
than Invision or Adobe XD. Using Axure, I’ve rapidly built a highly interactive prototype that works out actual, live calculations based on the amount and duration that usability test participants entered.
On the left, a snippet of the prototype that shows only the core functionality of the journey which is the calculator.
Post launch
Although this overdraft cost calculator was initially designed for non-customers, it has been rolled out as part of the overdraft application journey for existing customers as well, as a result of its conversion rate that outperformed the KPI and the amount of positive feedback we've received.