Designing a cookie banner component and cookie page pattern collaboratively

Adding a cookie banner and cookie page to the GOV.UK Design System

Buttons and links

A proposed cookie banner introduced new styles and buttons to the existing GOV.UK Design System library.

I explored the styles, states, and relationships that buttons and links have with one another. This visual representation created in Figma walks the team through decisions and questions that we would have to resolve before implementation.

After a review from the Design System Working Group – made up of representatives from across government departments – we followed the consensus to use two buttons with Design System default styling.

The decision was taken to develop a button group, I provided feedback and made adjustments to the design of the working draft. This variant of the button component ensures teams who want to put buttons next to other buttons, and buttons next to links do not have to go through the same investigation and decision process.

User research prototyping

The GOV.UK Pay and GOV.UK Design System teams conducted combined user research during November and December 2020. We tested with participants who had little or no vision and used screen readers and ZoomText. Other participants had dyslexia and used Text-to-Speech and Read and Write Gold.

These 8 remote usability sessions allowed us to test a range of components within a specified user journey.

I added an early version of the cookie banner component to the prototype. This first design had a green button for ‘accept cookies’ and a white button for ‘reject cookies’.

3 out of 4 participants accepted the cookies straight away.

We changed the buttons after participant 4 to a design that had two green buttons for the two options to observe any differences in behaviour.

4 out of 4 participants accepted the cookies straight away.

Publishing the component

I published a summary of the team's work on the cookie banner component and cookie page pattern to the Design System community backlog.

Colour