Success page - smbc-digital/patterns GitHub Wiki

Contents

– User needs – How it works – Status – Accessibility statement – Examples – Research into this pattern – Discuss this pattern

User needs

This pattern informs the user of a successful process; it is to reassure users that they have completed a transaction and helps them understand what to expect next.

How it works

The content is either generic or could change depending on the logic of the questions the user has answered throughout the form.

Success page must include:

• the panel component which contains a H1
• H1 stating the success of the action
• 'What happens next' - with contact information, if it exists and helps meet a user need
• ‘Go to the homepage’ as either a primary button or a link depending on the context
• NO breadcrumbs - see Success page Axure mock-up for the reason behind this decision. The use of links and buttons (primary and/or secondary) can be used to navigate/signpost users to other relevant content after they've completed their transaction.
• A-Z search cannot appear on Success pages as Formbuilder doesn’t have this functionality

Success pages could include:

• a leading paragraph in the panel component
• a reference number in the panel component if the service requires it

Content rules

Always follow the correct heading structure when it's appropriate. If it's not appropriate to say 'Thanks for...' then do not say it. Therefore in this situation, the heading structure would be:

• We've received....
• Your reference number is ....

General content rules for Success pages: Axure - Success page

Success page content rules for Payments - see:

• Axure - Pay pattern

• GitHub patterns - Pay pattern

Success page content rules for Document upload - see:

• Axure - Out of form success page with document upload

• Axure - Success page document upload

• GitHub patterns - Document upload

Status

Working progress

Accessibility statement

This pattern has a rating of AA.

Please see our accessibility statement.

Improvements

To make it AAA, we need to:

• Add...

Examples

Axure mock-up - success page desktop

Axure mock-up - success page mobile

Research into this pattern

For the development of this pattern, we looked closely at: GOV.UK Design System - Confirmation pages

Discuss this pattern

Review status

Reviewed by the UX team, Content team and Tech Leads in May 2021