Industrial Excitement LabsContent design

Experiment · Content design

Weekend meals, in the NHS design system

The project plan and design record for a service that lets hospital patients order their meals for a weekend. It is built with the National Health Service (NHS) design system, and again with the GOV.UK Design System to compare. The four working examples open from the Experiments page.

1

Project plan

The problem

  • Patients in hospital choose their weekend meals on a paper menu on Friday. Menus get lost, the kitchen cannot always read the choices, and allergies depend on staff checking each card by hand.

The goal

  • Let patients choose their own weekend meals, safely, from their bed, and give the kitchen a clear order for every bed.

Users and what they need

  • Patients need to choose food they like and can eat safely, without needing help unless they want it.
  • Ward hosts need a list of what each bed ordered, and a way to order with patients who cannot use the service.
  • Nurses need to know when a patient adds an allergy that is not on their record.
  • Kitchen staff need total numbers for each meal by Friday afternoon.
  • Dietitians need menus that follow each patient's diet.

In scope for the first version

  • Saturday and Sunday only.
  • Breakfast, lunch, dinner and a snack, with three choices each.
  • Checking the patient's identity with a patient meal ID and date of birth.
  • Showing recorded allergies, adding new ones, and hiding food that contains them.
  • Adding a new patient to a bed when someone arrives or replaces another patient.

How an order works

  • The order belongs to the patient for their whole stay, not to the bed.
  • If the patient moves bed or ward, their order and patient meal ID go with them.
  • Patients can change a meal up to 12 hours before it is served, so the kitchen has time to prepare it.
  • For a meal sooner than 12 hours away, the ward host orders from the late menu with the patient.
  • When the patient goes home, staff cancel their order and their patient meal ID.

Future: family and carers choosing meals

  • Family or carers could choose meals for a patient who cannot use the service. This needs safeguards so it cannot be misused.
  • Only with the patient's agreement, recorded by a nurse, or by a person with lasting power of attorney for health and welfare.
  • Each family member gets their own access code for one patient. Staff can withdraw it at any time, and it ends when the patient goes home.
  • Family can choose meals, but cannot view or change allergies, diets or medical details. Food with the patient's allergies stays hidden.
  • The patient can read who chose each meal, and can change it. The patient's choice always wins.
  • Every change is logged with who made it and when. The ward host's list marks meals chosen by family.
  • Unusual activity, such as many changes or choices that go against a diet plan, alerts the ward. Staff can raise a safeguarding concern and switch off family access.

Not in scope yet

  • Special diets, such as soft food, low salt or diabetic menus.
  • Languages other than English.
  • Portion sizes.
  • Ordering for more than one weekend.
  • Family or carers choosing meals, covered under Future.

Phases

  • Discovery, two weeks: watch meal ordering on two wards, and talk to patients, ward hosts, nurses, kitchen staff and dietitians. Map how allergies are recorded today.
  • Alpha, six weeks: test this example and two other ideas with patients, including older patients and people who use screen readers or magnification. Agree how the ID card is printed.
  • Private beta, eight weeks: run the service on two wards next to the paper menu. Measure errors and time to order.
  • Public beta: roll out to every ward, with the paper menu kept for anyone who wants it.
  • Live: keep improving from feedback and the measures below.

Team

  • Product manager, user researcher, content designer, interaction designer and two developers.
  • A clinical safety officer to own the clinical risk assessment.
  • A dietitian and a catering lead as subject experts.

Risks and how we reduce them

  • Wrong patient: two checks, an ID and a date of birth, then the patient confirms their name, ward and bed. A stop page if anything is wrong.
  • Allergies: recorded allergies cannot be removed, food that contains them is hidden, and added allergies go to a nurse.
  • Allergies typed in: the service cannot check food for them, so it says so and asks the patient to talk to a nurse.
  • A new patient getting the previous patient's meals: adding a patient cancels the old order and meal ID. Staff are warned about any food the new patient cannot eat.
  • People who cannot or do not want to use a screen: a ward host can order with them, and the paper menu stays.
  • Health data: a data protection impact assessment before private beta.

How we will know it works

  • No orders placed for the wrong patient.
  • No meals served that contain a recorded allergy.
  • Most patients who start an order finish it by the Friday deadline.
  • The median time to order is under 10 minutes.
  • Patients say the service helps them order, and ward hosts spend less time on menus.

Accessibility

  • Meet the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA.
  • Test with screen readers, magnification, voice control and keyboard only, and on the bedside tablets.
  • Write for a reading age of 9, and keep every page to one question.

2

The examples

