Skip to main content

Confirmation

Introduction#

The confirmation page type is used to show a customer that their journey or task has been completed.

It is important to differentiate from previous stages.

Purpose#

  • To reassure the customer that a task was completed.
  • To play back relevant information.
  • To set expectations of any further steps required.

For more information on how to bookend your journeys see the Start page type.

Principles to follow#

CreativeTone of voiceKeywords
Clean and freshBe helpfulFunctional, Informative

Example#

Content guidance#

The page should always begin with a clear completion message.

Any key information the customer needs to remember or save for a later date should be presented at the top of the page. This might include:

  • Any reference numbers.
  • An appointment date and/or time.
  • A start or end date.
  • The duration of a product or service.
  • An address or contact information.

This page will inform the customer that they have successfully completed their current task, and set their expectations for any further steps required.

You can use supporting content to play back their purchase and inform them of what will happen next. If the customer is required to complete any additional follow up tasks, then those should be positioned as close to the top of the page as possible.

Page compositionDescription
Image of headerThis page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence.
Image of landmark-hillsideNext is ns-landmark showing a clear completion message. Any key information the customer needs to remember or save for a later, such as appointment details should be presented here.
Image of TimelineBelow the message can be ns-timeline that shows a status overview of the whole process whilst setting expectations for the further steps.
Image of supplementary cardsFollowing that, there can be supplementary content that consists of more ns-card components, consider introducing a decoration that is sympathetic to the surrounding aesthetics.
Image of FooterFinally, there is nsx-footer which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps.

Supporting confirmation email#

In addition to this page, a confirmation email containing this information should be sent to the customer. This is especially important if the customer cannot bookmark or revisit this page once they have navigated away from it.

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.