-
Notifications
You must be signed in to change notification settings - Fork 9
nbs 2 posts #115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nbs 2 posts #115
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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** | ||
|
|
||
|  | ||
|
|
||
| **Appointment slot selection screen** | ||
|
|
||
|  | ||
|
|
||
| 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** | ||
|
|
||
|  | ||
|
|
||
| **Appointment slot selection screen** | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## 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> | ||
|
|
||
|  | ||
|
|
||
|
|
||
| <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
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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?
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For individual figures with figcaption, you can use the following Markdown: The templates also support providing a list of screenshots at the bottom of a post. For that, you can use the ---
title: My post
screenshots:
items:
- Start page
- Confirmation page
---The above assumes that the two images are named ---
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?
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For the above, you could conceivably use the following Markdown:  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 |
||
|
|
||
| ## The existing screen | ||
|
|
||
| The existing screen used cards to show users information about their booking. | ||
|
|
||
|  | ||
|
|
||
| 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** | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## 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. | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.