When a customer currently logs in to their U Account, they’re presented with a maximum of three figures:

  • Their main account balance
  • The sum of any pending transactions
  • The cumulative balance of any Extra Accounts

Above all of this is an ‘Available Balance’. But what is an available balance? Our customers had given us feedback about this not being wholly clear, so we wanted to react.

Traditionally, we’ve taken this figure from the main account balance, minus any pending transactions on that particular account. It’s a well-engrained customer understanding in 2017 personal banking that total balance – pending transactions = available balance.

But what about Extra Accounts? We only went and added a great additional feature that had to complicate matters. Should an available balance show:

Total balance (main and Extra Accounts) – pending transactions (main and Extra Accounts)


Total balance (just main account) – pending transactions (just main account)

It’s a tricky one, because our proposition is designed to make money in an Extra Account feel truly set aside and ring-fenced. But is ‘out of sight, out of mind’ the right approach to take? There’s probably a psychological explanation here, but we made the decision that not including Extra Account figures in the available balance only serves to over complicate things.

This feels like tomayto, tomahto stuff, but it’s not without logic, based on some ideas that we have up our sleeves for remodelling Extra Accounts.

In order to make regular interactions far more beneficial to the customer – think of the scenario where you have a bill to pay, but there’s only enough money in your Extra Accounts – we think it’s beneficial to have sight of the full available balance. However, that’s not the most important factor here. The most important factor is how we use proactive communications, for example, to streamline the process, so a customer can react to that bill scenario without encountering a failure. If it’s available, it’s better to know that before it’s too late.


  • There is the potential for confusion about the account balance figure. It includes pending transactions, which is money unavailable to the account holder. The ‘Available’ figure is not clear. If the balance is £6,286.35, that is what should be available, right?
  • The ‘Pending’ and the ‘Extra Accounts’ areas of the bar are in a misleading order. Extra Accounts contain money that is available to the account holder. Pending is funds about to leave the account holder’s account.
  • All the data is loaded by PHP, which puts demand on the server and makes the page slow to load.

diagram of issues with old balance bar gif showing old balance bar animation

The design department is not happy with the way the balance animates on to the screen. It looks clunky and the rest of the bar is a little static. The whole experience seems underwhelming.


Looking at the problems with the old balance bar it was clear there needed to be a way to link the main account to the Extra Accounts. This would give the account holder a clear understanding of the total funds in their account. A ‘Total Balance’, including payments that are not yet complete, is still required. An idea of including a second balance was suggested. It would represent an ‘Available Balance’ and indicate funds available across the customers’ accounts.

Representing the account in a graph was still seen as a useful visual aid to account holders but there was a desire to experiment with other concepts. Our app breaks the account down in the form of a pie chart. The department created a design that would bring the website in line with the app but we were never really happy with the concept. The two balances could potentially confuse the account holder as much as the current balance bar. The logo in the centre, in the mobile app, serves as the button to open the menu. Here it serves no purpose. A version without the logo was tried but it lost the connection to the mobile app. While there was desire to align our two products it was felt that there were too many negatives in this pattern to be really considered.

Pie chart balance concept

The second concept uses the original bar pattern. Looking at what the two balances represented on the bar, it became obvious that the bar areas could be grouped. Brackets are used to give an explicit breakdown of the account holder’s balance and the funds they have available to them. This was the design department’s preferred design. It answered the brief/problem best and the company agreed.

New balance bar


A requirement that all the balance information needs to be loaded dynamically means that this is a ground up development. It is also an opportunity to refactor the balance bar SCSS using our new BEM principles.

The account holder is used to their account balance displaying as soon as the page loads. Loading the balance separately means there will be a time when the balance is not displayed. A skeleton screen has been used with a pulsing gradient. This give a clear indication something is happening in the background.

Loading the balance like this also opened up the opportunity to display the bar more dramatically. The aim of the additional animations is help enrich the experience of the account holder.

gif showing new balance bar animation


The new bar hasn’t been live very long so we are yet to gauge the response from our account holders. From an internal view point, we are all very pleased with the outcome. It has reduced to initial load on the page and we hope this improves the account holders understanding of their balance.