Building CookieTrace’s Digital Experience with MadeByCat
How CookieTrace’s multilingual consent experience is presented on the web: information architecture, UX/UI decisions, front-end development, accessibility, performance and privacy by design.
The product context
CookieTrace is a consent management platform for GDPR, KVKK, ePrivacy and CCPA. It scans a website with a real browser, lists the cookies, pixels and third-party scripts it finds, keeps non-essential trackers from running until the visitor decides, converts that decision into Google Consent Mode v2 signals, and stores a timestamped consent record for each choice. The website has to make that machinery legible to marketers, developers and compliance owners at the same time. CookieTrace is a product of Ezeratech Digital (Ezera Digital Technologies FZCO); the two names belong to the same organisation.
Presenting a multilingual consent experience clearly
The site is published in English, Turkish, Spanish, Italian and Arabic. Language is expressed in the URL rather than guessed: English at the root, and /tr, /es, /it and /ar for the rest, each with its own canonical and hreflang set.
- One URL per language, linkable and indexable in that language
- Arabic rendered right-to-left, with email and domain inputs kept left-to-right
- Regulation names kept in their local form (GDPR, KVKK, PDPL)
- A language switcher that keeps the reader on the same page
Information architecture
The structure follows the questions readers arrive with: what the product does, how it behaves before consent, how it proves consent afterwards, what it costs and how to install it. Platform features, an FAQ and a glossary sit around that spine so a single term can be explored without losing the page. The blog answers one concrete question per article and links to the glossary term and product page it depends on.
UX and interface decisions
A warm, low-glare palette with a small set of consistent accent colours, a geometric heading face for structure, a neutral body face for long-form reading and a monospace face for code, signal names and cookie identifiers.
- Callouts separate product behaviour from the customer's own legal obligations
- Public prices shown as figures wherever a public price exists
- Short forms with labels rather than placeholder text
- Motion used to orient, and disabled under reduced-motion preferences
Web development approach
The site is a React single-page application built with Vite and Tailwind CSS. Routes are code-split and loaded on demand, and the content crawlers need - headings, article text, FAQ entries and structured data - is also emitted as plain HTML at build time, so page meaning does not depend on JavaScript. Structured data is generated from the same source as the visible page: organisation and website schema on the homepage, article and breadcrumb schema on posts, FAQ schema where a real FAQ exists.
Accessibility
Accessibility constraints applied across the site.
- Semantic landmarks and a skip link to main content on every page
- Keyboard-reachable navigation, dialogs and language switching with visible focus
- Contrast checked on body text, muted text and interactive states
- Correct lang and dir attributes per route, including right-to-left Arabic
- Reduced-motion support for background and scroll animation
Performance
Route-level code splitting keeps the initial bundle small, images are sized and lazy-loaded below the fold, and fonts are preconnected and loaded with a swap strategy so text is readable while they arrive. Animation is confined to compositor-friendly properties so scrolling stays smooth on mid-range phones.
Privacy by design
The site loads analytics in a denied-by-default Consent Mode v2 state and only upgrades it after the visitor chooses; its own consent banner is the product it sells, running under the rules it recommends. Forms collect the minimum fields needed, consent checkboxes are unticked by default, and no third-party tracker is embedded that is not categorised in the site's own cookie policy.
Working with MadeByCat
MadeByCat supported the design and development of CookieTrace's digital experience: information architecture, interface design and front-end implementation alongside the product team.