Merge pull request #510 from WestpacGEL/fixes/adding-missed-articles

fixes/adding missed articles and page

apps/site/src/content/articles/banking-display-accounts.yaml

@@ -0,0 +1,7 @@
+name: Banking display of accounts
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695774586/cln10ek1v001qvd8idm00epsy.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking-display-accounts/content.mdoc

@@ -0,0 +1,42 @@
+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](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36781&type=design&node-id=1338-24546&viewport=978%2C494%2C0.27&t=vueEBRWB6w2i0pgB-1&scaling=scale-down-width&starting-point-node-id=1338%3A24546&hotspot-hints=0&mode=design)
+
+## Related items
+
+[Display of transactions](/articles/banking-display-transactions)
+
+[Onboarding](/articles/banking-onboarding)
+
+[Hand offs](/articles/banking-hand-offs)
+
+[Things you should know](/articles/banking-tysk)
+
+[Back to Banking](/articles/banking)

apps/site/src/content/articles/banking-display-transactions.yaml

@@ -0,0 +1,7 @@
+name: Display of transactions
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695782572/cln155psl001uvd8i0fuq9dfs.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking-display-transactions/content.mdoc

@@ -0,0 +1,44 @@
+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](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36784&type=design&node-id=1508-24717&viewport=1013%2C532%2C0.18&t=EV37V9vYsmI3DO6d-1&scaling=scale-down-width&mode=design)
+
+## Related items
+
+[Display of accounts](/articles/banking-display-accounts)
+
+[Onboarding](/articles/banking-onboarding)
+
+[Hand offs](/articles/banking-hand-offs)
+
+[Things you should know](/articles/banking-tysk)
+
+[Back to Banking](/articles/banking)

apps/site/src/content/articles/banking-hand-offs.yaml

@@ -0,0 +1,7 @@
+name: Hand-offs
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695783266/cln15klrw001xvd8igne64soh.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking-hand-offs/content.mdoc

@@ -0,0 +1,33 @@
+Use this pattern when your experience transitions from one platform to another.
+
+## What’s happening here?
+
+When a process involves multiple technology platforms, the customer may experience a moment of waiting while the new platform screen appears, such as from a native iOS or Android online banking application to a web page. This pattern describes the various loading states required depending on where they are coming from or going to. 
+
+## Why do we do it this way?
+
+### We're putting the customer first
+
+Communicating to the customer what is happening on screen helps keep them informed and helps alleviate any frustration they may feel about having to wait.
+
+## Where does it sit in the experience?
+
+This pattern is displayed when the customer is moving from one process to another onto a different technology platform.
+
+## 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 - Hand-offs](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36793&type=design&node-id=1508-25061&viewport=1004%2C689%2C0.16&t=oLJLtWyZFnNNZujl-1&scaling=scale-down-width&mode=design)
+
+## Related items
+
+[Display of accounts](/articles/banking-display-accounts)
+
+[Display of transactions](/articles/banking-display-transactions)
+
+[Onboarding](/articles/banking-onboarding)
+
+[Things you should know](/articles/banking-tysk)
+
+[Back to Banking](/articles/banking)

apps/site/src/content/articles/banking-onboarding.yaml

@@ -0,0 +1,7 @@
+name: Onboarding
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695783106/cln15h6a4001wvd8i9rs50m3t.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking-onboarding/content.mdoc

