UI catalogue

197/197screenshots captured
31catalogued journeys
0uncatalogued screenshots
How to use this catalogue

Organised into user journeys, which can be expanded/collapsed.

Use Flat view to see all screenshots side-by-side for comparison, without journey organisation.

Grouped Flat

Use the tree toggle to switch between expanded and collapsed journey lists.

Expanded Collapsed

Where a journey shows a feature flag tag, make sure to use a client/user configured with those feature flags to reproduce that flow.

routing:true

Grouped by route — switch states for each page using the tabs within each card.

default error-validation

Use tag chips in cards to filter states quickly, and use search to find routes or journeys.

radio-select

Evidence catalogue

Templates

Create and manage message templates for all channels, including NHS App, Email, SMS and Letters.

General template management

Template landing and list pages common to all channels, plus generic pages for invalid states and copying/deleting templates.

Invalid template

Generic invalid-template fallback page used by template routes when template is invalid or not found.

Invalid client configuration

Error state when required client or campaign configuration is missing.

Copy digital template

Copy function entry page for digital channels; outcome route depends on selected target type.

Delete template

Delete function flow including delete error state.

NHS App templates

Create and manage NHS App templates

Create and submit NHS App template routing:false

Create, edit and submit an NHS App template with routing disabled, where submit is available from the preview page.

Create NHS App template routing:true

Create and edit NHS App template with routing enabled, where submit is not available from the preview page.

Request a proof for NHS App template digitalProofingNhsApp:false

Request a proof for an NHS App template from the preview page, when digital proofing for NHS App is not enabled.

Send a test NHS app message digitalProofingNhsApp:true

Send a digital proof for an NHS App template from the preview page, when digital proofing for NHS App is enabled.

Email templates

Create and manage Email templates

Create and submit email template routing:false

Create, edit and submit an email template with routing disabled, where submit is available from the preview page.

Create email template routing:true

Create and edit an email template with routing enabled, where submit is not available from the preview page.

Request proof for email template digitalProofingEmail:false

Request a proof for an email template from the preview page, when digital proofing for email is not enabled.

Send a test email digitalProofingEmail:true

Send a digital proof for an email template from the preview page, when digital proofing for email is enabled.

send-test-email

URL: /templates/send-test-email/:templateId

ID: templates_email_digital-proofing_send-test-email_default

templates_email_digital-proofing_send-test-email_default
Add and verify an email address digitalProofingEmail:true

Add and verify a new email address to send test emails to

SMS templates

Create and manage SMS templates

Create and submit SMS template routing:false

Create, edit and submit an SMS template with routing disabled, where submit is available from the preview page.

Create SMS template routing:true

Create and edit an SMS template with routing enabled, where submit is not available from the preview page.

Request proof for SMS template digitalProofingSms:false

Request a proof for an SMS template from the preview page, when digital proofing for SMS is not enabled.

Send a test text message digitalProofingSms:true

Send a digital proof for an SMS template from the preview page, when digital proofing for SMS is enabled.

Add and verify a mobile number digitalProofingSms:true

Add and verify a new mobile number to send test text messages to

Letter templates

Create and manage letter templates, including Carbone-based authoring and legacy PDF upload flows.

Letter authoring letterAuthoring:true

Create and preview Carbone-based letter templates.

Upload and view a letter template

Carbone authoring upload journey including type selection, upload variants and preview.

upload-standard-english-letter-template

URL: /templates/upload-standard-english-letter-template

ID: templates_letter_create_upload-and-view_upload-standard-english-letter-template_default

templates_letter_create_upload-and-view_upload-standard-english-letter-template_default

upload-large-print-letter-template

URL: /templates/upload-large-print-letter-template

ID: templates_letter_create_upload-and-view_upload-large-print-letter-template_default

templates_letter_create_upload-and-view_upload-large-print-letter-template_default

upload-british-sign-language-letter-template

URL: /templates/upload-british-sign-language-letter-template

ID: templates_letter_create_upload-and-view_upload-british-sign-language-letter-template_default

templates_letter_create_upload-and-view_upload-british-sign-language-letter-template_default

upload-other-language-letter-template

URL: /templates/upload-other-language-letter-template

ID: templates_letter_create_upload-and-view_upload-other-language-letter-template_default

templates_letter_create_upload-and-view_upload-other-language-letter-template_default

preview-letter-template

URL: /templates/preview-letter-template/:templateId

ID: templates_letter_create_upload-and-view_preview-letter-template_default

templates_letter_create_upload-and-view_preview-letter-template_default
Edit letter template settings

Edit an existing letter template from preview, including name, campaign and print/postage settings.

Approve letter template

Approve an existing letter template from preview, through readiness checks to approved confirmation.

preview-letter-template

URL: /templates/preview-letter-template/:templateId

ID: templates_letter_create_approve_preview-letter-template_default

templates_letter_create_approve_preview-letter-template_default
Legacy letters legacyLetters:true

Create a letter template using legacy letter flow.

Create legacy letter template

Upload and submit a letter template using the legacy PDF upload flow, where submit is available from the preview page.

upload-letter-template

URL: /templates/upload-letter-template

ID: templates_letter_legacy-create_upload-submit_upload-letter-template_default

templates_letter_legacy-create_upload-submit_upload-letter-template_default
Message plans routing:true

Create and manage message plans (routing configurations) to define templates to be sent for each channel, and the order in which they are sent.

General management and generic pages

List and generic management pages for message plans, including invalid and config-required states.

Invalid message plan

Error page shown when a message plan cannot be found or accessed.

Invalid client configuration

Error page shown when required client/campaign config for message plans is missing.

Create message plan

Create a new message plan, choose initial message order, and land on the edit screen.

message-plans/create-message-plan

URL: /templates/message-plans/create-message-plan

ID: message-plans_create_message-plans/create-message-plan_default

message-plans_create_message-plans--create-message-plan_default
Edit message plan name

Rename an existing message plan from the edit screen via the rename link.

message-plans/rename-message-plan

URL: /templates/message-plans/rename-message-plan/:messagePlanId

ID: message-plans_edit-name_message-plans/rename-message-plan_default

message-plans_edit-name_message-plans--rename-message-plan_default
Add templates to message plan

Choose and preview templates for each channel, then review the completed plan.

message-plans/choose-nhs-app-template/preview-template

URL: /templates/message-plans/choose-nhs-app-template/:messagePlanId/preview-template/:templateId

ID: message-plans_add-templates_message-plans/choose-nhs-app-template/preview-template_default

message-plans_add-templates_message-plans--choose-nhs-app-template--preview-template_default

message-plans/choose-british-sign-language-letter-template

URL: /templates/message-plans/choose-british-sign-language-letter-template/:messagePlanId

ID: message-plans_add-templates_message-plans/choose-british-sign-language-letter-template_default

message-plans_add-templates_message-plans--choose-british-sign-language-letter-template_default
Move message plan to production

Move the message plan to production from the edit screen, completing readiness checks.

Preview message plan

Preview a production-ready message plan including viewing embedded digital template previews.