The service is built twice. The main version uses the NHS design system, and a second uses the GOV.UK Design System to compare. Each has two journeys, so there are four examples. Each one opens in its own window from the Experiments page:

  • NHS design system: patient journey
  • NHS design system: ward staff journey
  • GOV.UK Design System: patient journey
  • GOV.UK Design System: ward staff journey

The patient meal ID and date of birth are filled in, so you can continue straight away. To read the error messages, clear an answer and continue. The patient, the hospital and the menus are made up, and nothing is sent or stored.

3

Why the NHS design system is the main one

A hospital service in England would most likely use the NHS design system, so the NHS version is the main one. It is built with NHS.UK frontend 10.6.1, without the NHS logo or the Frutiger typeface. The GOV.UK version is the same journey, with the same rules and error messages, built with GOV.UK Frontend 6.5.1 to compare the two.

How the two design systems differ

Header and logo

NHS
The header carries the NHS logo. The logo is a protected trade mark, so only the NHS and organisations with written permission can use it. This example shows the hospital and service name only.

GOV.UK
Services that are not on GOV.UK use the Generic header, with no crown and no GOV.UK logotype.

Typeface

NHS
Frutiger, which NHS England licenses to NHS organisations in England.

GOV.UK
Government Digital Service (GDS) Transport, which only GOV.UK services may use.

Colour

NHS
NHS blue header, pale grey page, blue links, and green buttons.

GOV.UK
Black header, white page, blue links, and green buttons.

Starting the service

NHS
A standard green button. There is no start button version.

GOV.UK
A Start now button with an arrow.

Marking it as an example

NHS
NHS.UK frontend has no phase banner, so a tag sits in a line of text.

GOV.UK
The phase banner component, with a tag.

Warnings

NHS
Warning callout: a yellow card with an Important heading, which can hold a list.

GOV.UK
Warning text: one bold sentence with an exclamation mark icon.

Inset text

NHS
A blue bar, and a hidden Information: label that screen readers announce.

GOV.UK
A grey bar and the text.

Confirmation

NHS
A green panel with text aligned to the left.

GOV.UK
A green panel with centred text.

Code

NHS
Classes start with nhsuk-, and utility classes with nhsuk-u-. Most component names match.

GOV.UK
Classes start with govuk-, and utility classes with govuk-!-.

What stays the same

  • One question per page, with the question as the page heading.
  • The error summary, inline error messages, and the words in them.
  • Date input, radios, checkboxes with a conditional answer, and summary lists.
  • The check answers pattern, Change links, and the Back link.
  • Continue on every question page.

4

The user journey

How the sequence was built:

  1. Each part of the brief became one question.
  2. The questions follow the order a patient needs them: who you are, what you cannot eat, then what you want.
  3. A check page closes each group, so a mistake is caught before it matters: your details, your allergies, then the whole order.
  4. Every question has error states that say what went wrong and how to fix it. The patient stays on the same page until it is right.
  5. Stop pages appear wherever carrying on would be unsafe.
  6. Round 2 added the staff journey for patients who arrive or replace someone else.

Patient: order your weekend meals

Patient journey: order your weekend mealsA flowchart. The same steps are listed after it.Question pageCheck pageError state: same page shows the errorStop pageRule or branchConfirmationStart pageWhat is your patient meal ID?Error states• Nothing entered• Not eight letters and numbers• ID no longer in use: ask amember of staffWhat is your date of birth?Error states• A part is missing, it is not areal date, or it is in the future• ID and date of birth do notmatch a patientCheck these are your details:name, ward and bedError states• Yes or No not selectedNo: stop page, ask a member ofstaff to help youAllergies on your hospital record:any others?Error states• Yes or No not selectedNo: skip to Check your allergiesWhich other allergies do you have?Error states• Nothing selected• Another allergy selected but nottyped inCheck your allergies, then ConfirmallergiesTyped-in allergy: warning thatfood cannot be checked, ask anurseEight meal pages: breakfast,lunch, dinner and a snack,Saturday and SundayError states• No choice selectedFood with the patient's allergiesis hidden. Three safe choices areshown, each with its ingredientsand traffic lightsAfter each meal: what would youlike to drink?Error states• No drink and nothing selectedEvery safe drink is shown, then Nodrink, thank youCheck your order before sending itChange link: go to that page, thencome back hereOrder sent, with a referencenumberCome back to change a meal, up to12 hours before it is served
Read the patient journey as a list
  1. Start page
  2. What is your patient meal ID? Error states: Nothing entered. Not eight letters and numbers. ID no longer in use: ask a member of staff. The same page shows the error.
  3. What is your date of birth? Error states: A part is missing, it is not a real date, or it is in the future. ID and date of birth do not match a patient. The same page shows the error.
  4. Check these are your details: name, ward and bed Error states: Yes or No not selected. The same page shows the error. No: stop page, ask a member of staff to help you.
  5. Allergies on your hospital record: any others? Error states: Yes or No not selected. The same page shows the error. No: skip to Check your allergies.
  6. Which other allergies do you have? Error states: Nothing selected. Another allergy selected but not typed in. The same page shows the error.
  7. Check your allergies, then Confirm allergies Typed-in allergy: warning that food cannot be checked, ask a nurse.
  8. Eight meal pages: breakfast, lunch, dinner and a snack, Saturday and Sunday Error states: No choice selected. The same page shows the error. Food with the patient's allergies is hidden. Three safe choices are shown, each with its ingredients and traffic lights.
  9. After each meal: what would you like to drink? Error states: No drink and nothing selected. The same page shows the error. Every safe drink is shown, then No drink, thank you.
  10. Check your order before sending it Change link: go to that page, then come back here.
  11. Order sent, with a reference number Come back to change a meal, up to 12 hours before it is served.