@@ -0,0 +1,36 @@
+Use this pattern to inform customers of a new feature or how to set up or activate a new feature in the easiest way possible.
+
+## What’s happening here?
+
+This pattern has different configurations dependent on the complexity of the information being communicated. It consists of descriptive copy and imagery, typically used to introduce simple product features. It describes both the feature and the customer benefits.
+
+- **Single page** - This is a one page view for simple features, that have been initiated by the user.
+- **Multi page** - This is a carousel for multiple pages and is best for more complex information.
+
+## Why do we do it this way?
+
+### Engage with our customers
+
+We're providing information to keep customers informed and educated about the new features we introduce. It gives them context and confidence to use any new functionality we offer.
+
+## Where does it sit in the experience?
+
+This pattern should be presented BEFORE the customer gets into the specific feature that they intend to open. This introductory screen(s) will differ based on the type of features.
+
+## 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 - Onboarding](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36774&type=design&node-id=1508-24889&viewport=776%2C343%2C0.18&t=os1CQGTUR2I7cPxe-1&scaling=scale-down-width&starting-point-node-id=1508%3A24889&mode=design)
+
+## Related items
+
+[Display of accounts](/articles/banking-display-accounts)
+
+[Display of transactions](/articles/banking-display-transactions)
+
+[Hand offs](/articles/banking-hand-offs)
+
+[Things you should know](/articles/banking-tysk)
+
+[Back to Banking](/articles/banking)

apps/site/src/content/articles/banking-tysk.yaml

@@ -0,0 +1,7 @@
+name: Things you should kn -
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695782900/cln15crdr001vvd8igdiy7fcz.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking-tysk/content.mdoc

@@ -0,0 +1,40 @@
+Use this pattern to communicate terms and conditions, or any other considerations or information a customer is required to know.
+
+## What’s happening here?
+
+There are two different ways we display Things you should know - visible on screen and accessed via a link.
+
+**On-screen** - These are displayed as either visible text or links in the following scenarios:
+
+- When we’re communicating information that’s vital to the customer and must therefore be viewed on the same screen as the task they’re completing.
+- When the content is short (four lines or less) on a mobile view.
+
+**Link.** This option allows the customer to access the Things you should know information via a link that opens a dialog. This is reserved for situations where the content is longer than 4 lines.
+
+## Why do we do it this way?
+
+### Reduce load
+
+Things you should know content can often be long and complex. When we allow the customer to access information via a link, it makes it easily accessible without overwhelming them with too much content at once. This keeps the process simple and easy to complete.
+
+## Where does it sit in the experience?
+
+This pattern is for customers who are at any stage of an experience. However, it is usually shown just before a customer completes a task.
+
+## 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 - Things you should know](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1109%3A36771&type=design&node-id=1508-23333&viewport=163%2C45%2C0.14&t=UDz9r4BXRg16cv1U-1&scaling=scale-down-width)
+
+## Related items
+
+[Display of accounts](/articles/banking-display-accounts)
+
+[Display of transactions](/articles/banking-display-transactions)
+
+[Onboarding](/articles/banking-onboarding)
+
+[Hand offs](/articles/banking-hand-offs)
+
+[Back to Banking](/articles/banking)

apps/site/src/content/articles/banking.yaml

@@ -0,0 +1,16 @@
+name: Banking
+description: >-
+  Digital banking is a critical need for our customers. It allows them to access
+  their accounts and perform transactions 24/7, providing convenience and
+  flexibility.   Through analysis and research, we have created digital banking
+  patterns and guidelines that put our customers at the heart of our
+  experiences.  They incorporate the CX principles and standards, meet our
+  compliance commitments, and create consistency across our digital channels. 
+  By using these patterns, projects can replicate what works, so there’s no need
+  to reinvent the wheel.
+author: digital-experience
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695868279/cln2k6p0p0025vd8iauie3l0o.png
+  height: 1080
+  width: 1920

apps/site/src/content/articles/banking/content.mdoc

