Problem
Design the frontend of a cookie consent banner and consent manager (a consent management platform, or CMP) like OneTrust, Cookiebot or Usercentrics. It's the banner that asks Accept all / Reject all / Manage preferences when someone opens a website, plus the system behind it that decides which analytics, advertising and embedded third-party scripts are allowed to run.
It looks like a small UI task, but interviewers use it to test script loading order, privacy rules (GDPR, the ePrivacy "cookie law", CCPA/CPRA), page performance (Core Web Vitals) and accessibility, and whether you can design a clean consent API that the rest of the site uses.
Scenario: one reusable consent library for all of the company's sites (several subdomains), configured per site. Visitors come from the EU and UK, from US states with opt-out privacy laws such as California, and from the rest of the world. The sites use their own analytics, Google tags, ad pixels, and embedded YouTube videos and maps. Some sites have logged-in users.
Functional requirements
- Show a banner to visitors who haven't chosen yet: Accept all, Reject all and Manage preferences, with the categories Necessary, Preferences, Analytics and Marketing.
- Keep non-essential scripts, cookies and embeds from running until they're allowed, then turn them on right after consent without a page reload.
- Remember the choice, let visitors change or withdraw it at any time, and ask again when the policy changes or the choice expires.
- Keep proof of consent, honor the Global Privacy Control (GPC) signal, and support several languages.
Constraints
- Zero non-essential cookies or tracker requests before consent.
- No layout shift, and no extra cost for returning visitors who already decided.
- Accessible to WCAG 2.2 AA.
- The site keeps working if the consent config or API is down.
Discussion areas
- Load order: what has to run in the
<head>before any tracking tag, and how to keep the banner off the critical path. - Blocking third-party content: ways to hold back analytics scripts, ad pixels and YouTube or map iframes until consent, and how to switch them on afterwards.
- Storing the choice: cookie vs localStorage, what the stored value contains, sharing it across subdomains, versioning and expiry.
- Consent API: the JavaScript API other teams call to check or wait for consent, and the backend endpoints for config and proof of consent.
- Integrations: Google Consent Mode v2, and the IAB Transparency and Consent Framework (TCF) for ad-tech vendors.
- Regions: opt-in vs opt-out rules per country, and what to do with Global Privacy Control.
- Withdrawing consent: what happens when someone turns a category off after its scripts already ran.
- Performance: banner flicker on CDN-cached pages, layout shift (CLS), LCP, and a slow "Accept all" click (INP).
- Accessibility and fair design: keyboard and screen reader support, the preferences dialog, focus handling, and the dark patterns regulators reject.
- Reliability and testing: failure modes, and how to prove automatically that nothing tracks before consent.
Follow-up questions interviewers ask
- Why not store the consent choice in localStorage?
- Isn't setting the consent cookie itself a problem before consent?
- Can the banner load late to protect performance?
- Can we block the site until people accept (a "cookie wall")?
- How do you stop a script that already ran when someone withdraws consent?
- Can we A/B test banner designs to raise the acceptance rate?
- Build or buy (OneTrust, Cookiebot, Usercentrics)?