Banking display of accounts

Use this pattern and its variants to display account information to customers when required.

What’s happening here?

Account information can be laid out differently, depending on where you are in the application. Each account can contain the following elements:

• Account name - By default, this is the product name. However, if the customer has created a nickname for the account, it may be shown instead.
• Account number - The BSB, account number or card number is displayed depending on the product type.
• Balance - The balance of the account is usually the most prominent detail.
• Available balance - The available balance is shown when there is a difference between a customer's current and available balance.

Why do we do it this way?

Make it personal

Using the nickname when it’s available helps the customer recognise which account is being shown - if the customer has multiple accounts of the same type, it can be difficult to distinguish them.

Reduce load

The visual hierarchy of the information ensures the most important detail is easily found.

Where does it sit in the experience?

Anywhere we need to display account information to customers e.g. dashboards, account selection.

Looking for detailed designs?

Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:

Pattern guidelines - Display of accounts

Related items

Display of transactions

Onboarding

Hand offs

Things you should know

Back to Banking