Barclays and Barclaycard commissioned the redesign of a set of Financial Coaching tools to help customers better understand the proportion of their repayments allocated to balance versus interest across various products. The goal was to provide customers with a mechanism to specify repayment amounts and clearly comprehend the relationship between their chosen amount, the total repayment period, and the interest payable.

By incorporating an interactive slider instead of a traditional input field, users can quickly and effortlessly explore the relationship between repayment amounts, repayment durations, and the interest they may incur.

Client: Barclays, Barclaycard
Role: Senior Product Designer
Studio: Splendid Umlimited

Services:
Ul/UX design iOS & Android
Interactive prototyping

Credit card repayment estimator

Barcalycard01a

The Credit Card Repayment estimator is located in the Tools & Estimators section, accessible via the More tab in the global tab bar at the bottom

By effortlessly swiping the slider, users can instantly see how adjusting the monthly payment amount impacts the interest, the total amount payable, and the time required to pay off the balance

By effortlessly swiping the slider, users can instantly see how adjusting the repayment period affects the interest, total amount payable, and monthly payment amount

Loan repayment estimator

BarclayLoan01b

The Loan repayment estimator is located in the Tools & Estimators section, accessible via the More tab in the global tab bar at the bottom

BarclayLoan02a

By effortlessly swiping the slider, users can instantly see how adjusting the repayment period affects the interest, total amount payable, and monthly payment amount

By effortlessly swiping the slider, users can instantly see how adjusting the monthly payment amount impacts the interest, the total amount payable, and the time required to pay off the balance

Mortgage calculator

Mortgage01a

The Mortgagge estimator is located in the Tools & Estimators section, accessible via the More tab in the global tab bar at the bottom

By effortlessly swiping the slider, users can instantly see how changes in the interest rate impact the monthly payment for each selected mortgage product

Overdraft calculator

Overdraft Calculator01a

The Overdraft estimator is located in the Tools & Estimators section, accessible via the More tab in the global tab bar at the bottom

Overdraft Calculator02

By effortlessly swiping the slider, users can instantly see the cost of an overdraft and emergency borrowing, as well as how the cost changes if they adjust the borrowed amount or the duration they remain in overdraft