Improving transaction views: Decreasing call centre queries by X% through strategic UX updates
2024
In-house at
TSB
Worked with product teams and engineers to tackle legacy design and code through incremental design system updates. Strategic redesign with CMS and AEM implementation to minimise future dev effort and enable scaleable updates in future.
Context
TSB’s payments and account screens have seen minimal change since their original launch in 2019. Although regulatory updates were made overtime, such as introducing payment warnings and fraud messaging, the core design remained untouched despite a rebrand and introducing a second design system.
This led to a fragmented experience for customers with a clear fiscal impact; around 450,000 call centre queries in 2024 were about transactions and current account balances, with an additional 23,000 queries regarding the in-app account statements and recent transactions. This highlighted the need for a more cohesive and intuitive in-app experience.
Strategy
Given cost pressures, technical constraints of the existing architecture and the need for rapid delivery, our strategy focused on targeted UI/UX improvements to reduce mistaken fraud calls, clarify the payment process, and bring the interface in line with our current design system.
We prioritised simplifying the transaction list for all accounts, so that it was easier for customers to identify pending payments, recognise different types of transactions, and importantly teach customers how to self-serve when they encounter an issue with a payment.
Some legacy design was out of scope, like the account balance information and managing scheduled payments, so we made strategic, minor QOL enhancements to address ongoing customer concerns. Throughout the redesign, user testing played a crucial role in revealing how customers approached making payments and resolving transaction issues, ensuring our changes were genuinely customer-centric.
Content heading goes here
Helping customers recognise their transactions
Internal banking systems are often a convoluted mess of particularly versioned software, inherited code, and backend processes that are all tangled together with a modern looking UI slapped on the front. Untangling all of this was a necessity to fetch readable transaction data and untangle the mess of reference codes to produce something readable.
Our main objective as a team was to make it easier for customers to recognise their transactions, to reduce the amount of mistaken call centre queries, and help customers identify truly fraudalent payments faster as a result.
A significant proportion of customer calls at X% were related to transaction queries, highlighting the need for greater clarity. With over 40 different transaction types in TSB’s system, many of which were unique to specific accounts or fraud team actions, confusion was common. To address this, we introduced clear definitions for each transaction type, accessible via tooltips, enabling customers to quickly understand what each entry meant.
We also tackled confusion around pending transactions, which accounted for X% of calls, by implementing a new timeline for card payments, to address the discrepancies between TSB’s processed payment dates and the real-time dates customers would recognise.
Additionally, we launched a ‘Get Help’ feature, empowering customers to self-serve and resolve transaction issues directly within the app, significantly reducing the need for support calls and driving down call centre wait times.
XX+ assets produced
To improve transaction clarity, I introduced a new library of icons to visually group the 40+ transaction types. While we already provided logos for many popular merchants, there were specific types of transactions, such as an account closure refund or a international payment to another bank account, that didn’t have an identifiable icon or logo. In these cases, the ‘fallback’ logo displayed the first 2 letters of the transaction name, which didn’t provide meaningful context to customers and contributed to our high volume of call centre queries.
The new icons feature enhanced colour contrast to meet AA accessibility standards, and are colour-coded to distinguish between incoming and outgoing payments. I also designed unique icons for specific TSB actions, to make it easier for a customer to identify a legitimate bank charge at a glance. This approach ensures a more consistent and intuitive experience, aligning with best practices for clear and accessible banking app design.
Introducing the money in, money out filter
A QOL improvement we pushed to include, which was originally out of scope, was a quick filter to switch between all incoming or outgoing transactions at an account level.
X% of customers posting in-app feedback (across Android and iOS) asked for a way to switch between viewing incoming our outgoing transactions in their app over a X month period. It was first identified by Senior UX designer Luiza Brankin, whom I worked with to create the UI as a quick win backlog item.
This feature was a great use case for working agile, as we produced all of the designs upfront for engineers to seamless pick up from their backlog, and incorporated existing logic and components to facilitate quick delivery. The end result was a peak of 57% of customers using the new filter during its launch week, with ongoing use steady at ~20%.
One step closer to accessible digital banking
A recurring challenge when addressing legacy design has been finding accessible solutions within the constraints of limited architecture. Despite these hurdles, all app screens produced now surpass WCAG 2.1 AA standards. We’ve addressed historic issues relating to faulty or missing ARIA labels, ensuring that customers reliant on assistive technology can receive all information displayed on screen.
As this is an ongoing initiative, we continue to work with product development teams to improve the presentation of transaction names, references, and merchants to ensure legibility and accessibility for everyone.