Andrei Vidaicu
NSW Cookie banner component
Standardising user consent through a NSW Design System component
On this page:
Background
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.”
This marked the beginning of our journey to design a cookie banner that would 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.
Research
A key objective of the research was to determine the necessity of including a cookie banner as a component in the NSW Design System. Given our tight schedule, it was important to make our research activities quick and focused. My goal for the research was to compile actionable insights that would help in making 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]
- 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.
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.
The design of the banner also included an evaluation of the cookie settings being displayed - comparing a modal approach versus a separate page on the website.
""Are there any accessibility concerns displaying the cookie preferences through a dialog modal"?"
Testing
Once we had a clear understanding of the design requirements, I created a prototype, allowing us to evaluate how well it met the needs of our customers and their users.
Listening to feedback from the communityReflections & learnings
The addition of the cookie banner component to the NSW Design System has marked a significant milestone and we hope it becomes a model for all 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. Moving forward, we plan to keep refining our approach based on the feedback we receive.
Tiers examples - Large screens
Tiers examples - Small screens
