diff --git a/apps/site/src/app/(home)/components/hero/hero.component.tsx b/apps/site/src/app/(home)/components/hero/hero.component.tsx index 509472bfe..dc4e0d87f 100644 --- a/apps/site/src/app/(home)/components/hero/hero.component.tsx +++ b/apps/site/src/app/(home)/components/hero/hero.component.tsx @@ -14,9 +14,9 @@ export function Hero() {

- The Global Experience Language is our single source of truth, providing everything you need to deliver our - brand promises and create consistent, coherent customer experiences across our entire digital landscape - faster, and with less effort. + The Global Experience Language is our single source of truth communicating how we design for the digital + channel. It provides tools and guidelines to create and deliver consistent, coherent customer experiences + across our entire digital landscape faster, and with less effort.

diff --git a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx index 0840cd950..b0157776c 100644 --- a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx +++ b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx @@ -1,3 +1,5 @@ +'use client'; + import { DocumentRenderer } from '@keystatic/core/renderer'; import { Grid, GridContainer } from '@westpac/ui'; import Image from 'next/image'; diff --git a/apps/site/src/content/articles/banker-file-upload/content.mdoc b/apps/site/src/content/articles/banker-file-upload/content.mdoc deleted file mode 100644 index d83a27381..000000000 --- a/apps/site/src/content/articles/banker-file-upload/content.mdoc +++ /dev/null @@ -1,48 +0,0 @@ -Use this pattern to allow new or existing business customers to provide their registered business address, principal place of business and business mailing addresses. These addresses are required for general contact information as well as to verify business identification. - -## What’s happening here? - -- **Home address.** A version of this pattern assumes that the customer's home address has already been captured as part of the personal details section of the application. The first question simplifies the process by asking if the home and business addresses are the same. There is also a version to use when the home address is not known. -- **Pre-filling.** Each address is displayed sequentially, only showing the next question when the previous has been answered. Each question asks if it is the same address as the previous. This stops the user having to add the same address multiple times. -- **Pre-filling.** The mailing address is captured by letting the customer either select from the addresses already provided in the application or by choosing to provide a new address. -- **Auto/manual entry.** The address capture component allows the customer to either enter their address manually or use auto-complete to search and select it. - -## Why do we do it this way? - -### Reduce load - -If we have already captured customer information it is a better experience to use it, rather than ask for it again. - -### Empower customers - -Giving the customer the option to either search for their address, or to enter it manually gives them a sense of control. - -## Where does it sit in the sequence? - -Business address is generally captured just after identity check, along with all the other business details. - -## How do we want our customers to feel? - -After providing their address details, customers should feel delighted that the process felt so quick and easy and confident that they have provided what has been asked of them. - -## 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 - Business address](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=716%3A5483&type=design&node-id=716-5484&viewport=-11058%2C3152%2C5.97&t=gYjpfddVneZItggE-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Confirm profile](/articles/originations-confirm-profile) -- [Contact details](/articles/originations-capture-contact-details) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml index cc51f1105..9c1264429 100644 --- a/apps/site/src/content/articles/banking-display-accounts.yaml +++ b/apps/site/src/content/articles/banking-display-accounts.yaml @@ -1,7 +1,8 @@ name: Banking display of accounts -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695774586/cln10ek1v001qvd8idm00epsy.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking-display-accounts/content.mdoc b/apps/site/src/content/articles/banking-display-accounts/content.mdoc index 94e8d32d0..679c5ce9d 100644 --- a/apps/site/src/content/articles/banking-display-accounts/content.mdoc +++ b/apps/site/src/content/articles/banking-display-accounts/content.mdoc @@ -25,18 +25,12 @@ Anywhere we need to display account information to customers e.g. dashboards, ac ## 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: +Here are links to detailed specifications of 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) +{% linkList + links=[{label: "Pattern guidelines - Display of accounts", url: "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", type: "_blank"}] /%} -## Related items +## More patterns -[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) +{% linkList + links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/banking-display-transactions.yaml b/apps/site/src/content/articles/banking-display-transactions.yaml index 73b2734b5..92bf603d2 100644 --- a/apps/site/src/content/articles/banking-display-transactions.yaml +++ b/apps/site/src/content/articles/banking-display-transactions.yaml @@ -1,7 +1,8 @@ name: Display of transactions -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695782572/cln155psl001uvd8i0fuq9dfs.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking-display-transactions/content.mdoc b/apps/site/src/content/articles/banking-display-transactions/content.mdoc index 70e55ff3b..279dab85f 100644 --- a/apps/site/src/content/articles/banking-display-transactions/content.mdoc +++ b/apps/site/src/content/articles/banking-display-transactions/content.mdoc @@ -19,7 +19,7 @@ The transaction detail and its status is real-time, giving the customers the mos ### 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. +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? @@ -27,18 +27,12 @@ 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: +Here are links to detailed specifications of 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) +{% linkList + links=[{label: "Pattern guidelines - Display of accounts", url: "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", type: "_blank"}] /%} -## Related items +## More patterns -[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) +{% linkList + links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/banking-hand-offs.yaml b/apps/site/src/content/articles/banking-hand-offs.yaml index 32d0dd474..e83433dcc 100644 --- a/apps/site/src/content/articles/banking-hand-offs.yaml +++ b/apps/site/src/content/articles/banking-hand-offs.yaml @@ -1,7 +1,8 @@ name: Hand-offs -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695783266/cln15klrw001xvd8igne64soh.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking-hand-offs/content.mdoc b/apps/site/src/content/articles/banking-hand-offs/content.mdoc index 5cad4876c..4a755cc3c 100644 --- a/apps/site/src/content/articles/banking-hand-offs/content.mdoc +++ b/apps/site/src/content/articles/banking-hand-offs/content.mdoc @@ -2,7 +2,7 @@ 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. +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? @@ -16,18 +16,12 @@ This pattern is displayed when the customer is moving from one process to anothe ## 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: +Here are links to detailed specifications of 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) +{% linkList + links=[{label: "Pattern guidelines - Banking hand-offs", url: "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", type: "_blank"}] /%} -## Related items +## More patterns -[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) +{% linkList + links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/banking-onboarding.yaml b/apps/site/src/content/articles/banking-onboarding.yaml index 80d165457..2049251eb 100644 --- a/apps/site/src/content/articles/banking-onboarding.yaml +++ b/apps/site/src/content/articles/banking-onboarding.yaml @@ -1,7 +1,8 @@ name: Onboarding -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695783106/cln15h6a4001wvd8i9rs50m3t.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking-onboarding/content.mdoc b/apps/site/src/content/articles/banking-onboarding/content.mdoc index a06765af0..2154958c6 100644 --- a/apps/site/src/content/articles/banking-onboarding/content.mdoc +++ b/apps/site/src/content/articles/banking-onboarding/content.mdoc @@ -19,18 +19,12 @@ This pattern should be presented BEFORE the customer gets into the specific feat ## 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: +Here are links to detailed specifications of 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) +{% linkList + links=[{label: "Pattern guidelines - Banking onboarding", url: "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", type: "_blank"}] /%} -## Related items +## More patterns -[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) +{% linkList + links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml index 33202d395..a9c254a75 100644 --- a/apps/site/src/content/articles/banking-tysk.yaml +++ b/apps/site/src/content/articles/banking-tysk.yaml @@ -1,7 +1,8 @@ name: Things you should kn - -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695782900/cln15crdr001vvd8igdiy7fcz.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking-tysk/content.mdoc b/apps/site/src/content/articles/banking-tysk/content.mdoc index 715bdb7b4..9d9d4d020 100644 --- a/apps/site/src/content/articles/banking-tysk/content.mdoc +++ b/apps/site/src/content/articles/banking-tysk/content.mdoc @@ -23,18 +23,12 @@ This pattern is for customers who are at any stage of an experience. However, it ## 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: +Here are links to detailed specifications of 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) +{% linkList + links=[{label: "Pattern guidelines - Things you should know", url: "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", type: "_blank"}] /%} -## Related items +## More patterns -[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) +{% linkList + links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/banking.yaml b/apps/site/src/content/articles/banking.yaml index 415586c1a..ac8bf579c 100644 --- a/apps/site/src/content/articles/banking.yaml +++ b/apps/site/src/content/articles/banking.yaml @@ -8,9 +8,10 @@ description: >- 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 +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695868279/cln2k6p0p0025vd8iauie3l0o.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/banking/content.mdoc b/apps/site/src/content/articles/banking/content.mdoc index 6fa4c5ac4..a09db1b8d 100644 --- a/apps/site/src/content/articles/banking/content.mdoc +++ b/apps/site/src/content/articles/banking/content.mdoc @@ -1,6 +1,6 @@ -{% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695871389/cln2m1do10026vd8i9uf66u3a.png", alt: "orginations", height: 1800, width: 1852} - type="body" /%} +{% 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.  @@ -24,11 +24,7 @@ Provide meaningful financial insights to empower customers to make more informed 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 +### UX patterns [Display of accounts](/articles/banking-display-accounts) @@ -39,3 +35,7 @@ Support customers to take control of preferences and customise their banking exp [Hand offs](/articles/banking-hand-offs) [Things you should know](/articles/banking-tysk) + +## 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) diff --git a/apps/site/src/content/articles/notifications-push/content.mdoc b/apps/site/src/content/articles/notifications-push/content.mdoc index 883ec43bb..05fea4ed1 100644 --- a/apps/site/src/content/articles/notifications-push/content.mdoc +++ b/apps/site/src/content/articles/notifications-push/content.mdoc @@ -12,7 +12,7 @@ Their immediacy and ability to grab attention means they can also assist in the **Call to action** – Give the customer the confidence to act. -### Why do we do it this way? +### 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. @@ -28,7 +28,7 @@ We're providing a two-way communication channel, so that our customers can insta #### 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. +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? @@ -36,16 +36,9 @@ Push is the first notification type that we send. It is our first attempt to con ### 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.” +“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 +## More patterns -[SMS](/articles/notifications-sms) - -[Splash](/articles/notifications-splash) - -[Secure message](/articles/notifications-secure-message) - -[Skinny banner](/articles/notifications-skinny-banner) - -[Notifications](/articles/notifications) +{% linkList + links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/notifications-secure-message/content.mdoc b/apps/site/src/content/articles/notifications-secure-message/content.mdoc index 596b01c4f..38a895e5b 100644 --- a/apps/site/src/content/articles/notifications-secure-message/content.mdoc +++ b/apps/site/src/content/articles/notifications-secure-message/content.mdoc @@ -8,11 +8,11 @@ Use this pattern to ensure secure, confidential, and convenient communication be Some data is pulled dynamically to display as part of the message. -### Why do we do it this way? +### Why do we do it this way? #### Brilliantly simple -We provide a clear and concise message with relevant action to make engagement simple for our customers. +We provide a clear and concise message with relevant action to make engagement simple for our customers. #### Promotes peace of mind @@ -24,20 +24,13 @@ It ensures that notifications are part of a coherent user experience, with consi ### Where does it sit in the sequence? -Secure messages are typically used after a Push Notification as confirmation or follow-up. +Secure messages are typically used after a Push Notification as confirmation or follow-up. ### How do we want our customers to feel? "It’s easy to understand what’s happening with my accounts and to find the really important notifications I’ve been sent." -### Related items +## More patterns -[Push](/articles/notifications-push) - -[SMS](/articles/notifications-sms) - -[Splash](/articles/notifications-splash) - -[Skinny banner](/articles/notifications-skinny-banner) - -[Notifications](/articles/notifications) +{% linkList + links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/notifications-skinny-banner/content.mdoc b/apps/site/src/content/articles/notifications-skinny-banner/content.mdoc index 50935a99b..bfbec631a 100644 --- a/apps/site/src/content/articles/notifications-skinny-banner/content.mdoc +++ b/apps/site/src/content/articles/notifications-skinny-banner/content.mdoc @@ -18,7 +18,7 @@ Placing the skinny banner in the centre of the dashboard will attract attention #### Brilliantly simple -We provide a clear and concise message with relevant action to make engagement simple for our customers. +We provide a clear and concise message with relevant action to make engagement simple for our customers. #### Engage with our customers @@ -32,14 +32,7 @@ Skinny banner is only used after a Push notification. It is not used stand-alone "I could easily see what I needed to do and respond immediately." -### Related items +## More patterns -[Push](/articles/notifications-push) - -[SMS](/articles/notifications-sms) - -[Splash](/articles/notifications-splash) - -[Secure message](/articles/notifications-secure-message) - -[Notifications](/articles/notifications) +{% linkList + links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/notifications-sms/content.mdoc b/apps/site/src/content/articles/notifications-sms/content.mdoc index df05cda6d..fa2d09bda 100644 --- a/apps/site/src/content/articles/notifications-sms/content.mdoc +++ b/apps/site/src/content/articles/notifications-sms/content.mdoc @@ -12,7 +12,7 @@ Use this pattern as a follow up channel to contact the customer. It is usually r #### Brilliantly simple -We provide a clear and concise message with relevant action to make engagement simple for our customers. +We provide a clear and concise message with relevant action to make engagement simple for our customers. ### Where does it sit in the sequence? @@ -22,14 +22,7 @@ An SMS is sent following a push notification. They are usually reserved if there "I feel reassured that the Bank makes it easy for me to be aware of important things that impact my finances." -### Related items +## More patterns -[Push](/articles/notifications-push) - -[Splash](/articles/notifications-splash) - -[Secure message](/articles/notifications-secure-message) - -[Skinny banner](/articles/notifications-skinny-banner) - -[Notifications](/articles/notifications) +{% linkList + links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/notifications-splash/content.mdoc b/apps/site/src/content/articles/notifications-splash/content.mdoc index 31851b7cc..704a34650 100644 --- a/apps/site/src/content/articles/notifications-splash/content.mdoc +++ b/apps/site/src/content/articles/notifications-splash/content.mdoc @@ -36,14 +36,7 @@ After the customer taps on a push notification they will be taken to a splash sc “I'm relieved it's so easy for me to be aware of what I should know and what I need to do.” -### Related items +## More patterns -[Push](/articles/notifications-push) - -[SMS](/articles/notifications-sms) - -[Secure message](/articles/notifications-secure-message) - -[Skinny banner](/articles/notifications-skinny-banner) - -[Notifications](/articles/notifications) +{% linkList + links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/originations-business-address.yaml b/apps/site/src/content/articles/originations-business-address.yaml index 1bc891549..1c05e1375 100644 --- a/apps/site/src/content/articles/originations-business-address.yaml +++ b/apps/site/src/content/articles/originations-business-address.yaml @@ -1,7 +1,8 @@ name: Business address -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/clmzj7hwq001mvd8iairl9yoy.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-business-address/content.mdoc b/apps/site/src/content/articles/originations-business-address/content.mdoc index d83a27381..dd2088ef1 100644 --- a/apps/site/src/content/articles/originations-business-address/content.mdoc +++ b/apps/site/src/content/articles/originations-business-address/content.mdoc @@ -29,20 +29,10 @@ After providing their address details, customers should feel delighted that the Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: -[Pattern guidelines - Business address](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=716%3A5483&type=design&node-id=716-5484&viewport=-11058%2C3152%2C5.97&t=gYjpfddVneZItggE-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Confirm profile](/articles/originations-confirm-profile) -- [Contact details](/articles/originations-capture-contact-details) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) +{% linkList + links=[{label: "Pattern guidelines - Business address", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=716%3A5483&type=design&node-id=716-5484&viewport=-11058%2C3152%2C5.97&t=gYjpfddVneZItggE-1&scaling=scale-down-width&mode=design", type: "_blank"}, {label: "Figma resources - Business address", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-14646&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-business-industry.yaml b/apps/site/src/content/articles/originations-business-industry.yaml index 5b5d4de19..2e9b3f6c8 100644 --- a/apps/site/src/content/articles/originations-business-industry.yaml +++ b/apps/site/src/content/articles/originations-business-industry.yaml @@ -1,7 +1,8 @@ name: Business industry -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685221/clmzj75p4001lvd8ih9cfa1hs.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-business-industry/content.mdoc b/apps/site/src/content/articles/originations-business-industry/content.mdoc index ae9ab8bd5..a910fbd62 100644 --- a/apps/site/src/content/articles/originations-business-industry/content.mdoc +++ b/apps/site/src/content/articles/originations-business-industry/content.mdoc @@ -31,21 +31,10 @@ After providing their industry information, customers should feel confident that Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: -[Pattern guidelines - Business industry](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=703%3A1559&type=design&node-id=703-1560&viewport=132%2C208%2C0.35&t=Broe9KyTa8P6CDJg-1&scaling=scale-down-width&mode=design) - -#### Related items - -- [Business address](/articles/originations-business-address) -- [Celebration moment](/articles/originations-celebration-moment) -- [Confirm profile](/articles/originations-confirm-profile) -- [Contact details](/articles/originations-capture-contact-details) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Industry type](/articles/originations-business-industry) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) +{% linkList + links=[{label: "Pattern guidelines - Business industry", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=703%3A1559&type=design&node-id=703-1560&viewport=132%2C208%2C0.35&t=Broe9KyTa8P6CDJg-1&scaling=scale-down-width&mode=design", type: "_blank"}, {label: "Figma resources - Business industry", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-20034&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-capture-contact-details.yaml b/apps/site/src/content/articles/originations-capture-contact-details.yaml index 3ac06e2bd..c232c46c0 100644 --- a/apps/site/src/content/articles/originations-capture-contact-details.yaml +++ b/apps/site/src/content/articles/originations-capture-contact-details.yaml @@ -1,7 +1,8 @@ name: Contact details -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695948745/cln3w3dmk002evd8ie8zubqoj.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-capture-contact-details/content.mdoc b/apps/site/src/content/articles/originations-capture-contact-details/content.mdoc index 95c1d9b9e..3612a2061 100644 --- a/apps/site/src/content/articles/originations-capture-contact-details/content.mdoc +++ b/apps/site/src/content/articles/originations-capture-contact-details/content.mdoc @@ -29,19 +29,7 @@ You should capture basic details as early as possible in the application process “This is simple.” -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-celebration-moment.yaml b/apps/site/src/content/articles/originations-celebration-moment.yaml index 4d061237e..903d2777f 100644 --- a/apps/site/src/content/articles/originations-celebration-moment.yaml +++ b/apps/site/src/content/articles/originations-celebration-moment.yaml @@ -1,7 +1,8 @@ name: Celebration moment -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695948709/cln3w2lu2002dvd8ighgxcxez.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-celebration-moment/content.mdoc b/apps/site/src/content/articles/originations-celebration-moment/content.mdoc index ccab61664..c63f323f7 100644 --- a/apps/site/src/content/articles/originations-celebration-moment/content.mdoc +++ b/apps/site/src/content/articles/originations-celebration-moment/content.mdoc @@ -30,19 +30,7 @@ Our customers should feel a sense of delight and accomplishment once they’ve f “I feel welcomed, I'm not just a number.” -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-confirm-profile.yaml b/apps/site/src/content/articles/originations-confirm-profile.yaml index e9690116c..7fe013757 100644 --- a/apps/site/src/content/articles/originations-confirm-profile.yaml +++ b/apps/site/src/content/articles/originations-confirm-profile.yaml @@ -1,7 +1,8 @@ name: Confirm profile -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685196/clmzj6mhn001kvd8ifngh2qks.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-confirm-profile/content.mdoc b/apps/site/src/content/articles/originations-confirm-profile/content.mdoc index 8679960d7..e6fca5fa8 100644 --- a/apps/site/src/content/articles/originations-confirm-profile/content.mdoc +++ b/apps/site/src/content/articles/originations-confirm-profile/content.mdoc @@ -29,21 +29,10 @@ After confirming their profile, the customer should feel recognised, valued and Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: -[Pattern guidelines - Confirm profile](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=605%3A40445&type=design&node-id=605-40446&viewport=577%2C397%2C0.58&t=OPCMUdjRMD21VKGj-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +{% linkList + links=[{label: "Pattern guidelines - Confirm profile", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=605%3A40445&type=design&node-id=605-40446&viewport=577%2C397%2C0.58&t=OPCMUdjRMD21VKGj-1&scaling=scale-down-width&mode=design", type: "_blank"}, {label: "Figma resources - Confirm profile", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-23762&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-experience.yaml b/apps/site/src/content/articles/originations-experience.yaml index 0f091bc43..30c8359e0 100644 --- a/apps/site/src/content/articles/originations-experience.yaml +++ b/apps/site/src/content/articles/originations-experience.yaml @@ -7,9 +7,10 @@ description: >- consistency across our digital channels. The originations conventions include a sequence and reusable patterns. By using these conventions, projects can replicate what works, so there’s no need to reinvent the wheel every time. -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695945747/cln3ub41e002cvd8idz6ld0k7.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-experience/content.mdoc b/apps/site/src/content/articles/originations-experience/content.mdoc index d11c972c2..efa117740 100644 --- a/apps/site/src/content/articles/originations-experience/content.mdoc +++ b/apps/site/src/content/articles/originations-experience/content.mdoc @@ -1,6 +1,6 @@ -{% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1687322520/clj589gfp001ibn8i12yhg237.png", alt: "orginations", height: 1800, width: 1852} - type="body" /%} +{% articleBodyImage + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1687322520/clj589gfp001ibn8i12yhg237.png", alt: "orginations", height: 1800, width: 1852} + type="body" /%} ### How to apply the Originations Conventions @@ -27,12 +27,14 @@ You must adopt the patterns ‘as is’, but you can adjust the copy and disclos - [Celebration moment](/articles/originations-celebration-moment) Shares a moment of delight when a customer’s application has been approved. - [Confirm profile](/articles/originations-confirm-profile) Allows a customer to select the appropriate business profile for their application. (Business customers only) - [Contact details](/articles/originations-capture-contact-details) Captures basic information to get a customer started. -- Dashboard (Coming soon) +- [File upload](/articles/originations-file-upload) Allow business customers to upload documentation required for an application process. (Business customers only) - [Foreign tax residency](/articles/originations-foreign-tax-residency) Collects the foreign tax residency status of a customer. +- [Future financial changes](/articles/originations-future-financial-changes) Collects information about changes in a customer's future that could adversely affect their finances. - [Retrieve application](/articles/originations-retrieve-application) Allows a customer to find and continue a saved application. -- Review (Coming soon) Allows a customer to review the information they provided during an application process. +- [Review update indictor](/articles/originations-review-update-indicator) Highlights data conflicts when there are multiple applicants/bankers contributing to an application process. (Business customers only) - [Select Business](/articles/originations-select-business) Helps a customer to find the details of their business. (Business customers only) - [Set up Online Banking](/articles/originations-set-up-online-banking) Helps a customer to set up Online Banking during the application process. +- [Source of funds and wealth](/articles/originations-source-funds-and-wealth) Collects income sources and wealth-building information from new or existing business and consumer customers. - [Third party intro](/articles/originations-third-party-intro) Provides information to direct a customer to a third-party platform. - [Verify ID](/articles/originations-verify-ID) Verifies the customer’s identity. @@ -62,4 +64,4 @@ Using the [GEL Design System](/design-system) for additional components and patt ## 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) +[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)(Westpac employees only) diff --git a/apps/site/src/content/articles/banker-file-upload.yaml b/apps/site/src/content/articles/originations-file-upload.yaml similarity index 55% rename from apps/site/src/content/articles/banker-file-upload.yaml rename to apps/site/src/content/articles/originations-file-upload.yaml index 02d2aec10..c4357ce16 100644 --- a/apps/site/src/content/articles/banker-file-upload.yaml +++ b/apps/site/src/content/articles/originations-file-upload.yaml @@ -2,7 +2,7 @@ name: File upload thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/clmzj7hwq001mvd8iairl9yoy.png - height: 1080 - width: 1920 -author: Digital Experience + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/File_upload_BizEdge_x7p1wf + height: 1464 + width: 2400 +author: Business borrow team diff --git a/apps/site/src/content/articles/originations-file-upload/content.mdoc b/apps/site/src/content/articles/originations-file-upload/content.mdoc new file mode 100644 index 000000000..6fb306a3d --- /dev/null +++ b/apps/site/src/content/articles/originations-file-upload/content.mdoc @@ -0,0 +1,36 @@ +Use the File upload pattern to allow business customers to upload documentation required for an application process, or to provide instructions on who will be providing the documentation on their behalf.  + +## What’s happening here? + +- **Provider** The customer indicates who’ll be providing each document. This selection will update the questions that follow, as only the current user is able to upload. Any third-party providers will be contacted directly by the bank.   +- **Exceptions** If the customer is unable to upload a particular document or if they can’t find the document provider they’re looking for, the system provides instruction of next steps and allows them to continue with the remaining documents.  +- **Adding files** Files can be selected from either the customers’s file selection window or by drag-and-drop. Multiple files can be added at once.  +- **Uploading** When all the files have been added and there are no errors, the upload can be confirmed. Once confirmed the files can’t be deleted or the provider changed.  +- **More files** Additional files can be added after confirmation.  + +## Why do we do it this way? + +### Empower customers + +- Being able to provide this sort of documentation online, as opposed to hard copy or email, saves our customers time and provides clarity and efficiency.   +- Uploading files directly into application and having clear requirements outlining which documents are needed, empowers our customers and helps them feel confident and organised.  + +## Where does it sit in the application? + +This component appears in the process wherever a document needs to be uploaded.  + +## How do we want our customers to feel? + +After uploading their documentation, customers should feel confident that they have provided all the documents and/or directions needed to complete their application.  + +## Looking for detailed designs? + +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: + +{% linkList + links=[{label: "Pattern guidelines - File upload", url: "https://www.figma.com/proto/JkIUUVEfnOZKwNKs5w4LFB/Banker-patterns---Guidelines?page-id=716%3A5483&node-id=3905-15311&viewport=1470%2C232%2C0.24&t=KlG3ytS6j0R3OAbz-1&scaling=scale-down-width&content-scaling=fixed", type: "_blank"}, {label: "Figma resources - File upload (BizEdge library)", url: "https://www.figma.com/design/hqdq3nTywLxug5hGOSu3MU/BizEdge-(SOP)-Tier-2-Library?node-id=5-244&t=3bfvpbDYXwDvRYrA-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "Back to all originations patterns", url: "/articles/originations-experience", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/originations-foreign-tax-residency.yaml b/apps/site/src/content/articles/originations-foreign-tax-residency.yaml index e8c78ab20..bc162e34b 100644 --- a/apps/site/src/content/articles/originations-foreign-tax-residency.yaml +++ b/apps/site/src/content/articles/originations-foreign-tax-residency.yaml @@ -1,7 +1,8 @@ name: Foreign Tax Residency -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685171/clmzj6330001jvd8i5jiaat1g.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-foreign-tax-residency/content.mdoc b/apps/site/src/content/articles/originations-foreign-tax-residency/content.mdoc index 3702c3a6d..035c3d969 100644 --- a/apps/site/src/content/articles/originations-foreign-tax-residency/content.mdoc +++ b/apps/site/src/content/articles/originations-foreign-tax-residency/content.mdoc @@ -14,7 +14,7 @@ Starting with*Yes/No*allows the more detailed questions to only be shown to the ### Brilliantly simple -Using the search functionality to select a country allows us to display any further country-specific information the customer is required to provide. For example, some countries require a Foreign Taxpayer Identification Number (TIN) and some don’t. +Using the search functionality to select a country allows us to display any further country-specific information the customer is required to provide. For example, some countries require a Foreign Taxpayer Identification Number (TIN) and some don’t. Using the repeater component to allow multiple sets of information keeps the process simple, and only shows complexity to those it is meant for. @@ -30,21 +30,10 @@ After providing these details, the customer should feel secure and confident tha Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: -[Pattern guidelines - Foreign tax Residency](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=605%3A42033&type=design&node-id=605-42034&viewport=827%2C149%2C0.22&t=qzCoLIEw0oQNaUJ7-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +{% linkList + links=[{label: "Pattern guidelines - Foreign tax residency", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-24381&t=INgLVT48rvqWGb6t-1", type: "_blank"}, {label: "Figma resources - Foreign tax residency", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=605%3A42033&type=design&node-id=605-42034&viewport=827%2C149%2C0.22&t=qzCoLIEw0oQNaUJ7-1&scaling=scale-down-width&mode=design", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-future-financial-changes.yaml b/apps/site/src/content/articles/originations-future-financial-changes.yaml new file mode 100644 index 000000000..9e75cca74 --- /dev/null +++ b/apps/site/src/content/articles/originations-future-financial-changes.yaml @@ -0,0 +1,8 @@ +name: Future financial changes +thumbnail: {} +image: + src: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Future_financial_changes_bppwfu + height: 1464 + width: 2400 +author: Borrow team diff --git a/apps/site/src/content/articles/originations-future-financial-changes/content.mdoc b/apps/site/src/content/articles/originations-future-financial-changes/content.mdoc new file mode 100644 index 000000000..b4b6016e1 --- /dev/null +++ b/apps/site/src/content/articles/originations-future-financial-changes/content.mdoc @@ -0,0 +1,35 @@ +Use this pattern to find out if the customer is aware of anything happening in their future that could adversely affect their ability to make their loan repayments. This question is a regulatory requirement.  + +## What’s happening here? + +- **Progressive disclosure** The customer is asked if they see any financial changes in their future. If they answer yes, they’re asked further details about what those changes might be.  +- **Changes** The customer is presented with a list of changes that they can select from – they are able to select multiple options.   +- **Retirement** Depending on the age of the customer, they will be asked when they plan on retiring.  + +## Why do we do it this way? + +### **Brilliantly simple**  + +Using progressive disclosure to only show the content that is required simplifies the process and avoids overwhelming the customer with unnecessary information.  + +## Where does it sit in the sequence? + +The Future financial changes information is usually captured at the end of the origination flow.  + +## How do we want our customers to feel? + +After providing these details +{% u %},{% /u %} +the customer should feel secure and confident that Westpac is doing the right thing to ensure they are not knowing putting their customers into financial hardship.   + +## Looking for detailed designs? + +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: + +{% linkList + links=[{label: "Pattern guidelines - Future financial changes", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Originations-patterns---Guidelines?page-id=2049%3A21829&node-id=2384-3067&viewport=-281%2C902%2C0.28&t=JYBCop6HnnmYhJ8K-1&scaling=scale-down-width&content-scaling=fixed", type: "_blank"}, {label: "Figma resources - Future financial changes", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=3438-10359&t=hVqwIEq6c80BXwtT-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-retrieve-application.yaml b/apps/site/src/content/articles/originations-retrieve-application.yaml index 2d5ed1f13..da5d4034a 100644 --- a/apps/site/src/content/articles/originations-retrieve-application.yaml +++ b/apps/site/src/content/articles/originations-retrieve-application.yaml @@ -1,7 +1,8 @@ name: Retrieve application -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685156/clmzj5r5w001ivd8iadshc9c7.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-retrieve-application/content.mdoc b/apps/site/src/content/articles/originations-retrieve-application/content.mdoc index 62c36c7a4..f7d915105 100644 --- a/apps/site/src/content/articles/originations-retrieve-application/content.mdoc +++ b/apps/site/src/content/articles/originations-retrieve-application/content.mdoc @@ -24,21 +24,10 @@ After retrieving their application, customers should feel delighted that the pro Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: -[Pattern guidelines - Retrieve application](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=723%3A7300&type=design&node-id=723-7301&viewport=633%2C281%2C0.5&t=beEAhM9o4h7nwNi7-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/Foreign%20tax%20residency) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +{% linkList + links=[{label: "Pattern guidelines - Retrieve application", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=723%3A7300&type=design&node-id=723-7301&viewport=633%2C281%2C0.5&t=beEAhM9o4h7nwNi7-1&scaling=scale-down-width&mode=design", type: "_blank"}, {label: "Figma resources - Retrieve application", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-23219&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-review-update-indicator.yaml b/apps/site/src/content/articles/originations-review-update-indicator.yaml new file mode 100644 index 000000000..99a244171 --- /dev/null +++ b/apps/site/src/content/articles/originations-review-update-indicator.yaml @@ -0,0 +1,10 @@ +name: 'Review with update indicator (BizEdge) ' +thumbnail: {} +smallDescription: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Review_update_indicator_b5fjki +image: + src: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Review_update_indicator_b5fjki + height: 1464 + width: 2400 +author: Business borrow team diff --git a/apps/site/src/content/articles/originations-review-update-indicator/content.mdoc b/apps/site/src/content/articles/originations-review-update-indicator/content.mdoc new file mode 100644 index 000000000..89b2f83e4 --- /dev/null +++ b/apps/site/src/content/articles/originations-review-update-indicator/content.mdoc @@ -0,0 +1,32 @@ +Use the Review with update Indicator pattern when there are multiple applicants/bankers contributing to an application process. It is designed to visually highlight information that has been updated or suggested for change by other applicants.   + +## What’s happening here? + +- **The process** Once the main applicant completes their application, the other applicants are then able to provide their own details as well as review the information the primary applicant has provided. If they don’t agree with anything the primary applicant has said, they’re able to indicate their suggested amendments. This pattern highlights these discrepancies so they can be reviewed and resolved by the banker.  +- **Visual indication** This pattern uses colour and iconography to highlight the difference between an actual change that has been made and a suggested change by a contributor that is yet to be accepted.  + +## Why do we do it this way? + +### Builds trust + +- Informing users (particularly bankers) of recent modifications or recommended updates to critical information ensures clarity and aids in the decision-making processes.  + +## Where does it sit in the sequence? + +This pattern sits at the review stage of the process.   + +## How do we want our users to feel? + +Our users should feel confident that they have all the information required to complete the application process.  + +## Looking for detailed designs? + +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: + +{% linkList + links=[{label: "Figma resources - Review with update indicator (BizEdge library)", url: "https://www.figma.com/design/hqdq3nTywLxug5hGOSu3MU/BizEdge-(SOP)-Tier-2-Library?node-id=1030-80588&t=3bfvpbDYXwDvRYrA-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-select-business.yaml b/apps/site/src/content/articles/originations-select-business.yaml index 307e869e4..30e17e077 100644 --- a/apps/site/src/content/articles/originations-select-business.yaml +++ b/apps/site/src/content/articles/originations-select-business.yaml @@ -1,7 +1,8 @@ name: Select business -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695685126/clmzj54e9001hvd8i1hynfyle.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-select-business/content.mdoc b/apps/site/src/content/articles/originations-select-business/content.mdoc index 6600c17a0..106105d27 100644 --- a/apps/site/src/content/articles/originations-select-business/content.mdoc +++ b/apps/site/src/content/articles/originations-select-business/content.mdoc @@ -31,27 +31,16 @@ Select business is generally captured just after Identity check, along with all ## How do we want our customers to feel? -After selecting their business, the customer should feel delighted that the process was so easy and that they only needed to select from a list rather than provide all the details. +After selecting their business, the customer should feel delighted that the process was so easy and that they only needed to select from a list rather than provide all the details. ## 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 - Select business](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=526%3A28660&type=design&node-id=542-32739&viewport=627%2C420%2C0.55&t=tl0Of4SfXR2vobgX-1&scaling=scale-down-width&mode=design) - -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +{% linkList + links=[{label: "Pattern guidelines - Select business", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=526%3A28660&type=design&node-id=542-32739&viewport=627%2C420%2C0.55&t=tl0Of4SfXR2vobgX-1&scaling=scale-down-width&mode=design", type: "_blank"}, {label: "Figma resources - Select business", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=1609-21295&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-set-up-online-banking.yaml b/apps/site/src/content/articles/originations-set-up-online-banking.yaml index f81e39de4..2c640e585 100644 --- a/apps/site/src/content/articles/originations-set-up-online-banking.yaml +++ b/apps/site/src/content/articles/originations-set-up-online-banking.yaml @@ -1,7 +1,8 @@ name: Set up Online Banking -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695953272/cln3ysf15002jvd8i9yh335uk.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-set-up-online-banking/content.mdoc b/apps/site/src/content/articles/originations-set-up-online-banking/content.mdoc index dfad7d9fa..0526d6967 100644 --- a/apps/site/src/content/articles/originations-set-up-online-banking/content.mdoc +++ b/apps/site/src/content/articles/originations-set-up-online-banking/content.mdoc @@ -27,19 +27,7 @@ You should consider inserting this pattern towards the end of a journey. Our cus “That was fast. I’m all ready to go.” -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Third party intro](/articles/originations-third-party-intro) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml b/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml new file mode 100644 index 000000000..09a4e07b3 --- /dev/null +++ b/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml @@ -0,0 +1,8 @@ +name: Source of funds & wealth +thumbnail: {} +image: + src: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Source_of_funds_and_wealth_dknao2 + height: 1464 + width: 2400 +author: Borrow team diff --git a/apps/site/src/content/articles/originations-source-funds-and-wealth/content.mdoc b/apps/site/src/content/articles/originations-source-funds-and-wealth/content.mdoc new file mode 100644 index 000000000..55b8e7ecf --- /dev/null +++ b/apps/site/src/content/articles/originations-source-funds-and-wealth/content.mdoc @@ -0,0 +1,33 @@ +Use these patterns to gather income sources and wealth-building information from new or existing business and consumer customers. This is necessary to comply with anti-money laundering and counter-terrorism regulations.  + +## What’s happening here? + +- **List items.** The items contained in the pattern are specified by compliance to adhere to regulatory requirements. There is a different list and ordering based on income vs wealth and business or consumer.  +- **Most common options.** The most commonly selected options are displayed at the top of the list for the customer to choose from.   +- **Additional options.** The remaining options are hidden under a link, allowing the customer to see them only if they need to.  + +## Why do we do it this way? + +### **Accessible and inclusive** + +- Initially showing a shorter list of items makes the process easier for most customers and reduces cognitive load.  + +## Where does it sit in the sequence? + +The Source of funds (or income) pattern always appears before the Source of wealth pattern, they are usually captured along with other financial details.  + +## How do we want our customers to feel? + +After providing these details, the customer should feel secure and confident that Westpac is doing the right thing for the community by ensuring that they are doing all that they can to help stop criminal activity.  + +## Looking for detailed designs? + +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: + +{% linkList + links=[{label: "Pattern guidelines - Source of funds and wealth", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Originations-patterns---Guidelines?page-id=1947%3A3948&node-id=2372-7718&viewport=-251%2C667%2C0.23&t=0P1QOyWM49RzMvQu-1&scaling=scale-down-width&content-scaling=fixed", type: "_blank"}, {label: "Figma resources - Source of funds and wealth", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=3206-112400&t=hVqwIEq6c80BXwtT-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-third-party-intro.yaml b/apps/site/src/content/articles/originations-third-party-intro.yaml index 508508d31..35ff14110 100644 --- a/apps/site/src/content/articles/originations-third-party-intro.yaml +++ b/apps/site/src/content/articles/originations-third-party-intro.yaml @@ -1,7 +1,8 @@ name: Third-party intro -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695953393/cln3yv06g002kvd8id5957qzu.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-third-party-intro/content.mdoc b/apps/site/src/content/articles/originations-third-party-intro/content.mdoc index 20e54c950..875929861 100644 --- a/apps/site/src/content/articles/originations-third-party-intro/content.mdoc +++ b/apps/site/src/content/articles/originations-third-party-intro/content.mdoc @@ -27,19 +27,7 @@ This pattern should be presented before we redirect our customers to a third-par “I feel my time and effort has been taken into consideration.” -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Verify ID](/articles/originations-verify-ID) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/originations-verify-ID.yaml b/apps/site/src/content/articles/originations-verify-ID.yaml index b6123ce1e..d328801df 100644 --- a/apps/site/src/content/articles/originations-verify-ID.yaml +++ b/apps/site/src/content/articles/originations-verify-ID.yaml @@ -1,7 +1,8 @@ name: Verify ID -author: Digital Experience +thumbnail: {} image: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1695965746/cln467r9e002nvd8ie7toail5.png height: 1080 - width: 1920 \ No newline at end of file + width: 1920 +author: Digital Experience diff --git a/apps/site/src/content/articles/originations-verify-ID/content.mdoc b/apps/site/src/content/articles/originations-verify-ID/content.mdoc index 1f9e837d1..28daeb2c6 100644 --- a/apps/site/src/content/articles/originations-verify-ID/content.mdoc +++ b/apps/site/src/content/articles/originations-verify-ID/content.mdoc @@ -35,19 +35,7 @@ If you're applying the Westpac ID Hub solution to your project, consider present “I understand why I have to provide my personal information.” -## Related items - -- [Business address](/articles/originations-business-address) -- [Business industry](/articles/originations-business-industry) -- [Celebration moment](/articles/originations-celebration-moment) -- [Contact details](/articles/originations-capture-contact-details) -- [Confirm profile](/articles/originations-confirm-profile) -- Dashboard (Coming soon) -- [Foreign tax residency](/articles/originations-foreign-tax-residency) -- [Retrieve application](/articles/originations-retrieve-application) -- Review (Coming soon) -- [Select Business](/articles/originations-select-business) -- [Set up Online Banking](/articles/originations-set-up-online-banking) -- [Third party intro](/articles/originations-third-party-intro) -- [Back to Originations](/articles/originations-experience) -- [Back to Sequence](/articles/originations-sequence) +## More patterns + +{% linkList + links=[{label: "All originations patterns", url: "/articles/originations-experience", type: "_self"}, {label: "Originations sequence", url: "/articles/originations-sequence", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/patterns/content.mdoc b/apps/site/src/content/articles/patterns/content.mdoc index 5226e9ed0..56fca8fb2 100644 --- a/apps/site/src/content/articles/patterns/content.mdoc +++ b/apps/site/src/content/articles/patterns/content.mdoc @@ -27,3 +27,10 @@ Apply these patterns when you are delivering a message to customers using our no {% linkList links=[{label: "See the Notifications patterns", url: "/articles/notifications", type: "_self"}] /%} + +## System status + +Apply these patterns when the system or application needs to communicate with the user. + +{% linkList + links=[{label: "See the Empty states pattern", url: "/articles/system-empty-states", type: "_self"}, {label: "See the Error screens pattern", url: "/articles/system-error-screens", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/system-empty-states.yaml b/apps/site/src/content/articles/system-empty-states.yaml new file mode 100644 index 000000000..cceed8b20 --- /dev/null +++ b/apps/site/src/content/articles/system-empty-states.yaml @@ -0,0 +1,10 @@ +name: Empty states +thumbnail: + src: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1720662692/Empty_states_wstqow + alt: Simplified image of Empty states pattern. + height: 1464 + width: 2400 +image: + src: Empty_states_wstqow +author: Business borrow team diff --git a/apps/site/src/content/articles/system-empty-states/content.mdoc b/apps/site/src/content/articles/system-empty-states/content.mdoc new file mode 100644 index 000000000..9f5455cdf --- /dev/null +++ b/apps/site/src/content/articles/system-empty-states/content.mdoc @@ -0,0 +1,32 @@ +Use this pattern during moments in the application where there is no data to display to the banker, or if a search query returns zero results. The pattern comes either with an illustration for when iit’s used to represent an entire page of data, or a simplified version that can be used within a page section.  + +## What’s happening here? + +- **Instruction.** The banker is informed that there is no data to display  +- **Next steps.** When relevant, there is a CTA that can try to refresh the results on the page or section, take the banker to another task or area of the application, or direct the banker to a step that is required to be completed before the information can display.  + +## Why do we do it this way? + +### **Gives a sense of security**  + +- Empty states are crucial for providing a seamless banker experience by reducing confusion and helping bankers understand the context of an empty area within the form.  + +## **Where does it sit in the application?** + +This pattern can be used wherever in the application it is required.  + +## How do we want our bankers to feel? + +Our bankers should feel informed and clear about what is happening on the page and what they need to do to take the next step. The smoothness of experience should make them feel confident, especially when things aren’t working as expected. + +## Looking for detailed designs? + +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: + +{% linkList + links=[{label: "Figma resources - Empty states (BizEdge library)", url: "https://www.figma.com/design/hqdq3nTywLxug5hGOSu3MU/BizEdge-(SOP)-Tier-2-Library?node-id=544-116031&t=ykCBrhbyuhD2rb9i-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "Back to Patterns", url: "/articles/patterns", type: "_self"}] /%} diff --git a/apps/site/src/content/articles/system-error-screens.yaml b/apps/site/src/content/articles/system-error-screens.yaml new file mode 100644 index 000000000..7854719ee --- /dev/null +++ b/apps/site/src/content/articles/system-error-screens.yaml @@ -0,0 +1,9 @@ +name: Error screens +thumbnail: {} +image: + src: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Error_screens_veatop + alt: Simplified image of Error screens pattern. + height: 1464 + width: 2400 +author: Borrow team diff --git a/apps/site/src/content/articles/system-error-screens/content.mdoc b/apps/site/src/content/articles/system-error-screens/content.mdoc new file mode 100644 index 000000000..10bb2eb15 --- /dev/null +++ b/apps/site/src/content/articles/system-error-screens/content.mdoc @@ -0,0 +1,42 @@ +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: + +{% linkList + links=[{label: "Pattern guidelines - Error screens", url: "https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Originations-patterns---Guidelines?page-id=2059%3A26531&node-id=2380-7719&viewport=92%2C881%2C0.21&t=wPL2hohZxjlv4CGf-1&scaling=scale-down-width&content-scaling=fixed", type: "_blank"}, {label: "Figma resources - Error screens", url: "https://www.figma.com/design/2NDHSWNqfLRaJM1gDre42N/Originations-patterns---Sticker-sheets?node-id=3281-7378&t=INgLVT48rvqWGb6t-1", type: "_blank"}] /%} + +## More patterns + +{% linkList + links=[{label: "Back to Patterns", url: "/articles/patterns", type: "_blank"}] /%} diff --git a/apps/site/src/content/articles/what-is-gel.yaml b/apps/site/src/content/articles/what-is-gel.yaml index eb470ee7b..b1c642feb 100644 --- a/apps/site/src/content/articles/what-is-gel.yaml +++ b/apps/site/src/content/articles/what-is-gel.yaml @@ -1,10 +1,10 @@ name: What is GEL? cardTitle: What is GEL? description: >- - The Global Experience Language is our single source of truth, providing - everything you need to deliver our brand promises and create consistent, - coherent customer experiences across our entire digital landscape faster, and - with less effort. + The Global Experience Language is our single source of truth communicating how + we design for the digital channel. It provides tools and guidelines to create + and deliver consistent, coherent customer experiences across our entire + digital landscape faster, and with less effort. thumbnail: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1662699957/cl7u0mgxx000f808i0mjx43a8.png diff --git a/apps/site/src/content/articles/what-is-gel/content.mdoc b/apps/site/src/content/articles/what-is-gel/content.mdoc index 50b3768a8..ec37e6891 100644 --- a/apps/site/src/content/articles/what-is-gel/content.mdoc +++ b/apps/site/src/content/articles/what-is-gel/content.mdoc @@ -31,6 +31,7 @@ The GEL Design System provides the following brand and design foundations that s - **Typography**, fonts to communicate our brand personality. [Read about typography](/articles/typography) - **The grid**, designed to achieve flexible layouts for any device. [Read about the grid](/articles/the-grid) - **Iconography**, designed to communicate meaning and aid navigation. [Read about icons](/articles/iconography) +- **Pictograms,** visual aids to accompany a piece of text to help communicate an idea feature or function - **Symbols**, logos and symbols optimised for digital [Access the brand foundations and design assets from the GEL design system](/design-system) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 14ca8b7ea..be2f1a6b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11418,7 +11418,7 @@ snapshots: '@react-aria/textfield': 3.14.5(react@18.2.0) '@react-aria/toast': 3.0.0-beta.2(react@18.2.0) '@react-aria/tooltip': 3.7.4(react@18.2.0) - '@react-aria/utils': 3.24.1(react@18.2.0) + '@react-aria/utils': 3.23.2(react@18.2.0) '@react-aria/virtualizer': 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@react-aria/visually-hidden': 3.8.12(react@18.2.0) '@react-stately/calendar': 3.5.1(react@18.2.0) @@ -11486,7 +11486,7 @@ snapshots: '@react-aria/label': 3.7.8(react@18.2.0) '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) - '@react-aria/utils': 3.24.1(react@18.2.0) + '@react-aria/utils': 3.23.2(react@18.2.0) '@react-aria/visually-hidden': 3.8.12(react@18.2.0) '@react-stately/collections': 3.10.7(react@18.2.0) '@react-stately/list': 3.10.5(react@18.2.0) @@ -11665,15 +11665,15 @@ snapshots: '@radix-ui/number@1.0.1': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/primitive@1.0.1': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -11683,7 +11683,7 @@ snapshots: '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -11696,28 +11696,28 @@ snapshots: '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-context@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-direction@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -11731,14 +11731,14 @@ snapshots: '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.28)(react@18.2.0) @@ -11750,7 +11750,7 @@ snapshots: '@radix-ui/react-id@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -11758,7 +11758,7 @@ snapshots: '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) @@ -11777,7 +11777,7 @@ snapshots: '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -11787,7 +11787,7 @@ snapshots: '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-slot': 1.0.2(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -11797,7 +11797,7 @@ snapshots: '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) @@ -11845,7 +11845,7 @@ snapshots: '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -11855,7 +11855,7 @@ snapshots: '@radix-ui/react-slot@1.0.2(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -11863,7 +11863,7 @@ snapshots: '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) '@radix-ui/react-direction': 1.0.1(@types/react@18.2.28)(react@18.2.0) @@ -11879,7 +11879,7 @@ snapshots: '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.28)(react@18.2.0) @@ -11907,14 +11907,14 @@ snapshots: '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -11922,7 +11922,7 @@ snapshots: '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -11930,21 +11930,21 @@ snapshots: '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 react: 18.2.0 optionalDependencies: '@types/react': 18.2.28 '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/rect': 1.0.1 react: 18.2.0 optionalDependencies: @@ -11952,7 +11952,7 @@ snapshots: '@radix-ui/react-use-size@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.28)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -11960,7 +11960,7 @@ snapshots: '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.1)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -11970,7 +11970,7 @@ snapshots: '@radix-ui/rect@1.0.1': dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 '@react-aria/accordion@3.0.0-alpha.27(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: @@ -12398,7 +12398,7 @@ snapshots: '@react-aria/landmark@3.0.0-beta.2(react@18.2.0)': dependencies: '@react-aria/focus': 3.17.1(react@18.2.0) - '@react-aria/utils': 3.24.1(react@18.2.0) + '@react-aria/utils': 3.23.2(react@18.2.0) '@react-types/shared': 3.18.1(react@18.2.0) '@swc/helpers': 0.5.11 react: 18.2.0 @@ -12899,7 +12899,7 @@ snapshots: '@react-aria/i18n': 3.11.1(react@18.2.0) '@react-aria/interactions': 3.21.3(react@18.2.0) '@react-aria/landmark': 3.0.0-beta.2(react@18.2.0) - '@react-aria/utils': 3.24.1(react@18.2.0) + '@react-aria/utils': 3.23.2(react@18.2.0) '@react-stately/toast': 3.0.0-beta.1(react@18.2.0) '@react-types/button': 3.9.4(react@18.2.0) '@react-types/shared': 3.18.1(react@18.2.0) @@ -20449,7 +20449,7 @@ snapshots: regenerator-transform@0.15.2: dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.7 regex-parser@2.3.0: {}