Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Comment thread
jolumley-nhs marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: Making the appointment selection process clearer for users
date: 2025-02-24
---

Our research with National Booking Service (NBS) users had shown that some of our users found the appointment selection process difficult.

Some people struggled to remember which date they had selected, and then found it difficult to remember which time of day they were free.


## The existing screens

**Time range selection screen**

![Screen with radio buttons for users to select an hour range for their vaccination appointment](timerangeold.png)

**Appointment slot selection screen**

![Screen with radio buttons for users to select an appointment slot for their vaccination appointment](timeslotold.png)

Users would forget which date they had previously selected, and find choosing a time range and appointment slot difficult as a result of this

## What we did

We included the date the user had selected for their appointment on the time range and appointment slot screens.

We hypothesised that this would help users remember which date they had chosen, and reduce confusion and difficulties around choosing appointment times.

**Time range selection screen**

![Screen with radio buttons for users to select an hour range for their vaccination appointment](timerangenew.png)

**Appointment slot selection screen**

![Screen with radio buttons for users to select an appointment slot for their vaccination appointment](timeslotnew.png)


## Findings

We found that displaying the selected date on the subsequent screens meant that users were less confused when they were selecting their appointment time.

Users were able to see which date they had selected, and this made it easier for them to remember which times they were available on that date, which reduced frustration when choosing an appointment time.

Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: "Improving the booking complete screen"
date: 2025-04-24
---

After the introduction of the panel component to the NHS design system, we took the opportunity to make improvements to our booking complete screens

<figure>

![Screenshot from the NHS design system, showing the new panel component](panelcomponent.png)


<figcaption>From the <a href="https://service-manual.nhs.uk/design-system/components/panel">NHS.UK Design System</a></figcaption>
</figure>
Comment on lines +8 to +14
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@paulrobertlloyd I've seen screenshot items being looped, but is there a better Nunjucks way to output these figure and figcaptions?

Copy link
Copy Markdown
Collaborator

@paulrobertlloyd paulrobertlloyd Apr 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For individual figures with figcaption, you can use the following Markdown:

![Alternative text](/path/to/file.jgp "Caption")

The templates also support providing a list of screenshots at the bottom of a post. For that, you can use the screenshots array, i.e.

---
title: My post
screenshots:
  items:
    - Start page
    - Confirmation page
---

The above assumes that the two images are named start-page.png and confirmation-page.png. If you want to reference invidual files, you can use the src value, and if you want to add a caption, you cam add the caption value, like so:

---
title: My post
screenshots:
  items:
    - text: Start page
      caption: This is the start page.
    - text: Confirmation page
      src: confirmation-page-with-photo.jpg
      caption: We show a photograph on the confirmation page
---

Here’s an example of a page with a list of screenshots: https://design-history.prevention-services.nhs.uk/manage-vaccinations-in-schools/2024/03/pilot-record-a-vaccination/

Might this be worth documenting in the guide area @frankieroberto?

Copy link
Copy Markdown
Collaborator

@paulrobertlloyd paulrobertlloyd Apr 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the above, you could conceivably use the following Markdown:

![Screenshot from the NHS design system, showing the new panel component](panelcomponent.png "From the [NHS.UK Design](https://service-manual.nhs.uk/design-system/components/panel) System")

But I’d discourage using Markdown inside the caption because a.) it might not work and b.) this is really intended to be used as the title attribute on the image, which of course can not display HTML (this is a commonly used hack around Markdown’s lack of support for figures and figcaptions)


## The existing screen

The existing screen used cards to show users information about their booking.

![Screen showing the old booking complete screen, with information presented in cards](bookingcompleteold.png)

Using cards can help to highlight key information, but using them exclusively on this screen made it difficult to understand which information was the most important, as it all appears to be similarly prioritised.

## What we did

We used the new panel component to show the user confirmation that their booking was complete, and changed the way some of the information on the screen was presented.

We also used inset text to highlight some key information about saving booking reference numbers



**The new screen**

![Screen showing the new booking complete screen, with information presented in the panel component, and using paragraphs to display other information](bookingcompletenew.png)


## Findings

The majority of users found the new screen straightforward, and understood that their booking had been completed successfully. Users were clear about the details of their appointment, including the time, date, and vaccine type.