Ward staff: add a new patient to a bed

Staff journey: add a new patient to a bedA flowchart. The same steps are listed after it.Question pageCheck pageError state: same page shows the errorStop pageRule or branchConfirmationStart page: Add a new patient to abedWhich bed is the new patient in?Error states• No bed selectedEmpty bed: skip to the hospitalnumberWhere is the patient in the bednow?Error states• Nothing selectedStill in the bed: stop page, youcannot add a patient yetGone home: order and meal IDcancelled. Moved: order and mealID go with themThe order belongs to the patient,not the bedWhat is the new patient's hospitalnumber?Error states• Nothing entered• Not H followed by seven numbersWhat is the new patient's date ofbirth?Error states• A part is missing, it is not areal date, or it is in the future• No patient with that hospitalnumber and date of birthCheck before you add this patientChange link: bed or hospitalnumberIf the previous patient went home,a warning lists any food in theirorder the new patient cannot eatPatient added: new patient meal IDOrder meals with the new patient:the patient journey
Read the staff journey as a list
  1. Start page: Add a new patient to a bed
  2. Which bed is the new patient in? Error states: No bed selected. The same page shows the error. Empty bed: skip to the hospital number.
  3. Where is the patient in the bed now? Error states: Nothing selected. The same page shows the error. Still in the bed: stop page, you cannot add a patient yet.
  4. Gone home: order and meal ID cancelled. Moved: order and meal ID go with them The order belongs to the patient, not the bed.
  5. What is the new patient's hospital number? Error states: Nothing entered. Not H followed by seven numbers. The same page shows the error.
  6. What is the new patient's date of birth? Error states: A part is missing, it is not a real date, or it is in the future. No patient with that hospital number and date of birth. The same page shows the error.
  7. Check before you add this patient Change link: bed or hospital number. If the previous patient went home, a warning lists any food in their order the new patient cannot eat.
  8. Patient added: new patient meal ID Order meals with the new patient: the patient journey.

5

Page by page against the GOV.UK Design System

Start page pattern

Start page

Says what the service does, what you need, how long it takes and the deadline. One green Start now button.

Done
Question page, text input, hint text

What is your patient meal ID?

One question per page. The label is the page heading. The hint is one short sentence with no full stop and gives the format. Error messages say what to do: Enter your patient meal ID.

Done
Date input

What is your date of birth?

Three fields with autocomplete for day, month and year of birth, and the hint For example, 27 3 1950. Separate errors for a missing part, an impossible date and a date in the future.

Done
Summary list, radios

Check these are your details

Name, ward and bed in a summary list with no Change links, because the patient cannot change them. A Yes or No question, and a stop page for No.

Done
List, radios

Allergies on your hospital record

Recorded allergies are shown as a list with no way to remove them. The question is Do you have any other allergies?

Done
Checkboxes, conditional reveal

Which other allergies do you have?

The 14 allergens that UK food law names, minus the recorded ones, with Select all that apply. An or divider and Another allergy, which reveals a text input.

Done
Summary list, warning text

Check your allergies

Change links only on allergies the patient added. Warning text when an allergy was typed in, because the service cannot check food for it.

Done
Question page, radios with hints

Eight meal pages

One meal per page, with the date as a caption. The hint gives the time the meal is served and the time to change it by. Each option has a hint that lists its allergens. Food with the patient's allergies is not shown, and an inset says so.

Done
Check answers pattern

