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. By the end of the research I aimed to gather a set of actionable recommendations that would enable us to make more informed 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 the reuse of these smaller, modular components, we were able to establish a solid foundation, addressing potential accessibility issues and ensured they displayed correctly across various devices and screen sizes with minimal effort.
I then looked at the position of the banner. Given the importance of accessibility, especially in government, the consensus was that the banner would appear relative as the first element on the page. Even though 80% of the banners reviewed were fixed to the screen, we didn't want to run the risk of obstructing any content, and disrupting the reading order for users who rely on tabbing to navigate the page. Part of this process, I also looked at other UI elements such as the Global Alert, which could potentially be displayed at the same time, in the same position. This assessment included considering their display priority and identifying potential conflicts, such as micro-interactions and color use.
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.
- Guidance cookie preferences page example
- Cookie preferences page example
- Digital NSW Community post for engagement
Reflections & 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 needs 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
