Error screens

Use the error screen pattern in scenarios where the customer can’t proceed forward with their process or application. In each of these cases, the error screen should provide clear and concise information about the issue and guidance on what the customer can do next. 

What’s happening here?

• Icon. The error icon sits above the heading to indicate to the customer that they are looking at a different type of page. 
• Heading. Using apologetic language, the customer is informed, that something has happened to either their process or application.  
• What’s happening. A simple description of the problem is displayed, including any recommended next steps if they are not online i.e., phone number. 
• Now where? Depending on the error type this will be a platform specific CTA, taking the customer somewhere within our digital environment. E.g., back to Online banking or Back to the [brand] website. 

Why do we do it this way?

Accessible and inclusive

Clear error messaging is important to ensure an accessible experience for all our customers. 

Builds trust 

Transparent error handling shows that we care about the customer’s experience and builds trust. 

Manages expectations 

By acknowledging the problem and providing guidance, error screens can alleviate frustration and help customer stay on track. 

Where does it sit in the sequence?

Wherever an error has occurred. 

How do we want our customers to feel?

Our customers should feel informed and clear about what has happened and what they can do next. 

Looking for detailed designs?

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

• Pattern guidelines - Error screens
• Figma resources - Error screens

More patterns

• Back to Patterns