Check your order before sending it

Summary lists grouped under headings, with a Change link on every answer the patient can change. Change returns to this page. The button is Send order.

Done
Confirmation page pattern

Order sent

Green panel with the reference number. What happens next, a way to print the order, and a feedback link.

Done
Question page, radios with hints

Which bed is the new patient in?

For ward staff. Each bed shows who is in it, or Empty. An empty bed skips the next question.

Done
Question page, radios with hints

Where is the patient now?

Three answers: gone home, moved to another bed or ward, or still in the bed. Each hint says what will happen to their order. Still in the bed leads to a stop page.

Done
Text input, date input

Hospital number and date of birth

Two questions that find the new patient's hospital record. If they do not match, the error says so and nothing changes.

Done
Summary list, warning text

Check before you add this patient

The new patient's details and recorded allergies, what happens to the previous order, and a warning that lists any food the new patient cannot eat.

Done
Confirmation page pattern

Patient added to the bed

Green panel with the new patient meal ID. What happens next, including the order deadline and the late menu, and a link to order with the patient.

Done
Page template, Generic header, phase banner, Back link, error summary

Every page

Page titles follow the heading, with Error: added when there is a problem. Back links work with the browser Back button. The error summary takes focus and links to each field.

Done

Why there is no GOV.UK crown

The GOV.UK Design System says a service that is not on GOV.UK must not use the crown, the GOV.UK logotype or the GDS Transport typeface. It must use the Generic header with its own name. A real hospital service would most likely use the NHS design system, which is built on the same code.

6

What was asked, and what we did

You asked

Give the patient a unique ID to fill in

A question page that asks for a patient meal ID. The hint says where to find it and gives the format. The answer is filled in for the example.

GOV.UK Design System: Question pages, text input

You asked

Pre-fill the ID and date of birth in the example, and note that the patient completes them

Inset text on both pages: This is an example. We have filled in this answer for you. In the real service, the patient types this themselves.

GOV.UK Design System: Inset text. A real service would never pre-fill identity questions.

You asked

Show name, ward and bed, then confirm them

A summary list with no Change links and a Yes or No question. No leads to a stop page that asks the patient to find a member of staff.

GOV.UK Design System: Summary list, radios

You asked

Show allergies, allow adding but not removing the recorded ones

Recorded allergies are a plain list with no actions. Added allergies come from checkboxes of the 14 allergens in UK food law, plus another allergy as free text. Only added allergies have Change links.

GOV.UK Design System: Checkboxes with a conditional reveal. Checkboxes suit a known list better than the add another loop.

You asked

Confirm the allergies

A check page with a Confirm allergies button, and warning text for allergies typed in.

GOV.UK Design System: Summary list, warning text

You asked

Three choices for breakfast, lunch, dinner and a snack, Saturday and Sunday

Eight question pages. Each shows the first three options that are safe for this patient, with allergens in the hint.

GOV.UK Design System: Question pages, radios with hints

You asked

Follow the GOV.UK Design System strictly

GOV.UK Frontend 6.5.1 markup and styles, the check answers and confirmation patterns, and the GOV.UK style for errors, page titles and buttons. The Generic header replaces the GOV.UK header, and Arial replaces GDS Transport, because the service is not on GOV.UK.

GOV.UK Design System: Generic header, page template

You asked

Add people who have recently arrived or replaced someone else, especially if they cannot eat what the previous person ordered

A staff journey: choose the bed and confirm the previous patient has left. Then find the new patient by hospital number and date of birth, check them, and add them. The old order and meal ID are cancelled, never passed on, and the check page warns about food the new patient cannot eat.

GOV.UK Design System: Question pages, summary list, warning text, confirmation page

You asked

Show how the sequence was built, with error states and checking

Two flowcharts, one for patients and one for staff, with every error state, stop page and check page. A list version follows each one.

GOV.UK Design System: Question pages, validation

You asked

The meal stays with the patient during their stay

The order belongs to the patient, not the bed. When staff say a patient has moved bed or ward, the order and meal ID go with them. Only going home cancels them.

GOV.UK Design System: Radios with hints that say what will happen

You asked

Patients can edit their order up to 12 hours before the meal

Each meal page gives the serving time and the time to change it by. Coming back to the service shows the current order, ready to change.

GOV.UK Design System: Hint text, check answers

You asked

Future: family choosing for a patient, without it being abused

Written up as future work with safeguards. They include consent, a personal code per family member, and no access to allergies or medical details. The patient's choice wins, every change is logged, and staff get alerts and can switch it off.

You asked

Build it in the NHS design system and explain the differences