@@ -0,0 +1,41 @@
+{% articleBodyImage 
+    image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695871389/cln2m1do10026vd8i9uf66u3a.png", alt: "orginations", height: 1800, width: 1852} 
+    type="body" /%}
+
+By reducing re-work we can achieve increased speed to market and more consistent, simple experiences for our customers, leading to greater satisfaction with the Bank. We support our customers to get what they need done when they need to do it, simply and efficiently. 
+
+We ensure they find it easy to use our digital banking service and have their needs met efficiently.
+
+## What makes a good digital banking experience?
+
+#### Trust
+
+Provide robust security that sets out to protect customers privacy and protect their financial wellbeing.
+
+#### Accessible
+
+Aways on and available across various devices to ensure customers can conveniently transact and manage their finances regardless of when, where and how they choose.
+
+#### Personalised
+
+Provide meaningful financial insights to empower customers to make more informed decisions and to easily identify the products that best suit their needs.
+
+#### Customisable
+
+Support customers to take control of preferences and customise their banking experience.
+
+## Getting support
+
+[How to get support and have your work reviewed.](https://www.figma.com/proto/XCsYG5gUYfeFQFi2lRiKJD/GEL-Patterns---Graphics?page-id=1%3A14811&type=design&node-id=103-14210&viewport=3875%2C1658%2C0.25&t=FxDW9hxQavw78gve-1&scaling=scale-down-width&mode=design)
+
+## Related items
+
+[Display of accounts](/articles/banking-display-accounts)
+
+[Display of transactions](/articles/banking-display-transactions)
+
+[Onboarding](/articles/banking-onboarding)
+
+[Hand offs](/articles/banking-hand-offs)
+
+[Things you should know](/articles/banking-tysk)

apps/site/src/content/articles/notifications-push.yaml

@@ -0,0 +1,8 @@
+name: Push
+thumbnail: {}
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695796155/cln1d8uxx001yvd8i50s50fdh.png
+  height: 1080
+  width: 1920
+author: digital-experience

apps/site/src/content/articles/notifications-push/content.mdoc

@@ -0,0 +1,51 @@
+Use this pattern to provide customers with concise, real-time updates or personalised content that will enhance user engagement and keep them informed. Push notifications can provide helpful information such as credit card repayment reminders, transaction alerts and security alerts.
+
+Their immediacy and ability to grab attention means they can also assist in the early detection of fraudulent activity and help our customers manage their finances.
+
+### What’s happening here?
+
+**Brand logo** – This provides instant recognition and a sense of trust, encouraging customers to engage with the message.
+
+**Customer name** - Addressing the customer by name to demonstrate importance, build rapport, gain attention and promote engagement.
+
+**Message text** – Limit length to ensure a full display of the notification. Keep it concise, the longer the message, the lower the engagement (clicks) of the customer.
+
+**Call to action** – Give the customer the confidence to act.
+
+### Why do we do it this way? 
+
+Our push notification design is grounded in delivering a user-centric experience that is not only effective but also respectful of our customers' preferences and needs.
+
+We have applied experience principles and standards to the designs to deliver an intentional and cohesive customer experience across the digital channel.
+
+#### Brilliantly Simple
+
+We're providing a clear and concise message with relevant action to make engagement simple for our customers.
+
+#### Empowers Customers
+
+We're providing a two-way communication channel, so that our customers can instantly respond to our messages and act on their accounts.
+
+#### Know Me
+
+Addressing our customers by their names is a fundamental aspect of our notification design, because you will be treating each customer as an individual as well as establishing a sense of familiarity and trust. 
+
+### Where does it sit in the sequence?
+
+Push is the first notification type that we send. It is our first attempt to contact the customer.
+
+### How do we want our customers to feel?
+
+“It's great that the Bank lets me know what I need to do to take care of my accounts and makes it easy to sort things out.” 
+
+### Related items
+
+[SMS](/articles/notifications-sms)
+
+[Splash](/articles/notifications-splash)
+
+[Secure message](/articles/notifications-secure-message)
+
+[Skinny banner](/articles/notifications-skinny-banner)
+
+[Notifications](/articles/notifications)

apps/site/src/content/articles/notifications-secure-message.yaml

@@ -0,0 +1,8 @@
+name: Secure message
+thumbnail: {}
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695796181/cln1d9er6001zvd8i33dt3zti.png
+  height: 1080
+  width: 1920
+author: digital-experience