Standardising user consent through a design system component

A framework to handle privacy compliance digitally

Client: Digital NSWDuration: 3 monthsTeam: UX Designer, Product Manager, Front-end Developer

Challenge

We've received multiple requests from various NSW government departments for the need to create a cookie banner, to strengthen privacy information by gaining user consent, particularly for those using analytics tools, such as heatmapping tools like Hotjar.

"Without a way for end users to consent to the storage of their personal information, not only infringes on individual privacy rights, but also presents a risk of misuse of sensitive information for NSW government agencies." - NSW privacy staff memeber

This marked the beginning of our journey to standardise a reusable cookie banner which would allow users to have more control over the storage of their personal information while enforcing compliance for NSW government agencies.

Approach

The research aimed to determine whether a cookie banner component should be included in the NSW Design System. Given our tight schedule, it was important to make our research activities quick and focused. The primary objective was to gather findings that could be translated into actionable insights to inform better design decisions.

Interviews

Engaging with privacy team SMEs highlighted key privacy concerns and the need for a stricter tier for GDPR and CCPA compliance, especially for agencies interacting with European organizations. It also revealed risks such as higher bounce rates and the potential impact for marketing teams on measuring performance.

During this phase I started sketching various common use cases by mapping user stories where two common tiers were identified based on the strength of privacy.

Customer audit & competitor benchmarking

I evaluated 48 customer websites and competitor design systems looking at common themes, and identifying potential gaps. The purpose of the evaluation focused on:

how cookie information currently being communicated? [our customers]
what is the current method for users to manage their privacy settings? [our customers]
how is cookie information captured? Is it on a separate page? [our customers]
is there any mention of GDPR? [our customers]
what are some common themes in the wording of the cookie information? [our customers]
what are the various ways it can be presented in the UI? [our customers, competitors]

This image has popup zoom functionality - click on it to see it fullscreen:

A collection of government and non-government cookie banners with a focus on accessibility.

The key takeaways from the audit and benchmarking phase were:

Even though allowing users to manage the storage of their personal information is not currently a high priority, based on feedback from our privacy team and relevant articles, it's safe to assume that strict privacy standards are approaching.
52% of our customers contained a section in their privacy page on cookies which indicates awareness on privacy and cookies use although none contained an option to manage the user’s consent.
Even though our customers' websites don't widely acknowledge GDPR, agencies interacting with European organizations that need to comply with GDPR and CCPA will need user consent.
The GOV UK cookie banner documentation is the industry standard and leader, which we used as a benchmark.

This image has popup zoom functionality - click on it to see it fullscreen:

A set of actionable recommendations.

Design

The creation of the banner involved me looking at common elements between each tier, looking at which smaller components from the NSW Design System could be used and how they fit together. By focusing on reusing these modular components, I established a solid foundation that addressed potential accessibility issues and ensured they displayed correctly across various devices and screen sizes.

Given the high priority of accessibility in government, placement played a key role in the design. Although 80% of the banners reviewed were fixed to the screen, risking content obstruction and disrupting the reading order for users who rely on tabbing to navigate - this consideration was crucial. As part of the process, I also examined other UI elements, such as the Global Alert, which could potentially appear simultaneously in the same position. This assessment considered display priorities and potential conflicts, including micro-interactions and color usage.

This image has popup zoom functionality - click on it to see it fullscreen:

In scenarios where a 'Global alert' is shown, this the banner appears in the secondary position below it.

The banner design also included evaluating how to display cookie settings. We compared a modal approach with a separate website page and assessed whether displaying cookie preferences through a dialog modal would raise any accessibility concerns.

This image has popup zoom functionality - click on it to see it fullscreen:

After establishing clear design requirements, I built a prototype for testing with customers and their users. Part of this was to create a post gathering feedback from the Digital NSW community

Standardising user consent through a design system component - Process Image 1 — Tier 1 (desktop size)

Standardising user consent through a design system component - Process Image 2 — Tier 2 (desktop size)

Standardising user consent through a design system component - Process Image 3 — All tiers (mobile size)

See the NSW cookie banner in action

Impact

The addition of the cookie banner component to the NSW Design System has marked a significant milestone and, it's even received interest from other Australian government websites. It shows the design system's ability to adjust to a variety of use cases while setting a solid foundation for future implementations.

More case studies

Connecting CALD: Raising awareness in inclusive leadership

Digital NSW

Uniting seven Digital NSW branches under a new digital front door

Digital NSW