The same journey, built with NHS.UK frontend 10.6.1. A side-by-side list sets out what changes between the two design systems and what stays the same.

GOV.UK Design System: NHS design system

You asked

Add each ingredient in the meal following UK label guidelines, with the UK traffic light system on the menu

Each dish has an ingredients list in descending order of weight, with allergens in bold and percentages for named ingredients. This follows UK labelling law for prepacked food. Traffic lights use the Department of Health and Social Care thresholds per 100g or 100ml, and the per-portion red thresholds for large portions. Each light says low, medium or high in words. All values are made up for the example.

GOV.UK Design System: Radios with hint text, details. The traffic light label is not a GOV.UK component, so it is built from plain HTML and styled to the UK label.

You asked

Add choices of drinks

A drink question after every meal, with all the drinks that are safe for the patient's allergies. A No drink, thank you answer follows an or divider. Each drink has its own label.

GOV.UK Design System: Radios with a divider, question pages

You asked

Document this chat against the GOV.UK Design System

This page. Every future change goes in the change log below, so earlier decisions are not lost.

7

Change log

Round 6: the NHS design system leads

15 October 2026

  • The NHS design system version is now the main one, because a hospital service in England would most likely use it.
  • The GOV.UK Design System version stays as a second build of the same journey, to compare the two.
  • Every page that shows the examples lists the NHS version first.

Round 5: food labels and drinks

15 October 2026

  • Every dish and drink has a label set out like a UK food label. Ingredients run from most to least by weight, with the 14 allergens in bold and a percentage for named ingredients.
  • Every choice shows front-of-pack traffic lights for fat, saturated fat, sugars and salt. Each colour also has its level in words, so colour is never the only signal.
  • The full label sits in a Details component under the question, so the radios stay short. It shows energy in kJ and kcal, each nutrient per portion, and its share of the reference intake.
  • A drink page follows every meal page. It lists every drink that is safe for the patient's allergies, then No drink, thank you, after an or divider.
  • Check your order shows each meal and its drink on their own rows, each with its own Change link.
  • The service also has a drink choice and labels in the NHS version.

Round 4: each example in its own window

15 October 2026

  • Split the experiment into five pop-outs: this project plan, and four examples that each open on their own.
  • The four examples are the GOV.UK Design System and the NHS design system, each with a patient journey and a ward staff journey.
  • The ward staff journey now has its own start page.

Round 3: orders stay with the patient, and an NHS version

15 October 2026

  • An order now belongs to the patient for their whole stay. It goes with them if they move bed or ward.
  • Patients can change a meal up to 12 hours before it is served. Each meal page shows when it is served and the time to change it by.
  • Coming back to the service shows the patient's current order, ready to change.
  • The staff question is now Where is the patient now?, with three answers. Moving bed keeps the order and meal ID. Going home cancels both.
  • Added family and carers choosing meals as future work, with the safeguards it would need.
  • Built the same journey with the NHS design system, and listed how the two design systems differ.

Round 2: new patients, and the user journey

15 October 2026

  • Added a staff journey to add a new patient to a bed, when someone arrives or replaces another patient.
  • Adding a patient cancels the previous patient's order and their patient meal ID, so the kitchen never sends their meals to the new patient.
  • The check page lists any food in the previous order that the new patient cannot eat, with a warning.
  • A patient meal ID that is no longer in use now shows an error that asks the patient to find a member of staff.
  • Added user journey flowcharts for both journeys, with every error state and check page, and a list version for screen readers.

Round 1: first version

15 October 2026

  • Wrote the project plan and built the example from the brief.
  • Used GOV.UK Frontend 6.5.1 with the Generic header, because the service is not on GOV.UK.
  • Added an inset note on the two identity pages: the answers are filled in for the example, and a patient would type them.
  • Hid food that contains the patient's allergies, and kept three choices for each meal by giving the kitchen up to eight options.
  • Added a stop page for when the details are not the patient's.

8

Still to do

  • Test the journey with patients on a ward, including people who use screen readers and magnification.
  • Choose the NHS version if the service is for an NHS hospital, and test both with patients.
  • Design the family and carer journey, with its safeguards, and test it with patients, families and the safeguarding team.
  • Add special diets with a dietitian, and check how they appear on the ward host's list.
  • Write the ward host's view: every bed, what it ordered, and who still needs help.
  • Design the late menu for patients who arrive after the Friday deadline.
  • Replace the made-up ingredients and nutrition values with the kitchen's recipes, checked by a dietitian.
  • Test the traffic light labels with patients who have low vision or colour blindness.

Sources