Confirmation pages are the last step of a digital service. They let users know they've completed the task at hand. For example, submitting an application.
They are often used with Email receipt messages.
Why we have a design pattern for Email receipt messages
We have a design pattern for Email receipt messages so users:
- are confident a transaction is complete;
- understand if they need to to anything else;
- know what to expect; and
- can contact a person if they need assistance.
When to use a Confirmation page
Use a Confirmation page if you deliver a digital service on online form.
When not to use a Confirmation page
You do not need to use a Confirmation page if there is no transactional component to the product you're delivering.
How Confirmation pages work
A confirmation page presents the user with information to give them confidence they've completed a task and helps them decide what to do next.
Placement
The Confirmation page should be the last step in the transaction. It will go after a Check answers page if there is no payment, or it will go after a Payment page when people pay online.
Language and style
Confirmation pages have the following parts.
Confirmation line
This is one line. The text should be bold and later than the rest of the text on the page.
Use this text: Your application was successfully received
Page or step number of the service
This text is the same size as the rest of the page and in bold.
Use this text: Page 7 of 7 or Step 7 of 7
Success alert
This is one line of text and styled as a Success alert. Use the following hex codes:
- Border #244402
- Icon #244402 (transparent icon)
- Text #244402
- Background #e1ebd7
Use this text: Your application was successfully received by the Government of Yukon.
What you need to do
This is a heading 2.
The language you use to describe the actions a person must do should be clear and to the point. Let them know if they need to do something. If they must take an action in a certain timeframe or by a certain date - let them know.
If there is no action for them to take, write "You do not need to do anything right now."
What will happen next
This is a heading 2.
This section tells the user what they should expect. If your service requires that the user wait for the government to send them something, tell them when they should expect it.
For example, “Staff will review your application and let you know the decision within 5 to 10 business days.”
Order details
This is a heading 2.
Only include this section if a payment was made. This data is required when a person pays online and you'll pull it from the government's online payment service. You can also add addiional order details if it makes sense for your service.
Required details to include
- Order date and time. For example, June 22, 2021. 2 p.m.
- Order number. For example, 1000044.
- Authorization code. This is the code sent from the bank for approved transactions. For example, 5487.
- Total amount of the order. For example, $15.
- Credit card type. For example, Visa or Mastercard. Don’t use abbreviations.
- Card owner. For example, First name Last name.
- Billing name. For example, First name Last name.
- Merchant online address. This is most often the Yukon.ca page related to the service. For example, Renew a vehicle registration. Read the guidance on links.
- Merchant name. For example, Government of Yukon.
If you need help
This is a heading 3.
Include the followng information.
- Email address and phone number. Text to use: Email [email protected] or phone XXX-XXX-XXXX if you need assistance. Variation with toll free number: Email [email protected], phone XXX-XXX-XXXX or toll free in the Yukon X-XXX-XXX-XXXX ext. XXXX if you need assistance.
- Physical location (optional):
You can also visit our office at _________ in Whitehorse. We are open Monday to Friday from X am to X pm.
Variation: You can also visit one of our offices in your community. (Link goes to a webpage with office information listed. - Order confirmation number or transaction reference number (if applicable). Refer to confirmation number ABC123.
Direct the user away from the Confirmation page
Give the user an option to complete another application or go to Yukon.ca. Use this text: Start another application or go to Yukon.ca.
Variation: if the user will not need to start another application you can use this text: You may now exit this service or go to Yukon.ca.
The link to Start another application should take the user to the service Start page.
The link to Yukon.ca should go to the Yukon.ca home page.
Example of a Confirmation page
