Display of transactions

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

What’s happening here?

Transaction information can be laid out differently, depending on where the customer is in the application. Each transaction can contain the following elements:

• Transaction icon - Logo or icon corresponding to transaction, e.g., merchant logo, category icon
• Title - Transaction title e.g., Transaction name, account name, payee name
• Amount - Amount related to the transaction, e.g., dollar amount, carbon amount, foreign currency amount
• Supporting content - Any other information that is relevant to transaction. This is dependent on where the transaction is being displayed, e.g., account number/BSB, card number, transaction category name, bill due date, payment status, running balance, balance supporting text etc.
• Transaction type indicator - Used to indicate information regarding that transaction type, e.g., PartPay repayment, repeat frequency
• Extension - Used to indicate additional information regarding that transaction that may require an action, e.g., Smart plan repayment

Why do we do it this way?

Real time

The transaction detail and its status is real-time, giving the customers the most up-to-date information available.

Reduce load

Providing visual indicators (i.e. icons and logos) helps the customer to quickly scan a list to see either the source or the transaction of which type or group it belongs to.

Where does it sit in the experience?

Transaction information is used throughout the entire online banking experience.

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 transactions

Related items

Display of accounts

Onboarding

Hand offs

Things you should know

Back to Banking