diff --git a/app/_layouts/product.njk b/app/_layouts/product.njk index af093a7ea..c057a50af 100644 --- a/app/_layouts/product.njk +++ b/app/_layouts/product.njk @@ -38,8 +38,9 @@ "Manage breast screening" ] }, { title: "Vaccinations", services: [ - "Record a vaccination", "Book a vaccination", + "Manage your appointments", + "Record a vaccination", "Select people for invitation" ] }, { title: "Personalised prevention", services: [ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/availability-overview.png b/app/images/manage-your-appointments/2024/10/create-availability/availability-overview.png new file mode 100644 index 000000000..e9bae7b5b Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/availability-overview.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/check-session.png b/app/images/manage-your-appointments/2024/10/create-availability/check-session.png new file mode 100644 index 000000000..a1cbca2c2 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/check-session.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/flow.png b/app/images/manage-your-appointments/2024/10/create-availability/flow.png new file mode 100644 index 000000000..a5f467464 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/flow.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/session-dates.png b/app/images/manage-your-appointments/2024/10/create-availability/session-dates.png new file mode 100644 index 000000000..c035d0180 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/session-dates.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/session-services.png b/app/images/manage-your-appointments/2024/10/create-availability/session-services.png new file mode 100644 index 000000000..83a20fa64 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/session-services.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/session-time-capacity.png b/app/images/manage-your-appointments/2024/10/create-availability/session-time-capacity.png new file mode 100644 index 000000000..bab24bda4 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/session-time-capacity.png differ diff --git a/app/images/manage-your-appointments/2024/10/create-availability/session-type.png b/app/images/manage-your-appointments/2024/10/create-availability/session-type.png new file mode 100644 index 000000000..81bbfd86f Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/create-availability/session-type.png differ diff --git a/app/images/manage-your-appointments/2024/10/designing-availability-view/daily-bookings.png b/app/images/manage-your-appointments/2024/10/designing-availability-view/daily-bookings.png new file mode 100644 index 000000000..9bb940f90 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/designing-availability-view/daily-bookings.png differ diff --git a/app/images/manage-your-appointments/2024/10/designing-availability-view/month.png b/app/images/manage-your-appointments/2024/10/designing-availability-view/month.png new file mode 100644 index 000000000..e692a30f6 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/designing-availability-view/month.png differ diff --git a/app/images/manage-your-appointments/2024/10/designing-availability-view/week.png b/app/images/manage-your-appointments/2024/10/designing-availability-view/week.png new file mode 100644 index 000000000..ff67077bb Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/designing-availability-view/week.png differ diff --git a/app/images/manage-your-appointments/2024/10/designing-availability-view/week2.png b/app/images/manage-your-appointments/2024/10/designing-availability-view/week2.png new file mode 100644 index 000000000..78794f93b Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/designing-availability-view/week2.png differ diff --git a/app/images/manage-your-appointments/2024/10/designing-availability-view/year.png b/app/images/manage-your-appointments/2024/10/designing-availability-view/year.png new file mode 100644 index 000000000..40f9f0ca9 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/designing-availability-view/year.png differ diff --git a/app/images/manage-your-appointments/2024/10/improving-nav/availability-improved.png b/app/images/manage-your-appointments/2024/10/improving-nav/availability-improved.png new file mode 100644 index 000000000..465d3a94a Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/improving-nav/availability-improved.png differ diff --git a/app/images/manage-your-appointments/2024/10/improving-nav/availability-overview.png b/app/images/manage-your-appointments/2024/10/improving-nav/availability-overview.png new file mode 100644 index 000000000..65af8aef8 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/improving-nav/availability-overview.png differ diff --git a/app/images/manage-your-appointments/2024/10/improving-nav/landing-improved.png b/app/images/manage-your-appointments/2024/10/improving-nav/landing-improved.png new file mode 100644 index 000000000..8128f9f80 Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/improving-nav/landing-improved.png differ diff --git a/app/images/manage-your-appointments/2024/10/improving-nav/landing-page.png b/app/images/manage-your-appointments/2024/10/improving-nav/landing-page.png new file mode 100644 index 000000000..fa7c061fd Binary files /dev/null and b/app/images/manage-your-appointments/2024/10/improving-nav/landing-page.png differ diff --git a/app/posts/manage-your-appointments.md b/app/posts/manage-your-appointments.md index 530ab2c91..c2e7e175c 100644 --- a/app/posts/manage-your-appointments.md +++ b/app/posts/manage-your-appointments.md @@ -1,7 +1,7 @@ --- layout: collection title: Manage your appointments -description: A service for managing vaccination appointments slots +description: A service for creating and managing availability and appointments for vaccination providers pagination: data: collections.manage-your-appointments reverse: true diff --git a/app/posts/manage-your-appointments/2024/09/2024-09-24-what-is-mya.md b/app/posts/manage-your-appointments/2024/09/2024-09-24-what-is-mya.md new file mode 100644 index 000000000..2e0ff51a1 --- /dev/null +++ b/app/posts/manage-your-appointments/2024/09/2024-09-24-what-is-mya.md @@ -0,0 +1,21 @@ +--- +title: "What is the manage your appointments service?" +date: 2024-09-24 +--- +The service will enable healthcare providers to create and manage availability and appointments + +The service is set up to initially support vaccinations, but over a longer term, could be used to support appointments for other services if needed. + +## The background + +A 3rd party appointments management solution was procured by the NHS in response to the Covid-19 pandemic. + +The Manage your appointments service was designed to replace the existing 3rd party software, and provide more flexibility for expansion of appointment management services. + + +## Where we are + +We’ve built an minimum viable product (MVP), and are testing our service with users delivering the RSV vaccination service in the east of England. + +The service will expand in line with the community pharmacy expansion initiative, and we plan to continue testing and improving the service, to support further expansion, including COVID-19 and flu vaccines. + diff --git a/app/posts/manage-your-appointments/2024/10/2024-10-05-create-availability.md b/app/posts/manage-your-appointments/2024/10/2024-10-05-create-availability.md new file mode 100644 index 000000000..682463e2e --- /dev/null +++ b/app/posts/manage-your-appointments/2024/10/2024-10-05-create-availability.md @@ -0,0 +1,70 @@ +--- +title: Designing the create availability journey +date: 2024-10-05 +--- + +As part of managing availability and appointments, our users need to be able to create periods of availability (sometimes called campaigns). + +Creating availability will automatically create and publish appointments to the National Booking Service (NBS), which will enable citizens to book appointments. + + +## What we did + +Our discovery research showed that NHS organisations that operate vaccination sites have diverse organisational structures and operating models, and it was a challenge to create a design that would work across the wide range of models we’d observed + +We used the knowledge and insights from testing alpha designs to create an availability journey that would support our users to create: + +- sessions that repeat on a weekly basis (weekly sessions) between a range of dates +- one-off sessions that don’t repeat + +The aim was to enable users to set up seasonal campaigns, and also have some flexibility to set up ad-hoc clinics if needed. + +Due to the short timescale, we needed to produce a design that would allow the vast majority of users to set up campaigns that would fit within their operating models. + +## The design + +The first iteration of the design allowed user to create availability periods, and add different session types to those periods. Users could create weekly sessions, with times and capacity that would repeat every week, or single sessions, to cover ad-hoc days. + +![Screenshot that shows the flow and order of the screens in the create availability journey](flow.png) + +Our approach was designed with flexibility in mind, with the intention of enabling users to create availability periods containing multiple sessions, to allow them to create whole seasonal campaigns in one go. + +We created a table containing previously created availability periods, that users could publish, unpublish, and edit. + +### Availability overview + +![Screenshot of a page which lists existing availability periods, with a button to create more](availability-overview.png) + +### Session type + +![Screenshot of a page that allows the users to select which type of session they want to create](session-type.png) + +### Session dates + +![Screenshot of 2 pages that let the user either select a single date or a date range for their selected session type](session-dates.png) + +### Session times and capacity + +![Screenshot of a page where users can set the times and capacity for their session, ](session-time-capacity.png) + +### Session services + +![Screenshot of a page with a checklist for service selection](session-services.png) + +### Check availability period + +![Screenshot of 2 pages, showing the check your answers pattern, for users to check the details of the sessions they've added](check-session.png) + +## Findings + +We tested the journey by creating a task for our users. We asked them to create an availability period which contained both a weekly and single session. + +Users understood the process of creating sessions and were able to create both repeat and multiple sessions quickly. + +We found that the users wanted to save and publish the availability period before they had added all the sessions from the UR task. There was also some hesitation around adding different services to the same availability period. + +> I'm not sure they'd mix vaccines like this into one service for flu and RSV because it's a different type of vaccine, completely about availability. Flu vaccine comes from one place. RSV vaccine comes from somewhere else. They're not necessarily delivered together. + +We also found that users struggled to see the ‘unpublish’ button on existing availability periods due to the length of the page and the need to scroll. This left them feeling uncertain about how to make changes to existing availability. + +Based on these findings, we concluded that the process of creating repeat and single sessions worked for our users, but that we needed to consider the concept of availability periods, and whether these would support the users to create campaigns in the way we had assumed it would. \ No newline at end of file diff --git a/app/posts/manage-your-appointments/2024/10/2024-10-10-designing-availability-view.md b/app/posts/manage-your-appointments/2024/10/2024-10-10-designing-availability-view.md new file mode 100644 index 000000000..36087548a --- /dev/null +++ b/app/posts/manage-your-appointments/2024/10/2024-10-10-designing-availability-view.md @@ -0,0 +1,69 @@ +--- +title: "Designing the availability and bookings view" +date: 2024-10-10 +--- + +As part of managing availability and appointments, our users need to be able to view availability they’ve created, check how many appointments they have booked, and view a list of daily bookings for their site. + + +## What we did + +From our discovery research, we know that users need to: + +- See how many booked and unbooked appointments they had for each day, to help them understand demand for vaccinations. +- See what sessions and services they are providing for each day + + +## Iteration 1 + +We used these needs to create an availability view that would show the timings and services for each day, with total numbers of booked and unbooked appointments. + +### Yearly view + + +![Screenshot that shows a yearly overview with links to each week that has availability set up](year.png) + +The yearly overview was intended to allow the users to understand when their vaccination campaigns began and ended, and help them navigate to the weeks they wanted to view. + +### Weekly view + +![Screenshot of a page that shows a weekly overivew, with numbers of booked and unbooked appointments](week.png) + +The weekly view was where users would find the information they needed to manage their availability, including accessing a list of daily bookings. + +### Findings for iteration 1 + +Users didn’t understand the purpose of the yearly view, and did not find it useful. + +> It just doesn't have enough flexibility in terms of like I would want to see different numbers. But I don't, it doesn't appear to me that I have any control over that and that can't be. + +Users found the weekly overview more useful but were unable to view a breakdown of booked appointments by service or cohort. This is critical information for determining how many vaccines and what types they need to prepare. + +Based on these findings, we concluded that we needed to consider how best to present information in the weekly overview, to ensure that users got the level of detail they needed, and that the yearly overview was not useful in helping our users understand their availability and capacity levels. + + +## Iteration 2 + +In V2 of the availability view, we changed the yearly view for a monthly view that would give users a breakdown of appointment totals by week. We also updated the weekly view, so that the booked appointments were broken down by service or cohort for each day. + +### Monthly view + +![Screenshot of a page that shows a monthly overview, where users can see appointment data broken down by week](month.png) + +### Weekly view + +![Screenshot of a page that shows a weekly overivew, with numbers of booked and unbooked appointments](week2.png) + +### Daily bookings list + +![Screenshot of 2 pages, showing the check your answers pattern, for users to check the details of the sessions they've added](daily-bookings.png) + +We introduced a daily bookings list in this iteration, to allow users to see which slots are booked, and who is attending the appointment. + +## Findings for iteration 2 + +Users found the monthly view more useful, and the breakdown of data was mostly clear. The term ‘available appointments’ was not understood by all users, and they were unsure how many appointments they had that were not booked. + +Users found the breakdown of data by service in the weekly view much more helpful, and found the breakdown of booked, unbooked and total appointments in this view much clearer. + +Users liked having an overview of one day, and who was booked for an appointment. They indicated that they’d like to see more details, such as the age of the person, the vaccination type, and to be able to view more pages if there were enough bookings. \ No newline at end of file diff --git a/app/posts/manage-your-appointments/2024/10/2024-10-22-improving-nav.md b/app/posts/manage-your-appointments/2024/10/2024-10-22-improving-nav.md new file mode 100644 index 000000000..82b9ece3d --- /dev/null +++ b/app/posts/manage-your-appointments/2024/10/2024-10-22-improving-nav.md @@ -0,0 +1,47 @@ +--- +title: "Improving navigation within the dashboard" +date: 2024-10-22 +--- + +As we tested the early iterations of the MYA service, we found that users struggled to navigate properly from one section to another. + +## The initial design + +The first iteration was designed with a landing page, and used breadcrumbs to direct the users back to the landing page, to navigate to different sections of the site. We found that users repeatedly missed the breadcrumbs, and got stuck when we asked them to navigate around the site. + +### landing page + + +![Screenshot that shows the MYA landing page, with cards to navigate to different sections of the site](landing-page.png) + +Users struggled with changing between different sites, which was accessed via the breadcrumb. + +### Availability overview + +![Screenshot of a page which lists existing availability periods, with a button to create more](availability-overview.png) + +After completing tasks such as creating availability, many of our users got stuck when we asked them to navigate to the ‘view availability’ section, and would click on ‘view or edit’ on the availability periods list. + +## What we did + +We looked at other services in Vaccinations Digital Services (VDS), to see how they approached navigation. We focused on services like Record a vaccination (RAVS) and Manage vaccinations in schools (Mavis), which were similar to MYA in terms of user groups and tasks. + +We decided to introduce [NHS header navigation](https://service-manual.nhs.uk/design-system/components/header), which we assumed would make it easier for our users to move around the MYA service. This would also make MYA visually consistent with RAVS and MYA. We also moved the ‘change site’ link into the header, in line with the NHS pattern for logged in service headers + +The navigation is visible when the user is moving around the site, and disappears when the user starts a task (e.g creating availability), to avoid them accidentally leaving the task flow before they are finished. + + +### Landing page + +![Screenshot of a page that shows a monthly overview, where users can see appointment data broken down by week](landing-improved.png) + +In the second iteration of the availability view, we changed the yearly view for a monthly view that would give users a breakdown of appointment totals by week. We also updated the weekly view, so that the booked appointments were broken down by service or cohort for each day. + +### Availability view + +![Screenshot of a page that shows a monthly overview, where users can see appointment data broken down by week](availability-improved.png) + + +## Findings + +Overall, we found that the header navigation was more usable than the breadcrumbs. Users saw the navigation bar, and were able to use it to move between sections of the site, and change sites successfully. \ No newline at end of file diff --git a/app/posts/manage-your-appointments/manage-your-appointments.js b/app/posts/manage-your-appointments/manage-your-appointments.json similarity index 97% rename from app/posts/manage-your-appointments/manage-your-appointments.js rename to app/posts/manage-your-appointments/manage-your-appointments.json index 4fa4d09b7..287caeb1a 100644 --- a/app/posts/manage-your-appointments/manage-your-appointments.js +++ b/app/posts/manage-your-appointments/manage-your-appointments.json @@ -2,4 +2,4 @@ "eleventyNavigation": { "parent": "Manage your appointments" } -} +} \ No newline at end of file diff --git a/eleventy.config.js b/eleventy.config.js index 21ce8f9d4..b160e07d2 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -70,16 +70,16 @@ module.exports = function (eleventyConfig) { }) // Vaccination collections - eleventyConfig.addCollection('record-a-vaccination', collection => { - return collection.getFilteredByGlob('app/posts/record-a-vaccination/**/*.md') + eleventyConfig.addCollection('book-a-vaccination', collection => { + return collection.getFilteredByGlob('app/posts/book-a-vaccination/**/*.md') }) eleventyConfig.addCollection('manage-your-appointments', collection => { return collection.getFilteredByGlob('app/posts/manage-your-appointments/**/*.md') - }) + }) - eleventyConfig.addCollection('book-a-vaccination', collection => { - return collection.getFilteredByGlob('app/posts/book-a-vaccination/**/*.md') + eleventyConfig.addCollection('record-a-vaccination', collection => { + return collection.getFilteredByGlob('app/posts/record-a-vaccination/**/*.md') }) eleventyConfig.addCollection('select-people-for-invitation', collection => {