diff --git a/app/assets/sass/prototype-specific/_ios-dynamic-text.scss b/app/assets/sass/prototype-specific/_ios-dynamic-text.scss
index dd441697..ea2a014f 100644
--- a/app/assets/sass/prototype-specific/_ios-dynamic-text.scss
+++ b/app/assets/sass/prototype-specific/_ios-dynamic-text.scss
@@ -1,6 +1,12 @@
// apple ios dynamic text
+// Scoped to .nhs-app-native only (set in app/views/layout-app.html for the
+// native app webview) so this doesn't override typography site-wide -
+// otherwise Safari/WebKit (including desktop Safari) applies the system
+// Dynamic Type body size to every page, making text on the NHS website
+// journey (and any other non-native-app page) render smaller than it
+// should.
@supports (font: -apple-system-body) {
- html {
+ .nhs-app-native {
font: -apple-system-body !important;
}
}
diff --git a/app/routes.js b/app/routes.js
index 90eff4cf..12b3ea0d 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -70,6 +70,101 @@
}
})
+ // Website (non-app) opt-out journey routes
+
+ router.post('/website/pages/opt-out/do-you-know-nhs-number-answer', function (req, res) {
+ const input = req.session.data.knowsNhsNumber
+
+ if (input === 'Yes') {
+ res.redirect('/website/pages/opt-out/enter-your-nhs-number')
+ } else if (input === 'No') {
+ res.redirect('/website/pages/opt-out/enter-your-name')
+ } else {
+ // Validation fallback if they select nothing
+ res.render('website/pages/opt-out/do-you-know-nhs-number', {
+ error: true
+ })
+ }
+ })
+
+ router.post('/website/pages/opt-out/enter-your-nhs-number-answer', function (req, res) {
+ const input = req.session.data.nhsNumber
+
+ if (!input || input.trim() === '') {
+ res.render('website/pages/opt-out/enter-your-nhs-number', {
+ error: true
+ })
+ } else {
+ res.redirect('/website/pages/opt-out/enter-your-postcode')
+ }
+ })
+
+ router.post('/website/pages/opt-out/enter-your-name-answer', function (req, res) {
+ const { firstName, lastName } = req.session.data
+
+ if (!firstName || !lastName) {
+ res.render('website/pages/opt-out/enter-your-name', {
+ error: true
+ })
+ } else {
+ res.redirect('/website/pages/opt-out/enter-your-postcode')
+ }
+ })
+
+ // The postcode page is shared by both the NHS number and name/date of
+ // birth routes through identity verification - branch based on whether
+ // an NHS number was already given.
+ router.post('/website/pages/opt-out/enter-your-postcode-answer', function (req, res) {
+ const { postcode, knowsNhsNumber } = req.session.data
+
+ if (!postcode || postcode.trim() === '') {
+ res.render('website/pages/opt-out/enter-your-postcode', {
+ error: true
+ })
+ } else if (knowsNhsNumber === 'Yes') {
+ res.redirect('/website/pages/opt-out/check-your-details-nhs-number')
+ } else {
+ res.redirect('/website/pages/opt-out/enter-date-of-birth')
+ }
+ })
+
+ router.post('/website/pages/opt-out/check-your-details-nhs-number-answer', function (req, res) {
+ // Simulate an identity check against the example patient record
+ const postcode = (req.session.data.postcode || '').replace(/\s+/g, '').toUpperCase()
+
+ if (postcode !== 'SW12CV') {
+ res.redirect('/website/pages/opt-out/identity-details-error')
+ } else {
+ res.redirect('/website/pages/opt-out/confirm-unsubscribe-request')
+ }
+ })
+
+ router.post('/website/pages/opt-out/check-your-details-answer', function (req, res) {
+ // Simulate an identity check against the example patient record
+ const postcode = (req.session.data.postcode || '').replace(/\s+/g, '').toUpperCase()
+
+ if (postcode !== 'SW12CV') {
+ res.redirect('/website/pages/opt-out/identity-details-error')
+ } else {
+ res.redirect('/website/pages/opt-out/confirm-unsubscribe-request')
+ }
+ })
+
+ router.post('/website/pages/opt-out/confirm-unsubscribe-request-answer', function (req, res) {
+ const input = req.session.data.confirmUnsubscribe
+
+ if (input === 'Unsubscribe from age-based messages') {
+ res.redirect('/website/pages/opt-out/confirmation-saved-yes')
+ } else if (input === 'Keep receiving age-based messages') {
+ res.redirect('/website/pages/opt-out/confirmation-saved-no')
+ } else {
+ // Validation fallback if they select nothing
+ res.render('website/pages/opt-out/confirm-unsubscribe-request', {
+ error: true
+ })
+ }
+ })
+
// V6 Routes
router.post('/v6/pages/opt-in/preferences-1-post', function (req, res) {
diff --git a/app/views/index.html b/app/views/index.html
index 3e5e753f..4f0b9f6b 100755
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -14,6 +14,14 @@ Digital Child Health NHS App prototype
A prototype for Digital Child Health to test new design components and patterns for the NHS App.
+ NHS Website journeys
+ A non-app, standard NHS website version of the opt-out flow.
+
+
V6
Content designer has been added to the team
21/07/2025 Updated the flow to reflect an "unsubscribe" route.
diff --git a/app/views/layout-nhsuk-website.html b/app/views/layout-nhsuk-website.html
new file mode 100644
index 00000000..4cd09d9d
--- /dev/null
+++ b/app/views/layout-nhsuk-website.html
@@ -0,0 +1,103 @@
+{% extends 'layout.html' %}
+
+
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+ Unsubscribe from age-based messages – NHS
+{% endblock %}
+
+
+{% block header %}
+ {{ header({
+ search: {
+ action: "https://www.nhs.uk/search"
+ },
+ navigation: {
+ items: [
+ { href: "https://www.nhs.uk/nhs-services/", text: "NHS services" },
+ { href: "https://www.nhs.uk/conditions/", text: "Health A to Z" },
+ { href: "https://www.nhs.uk/live-well/", text: "Live Well" },
+ { href: "https://www.nhs.uk/mental-health/", text: "Mental health" },
+ { href: "https://www.nhs.uk/care-and-support/", text: "Care and support" },
+ { href: "https://www.nhs.uk/pregnancy/", text: "Pregnancy" }
+ ]
+ }
+ }) }}
+{% endblock %}
+
+
+{% block beforeContent %}
+ {{ breadcrumb({
+ items: [
+ { href: "https://www.nhs.uk", text: "Home" },
+ { href: "https://www.nhs.uk/nhs-services/", text: "NHS services" },
+ { href: "https://www.nhs.uk/nhs-services/online-services/", text: "Online services" }
+ ]
+ }) }}
+{% endblock %}
+
+
+{% block footer %}
+ {{ footer({
+ copyright: {
+ text: "© Crown copyright"
+ },
+ navigation: [
+ {
+ items: [
+ { href: "https://www.nhs.uk/", text: "Home" },
+ { href: "https://www.nhs.uk/health-a-to-z/", text: "Health A to Z" },
+ { href: "https://www.nhs.uk/nhs-services/", text: "NHS services" },
+ { href: "https://www.nhs.uk/live-well/", text: "Healthy living" },
+ { href: "https://www.nhs.uk/mental-health/", text: "Mental health" },
+ { href: "https://www.nhs.uk/social-care-and-support/", text: "Care and support" }
+ ]
+ },
+ {
+ items: [
+ { href: "https://www.nhs.uk/nhs-app/", text: "NHS App" },
+ { href: "https://www.nhs.uk/nhs-services/online-services/find-nhs-number/", text: "Find my NHS number" },
+ { href: "https://www.nhs.uk/using-the-nhs/about-the-nhs/", text: "About the NHS" },
+ { href: "https://www.nhs.uk/using-the-nhs/healthcare-abroad/", text: "Healthcare abroad" }
+ ]
+ },
+ {
+ items: [
+ { href: "https://www.nhs.uk/our-policies/manage-nhs-profiles/", text: "Manage NHS profiles" },
+ { href: "https://www.nhs.uk/nhs-sites/", text: "Other NHS websites" }
+ ]
+ },
+ {
+ items: [
+ { href: "https://www.nhs.uk/about-us/", text: "About us" },
+ { href: "https://www.nhs.uk/accessibility-statement/", text: "Accessibility statement" },
+ { href: "https://www.nhs.uk/our-policies/", text: "Our policies" },
+ { href: "https://www.nhs.uk/our-policies/choose-your-cookie-settings/", text: "Cookies" },
+ { href: "/prototype-admin/reset?returnPage=" + (currentPage | urlencode), text: "Reset data" }
+ ]
+ }
+ ]
+ }) }}
+{% endblock %}
diff --git a/app/views/layout-website.html b/app/views/layout-website.html
new file mode 100644
index 00000000..fcd449f5
--- /dev/null
+++ b/app/views/layout-website.html
@@ -0,0 +1,65 @@
+{% extends 'layout.html' %}
+
+
+
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+ Digital Child Health – NHS
+{% endblock %}
+
+
+{% block header %}
+ {{ header({
+ service: {
+ text: "Digital Child Health",
+ href: "/website/pages/opt-out/start"
+ }
+ }) }}
+{% endblock %}
+
+
+{% block footer %}
+ {{ footer({
+ copyright: {
+ text: "© NHS England"
+ },
+ meta: {
+ items: [
+ {
+ href: "#",
+ text: "Accessibility statement"
+ },
+ {
+ href: "#",
+ text: "Contact us"
+ },
+ {
+ href: "#",
+ text: "Cookies"
+ },
+ {
+ href: "#",
+ text: "Privacy policy"
+ },
+ {
+ href: "#",
+ text: "Terms and conditions"
+ },
+ {
+ href: "/prototype-admin/reset?returnPage=" + (currentPage | urlencode),
+ text: "Reset data"
+ }
+ ]
+ }
+ }) }}
+{% endblock %}
diff --git a/app/views/website/pages/opt-out/README.md b/app/views/website/pages/opt-out/README.md
new file mode 100644
index 00000000..235a2910
--- /dev/null
+++ b/app/views/website/pages/opt-out/README.md
@@ -0,0 +1,84 @@
+# NHS website opt-out journey — flow diagram
+
+Non-app, standard NHS website version of the age-based messages opt-out flow.
+Routes live under `/website/pages/opt-out/`, views in
+`app/views/website/pages/opt-out/`, and POST handlers in `app/routes.js`.
+
+```mermaid
+flowchart TD
+ start["01 start
Unsubscribe introduction"]
+ nhsChoice["05 do-you-know-nhs-number
Do you know your NHS number?"]
+ enterNhs["06 enter-your-nhs-number
What is your NHS number?"]
+ enterName["09 enter-your-name
Enter your full name"]
+ postcode["03 enter-your-postcode
What is your post code"]
+ dob["02 enter-date-of-birth
What is your date of birth?"]
+ checkNhs["07 check-your-details-nhs-number
Confirm details (NHS number + postcode)"]
+ checkNoNhs["08 check-your-details
Confirm details (name, DOB, postcode)"]
+ error["04 identity-details-error
We can't identify you"]
+ confirmRequest["13 confirm-unsubscribe-request
Keep or unsubscribe?"]
+ keep["11 confirmation-saved-no
You will continue to receive messages"]
+ unsub["12 confirmation-saved-yes
You will no longer receive messages"]
+
+ start --> nhsChoice
+ nhsChoice -- Yes --> enterNhs
+ nhsChoice -- No --> enterName
+ enterNhs --> postcode
+ enterName --> postcode
+ postcode -- "has NHS number" --> checkNhs
+ postcode -- "no NHS number" --> dob
+ dob --> checkNoNhs
+ checkNhs -- "identity matched" --> confirmRequest
+ checkNhs -- "identity not matched" --> error
+ checkNoNhs -- "identity matched" --> confirmRequest
+ checkNoNhs -- "identity not matched" --> error
+ error -- Continue --> nhsChoice
+ confirmRequest -- Keep --> keep
+ confirmRequest -- Unsubscribe --> unsub
+```
+
+## Notes
+
+- The postcode step is shared by both identity paths (NHS number, or
+ name + date of birth).
+- The identity check is simulated in `app/routes.js`: enter postcode
+ `SW1 2CV` to pass verification on either path; anything else routes to
+ the `identity-details-error` page, whose Continue button loops back to
+ `do-you-know-nhs-number` to retry.
+- Both confirmation pages (`confirmation-saved-yes` / `confirmation-saved-no`)
+ use the standard `nhsuk-frontend` panel component, not app-specific styling.
+- Session data keys use `camelCase` (`knowsNhsNumber`, `nhsNumber`, `firstName`,
+ `lastName`, `postcode`, `dateOfBirth`, `confirmUnsubscribe`), and radio
+ values match their visible text exactly, per the
+ [NHS prototype kit guide](https://github.com/edwardhorsford/NHS-LLM-documentation).
+- POST routes use the `-answer` suffix (for example `enter-your-name-answer`)
+ rather than `-post`, and only exist where branching or validation is
+ needed — `enter-date-of-birth` posts straight to `check-your-details`
+ since no route is required there.
+- Back links use the real `backLink()` component in a `beforeContent` block.
+ The rest of this prototype's pages set `{% set backLink = true %}`. which
+ `layout.html` does not read, so that flag renders nothing — that pattern
+ is left as-is elsewhere to avoid touching unrelated journeys.
+- `start.html` extends a separate layout, `app/views/layout-nhsuk-website.html`,
+ not `layout-website.html`. Start pages for services like this are usually
+ hosted on the main NHS.UK website, with the full NHS.UK header (search +
+ navigation) and breadcrumbs, per the
+ [start page pattern](https://service-manual.nhs.uk/design-system/patterns/start-page).
+ The "Start now" button then takes the user off nhs.uk and into the
+ transactional service itself, which is why every other page in this
+ journey switches to the simpler logo + service name header
+ (`layout-website.html`) - matching how real services like "Find your NHS
+ number" work in production.
+- All other pages in this journey extend `app/views/layout-website.html` (not
+ `layout.html`/`layout-app.html` directly). It overrides only the header
+ and footer to match the standard NHS.UK transactional-service pattern —
+ logo + service name, no app navigation, and a footer with Accessibility
+ statement / Contact us / Cookies / Privacy policy / Terms and conditions
+ links per the [header](https://service-manual.nhs.uk/design-system/components/header)
+ and [footer](https://service-manual.nhs.uk/design-system/components/footer)
+ guidance — and sets `mainClasses = "nhsuk-main-wrapper--s"` as recommended
+ by the [question pages](https://service-manual.nhs.uk/design-system/patterns/question-pages)
+ and [start page](https://service-manual.nhs.uk/design-system/patterns/start-page)
+ patterns, which fixes the excess top padding that showed above the back
+ link. This override is scoped to `layout-website.html` only, so the app
+ journeys (which still extend `layout.html`/`layout-app.html`) are
+ unaffected.
diff --git a/app/views/website/pages/opt-out/check-your-details-nhs-number.html b/app/views/website/pages/opt-out/check-your-details-nhs-number.html
new file mode 100644
index 00000000..68f979a6
--- /dev/null
+++ b/app/views/website/pages/opt-out/check-your-details-nhs-number.html
@@ -0,0 +1,55 @@
+{% extends 'layout-website.html' %}
+{% set version = "website" %}
+{% set hub = "Opt Out" %}
+
+{% block beforeContent %}
+ {{ backLink({
+ href: "/website/pages/opt-out/enter-your-postcode",
+ text: "Back"
+ }) }}
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
Confirm your details
+
+ {{ summaryList({
+ rows: [
+ {
+ key: { text: "NHS number" },
+ value: { text: data.nhsNumber },
+ actions: {
+ items: [
+ { href: "/website/pages/opt-out/enter-your-nhs-number", text: "Change", visuallyHiddenText: "NHS number" }
+ ]
+ }
+ },
+ {
+ key: { text: "Post code" },
+ value: { text: data.postcode },
+ actions: {
+ items: [
+ { href: "/website/pages/opt-out/enter-your-postcode", text: "Change", visuallyHiddenText: "postcode" }
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+
+
+
+
+
+
+
+
+
+
Confirm your details
+
+ {{ summaryList({
+ rows: [
+ {
+ key: { text: "Name" },
+ value: { text: data.firstName + " " + data.lastName },
+ actions: {
+ items: [
+ { href: "/website/pages/opt-out/enter-your-name", text: "Change", visuallyHiddenText: "name" }
+ ]
+ }
+ },
+ {
+ key: { text: "Date of birth" },
+ value: { text: data.dateOfBirth.day + " " + data.dateOfBirth.month + " " + data.dateOfBirth.year },
+ actions: {
+ items: [
+ { href: "/website/pages/opt-out/enter-date-of-birth", text: "Change", visuallyHiddenText: "date of birth" }
+ ]
+ }
+ },
+ {
+ key: { text: "Post code" },
+ value: { text: data.postcode },
+ actions: {
+ items: [
+ { href: "/website/pages/opt-out/enter-your-postcode", text: "Change", visuallyHiddenText: "postcode" }
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+
+
+
+
+
+
+
+ {{ panel({
+ titleText: "You will continue to receive age-based messages.",
+ titleSize: "l"
+ }) }}
+
+
What happens next
+
You do not need to do anything else. We will keep sending you timed reminders based on your baby's age.
+
+
Before you leave this page
+
You can:
+
+
+
+
+
+
+ {{ panel({
+ titleText: "You will no longer receive age-based messages.",
+ titleSize: "l"
+ }) }}
+
+
What happens next
+
It may take up to one working day to update.
+
You can find support and guidance for you and your baby at Best Start In Life.
+
+
Before you leave this page
+
You can:
+
+
+
+
+
+
+
We're sorry. We can't identify you at this time. Please check your details and try again.
+
+ {{ button({
+ text: "Continue",
+ href: "/website/pages/opt-out/do-you-know-nhs-number"
+ }) }}
+
+
+
+
+
+
{{ pageHeading }}
+
+
You were automatically signed up to receive timed reminders based on your baby's age, including information about appointments, check-ups and more.
+
+
You can use this service to unsubscribe from these messages.
+
+
You'll need to confirm your identity before you can make changes.
+
+
We'll need your:
+
+ - NHS number
+ - or date of birth
+ - name
+ - postcode
+
+
+ {{ button({
+ text: "Start now",
+ href: "/website/pages/opt-out/do-you-know-nhs-number"
+ }) }}
+
+
+