Extend prototype for accessibility research

[vanitabarrett]

What

As part of our accessibility research (alphagov/govuk-design-system#1377), we want to amend the existing GaaP assistive research prototype to include the different things we want to test, including:

• Notification banner
• Conditional reveals
• Accordion re-design
• Hover states
• New cookie banner buttons (?)

We created a prototype to take to the accessibility clinic to test the notification banner, which we can build on for the user research. The existing prototype is here: https://bluebadge-notification-banner.herokuapp.com/

Why

We need some realistic examples of pages and a service flow to take to test with users.

Who needs to know about this

Designers, developers, user research

Done when

• We've identified how we're going to test each of the components/issues listed above
• We've built those scenarios into the prototype

Resources

Google Drawing of the journey/things we want to test: https://docs.google.com/drawings/d/1TN7VgsOsi4rnS7dWZJO3H6hIV369hIiPTR7B6B82f6k/edit

[CharlotteDowns]

Addition to the accordion prototype for testing

For user research we are going to test an accordion with description text as well as without.

[vanitabarrett]

Prototype is here: https://blue-badge.cloudapps.digital/ (blue-badge / blue-badge)

We've included the following changes:

• Cookie banner content and buttons
• Moving phase banner into a <header> element
• Adding a guidance page with the new accordion design
• New link hover styles
• Information (blue) notification banner on the task list page
• Stacked information (blue) notification banner on the task list page once someone has completed all the sections
• Radio conditional reveal ("list healthcare professionals")
• Success notification banner + information notification banner when someone adds a healthcare professional
• Checkbox conditional reveal ("Contact details")