Website

Digital Experience

Hero image depicting the word Patterns and a woman's face with a quote "Finding the content that's relevant to me and my needs."

Our websites play a key role in attracting, engaging, and converting new customers – and servicing our existing ones. They’re the digital front door to the Bank where our customers learn about us and what we have to offer.

It’s important that all teams are aligned in this pattern approach because consistent experiences build trust and credibility for us as a business.

What makes a great website experience?

Useful

Providing customers with information at the right stage of their journey. We need to make sure we don’t overwhelm them with choices that distract them from their task. To achieve this you need to be clear on your objectives and think about whether you are:

Creating awareness (promoting offers or sharing news)
Inspiring action (helping customers discover products or services that meet their needs); or
Creating a deeper level of understanding (providing information on important topics, for example like security)

Logical

Presenting information to our customers that is structured in a way that makes sense, and progressively displaying information to support the task the customer is here to achieve.

Consistent

Ensuring every page on the website provides a seamless customer experience, with a consistent design experience and tone of voice throughout.

To align our teams on delivering website experiences, we’ve created a set of page patterns built on the AEM platform.

“Using the patterns will save you time and effort. You’ll gain speed to market and you’ll contribute to a more consistent customer experience.”

What are page patterns?

Page patterns indicate the type of content that is most relevant to the purpose of the page.

The page patterns are created from configurations of multiple building blocks.
Building blocks are composed of either single, or multiple Adobe Experience Manager (AEM) components from the AEM component library (for Producers) and the AEM Figma library (for Designers).
The building blocks arrange the content in a logical way that’s easy to absorb.

Page patterns must be used faithfully as designed, to create consistent experiences that scale with the AEM platform, and optimise delivery cadence.

Page patterns help you work smarter

The website page patterns have been designed in response to improving production efficiency and creating design standardisation across the business. Using the components as is ensure our teams deliver pages with consistency, speed and accuracy.

Improves customer experiences

The patterns promote best practice design.
They help us achieve a consistent and cohesive customer experience across our websites so that every time our customers engage with our website, whether they’re researching our home loans or learning how to set up a new business, they’re getting a consistent experience every time, which builds trust and loyalty.
Page patterns free up time to focus on solving customer challenges.

Increases speed to market

By consistently following the patterns (without changing them), we’re optimising our build, which allows us to get to market faster.
We're not spending time re-inventing the wheel each time.
Patterns minimise back and forth between different teams and reduce cyclical conversations and continual rework.
They make pages easier to update in the future (for example, brand change is much simpler and faster).
Legal and compliance requirements can be met earlier.
Patterns meet accessibility standards and adopting them faithfully means no extra development, no rework and no need for additional funding for testing.

How to apply the page patterns

Once you have defined your objectives and have a clear purpose you can....

Step 1 – Determine the relevant page pattern

Select the page pattern that will best support your goal. Each page pattern has a primary purpose which will help you identify this.

Step 2 – Prepare your content

Referring to the page pattern and using the Digital Writing Guidelines, you can prepare your content. The page pattern will help you understand your content needs and the flow of your message.

Step 3 – Create your design

Reviewing the page pattern and the possible configurations, start to apply your content. This should align to the page pattern instructions. This will help you to create a logical flow to your message.

Identify the single objective on the page and align the primary messaging and call to action (CTA) to this objective. There should be only one primary CTA per page.

Be concise with the amount of information you’re putting on a page.

Step 4 – Review your proposed page

Once you have a high level page design and copy, you should have your risk and compliance reviews. You should then bring your proposed page to the AEM Design Clinic for review to ensure you've adopted the page patterns and writing guidelines as intended.