Confidential/2026
AdTracking
A navigable prototype of a SaaS for deterministic ad tracking and profitability BI: 98 screens, modals and states built without a framework.
(01) Overview
AdTracking ties every sale to the session, click and search term that produced it, so an advertiser sees real net profit per campaign instead of probabilistic attribution. Working from a technical front-end specification, I designed and built the full clickable prototype of the platform: access, dashboard, campaigns, keywords, call tracking, CRM, conversions, anti-fraud, billing and an internal support console.
Client
Confidential
Year
2026
Services
Design, Development
Deliverables
Product design, Design system, Clickable prototype, Review documentation
The Challenge
The specification described a dense analytics product in ten functional blocks, with forensic detail per visitor, live call monitoring and bidding tools, for a team that needed to review it without installing anything. Every state had to be reviewable, not just the happy path, and client comments had to stay traceable across many rounds of changes.
The Approach
One screen is one folder and the URL is the folder: static HTML, hand-written CSS in three shared layers and native ES modules, with no framework or bundler. Navigation uses real links while every internal state (modal, drawer, tab, loading, empty, error, demo flags) lives in the URL hash, which makes each state addressable and therefore capturable. A Playwright script walks a single manifest of views and fails on any console error or bad request; a small custom bundler produces a build the client opens by double-clicking. Charts, sparklines and the ROAS heatmap are hand-built in SVG and CSS.
screens, modals and states designed & built
documented review rounds with the client team
frameworks: static HTML, CSS and ES modules
(02) Brand & Design System
A light interface on cool neutrals where blue means action and purple is the only accent; the two meet in the gradient of the mark. Urbanist carries headings and KPI figures with tabular numerals, Inter the interface, and JetBrains Mono anything a user might copy: IDs, IPs, keys. No emojis anywhere: the spec's traffic lights became dot and tag components. Loading, empty and error states are part of every screen, and the loading skeleton replicates the real layout.
Palette
Typography
Urbanist
1.250,50 € · ROAS 4,2 · 0123456789
display y cifras KPI con números tabulares · Inter para interfaz · JetBrains Mono para IDs, IPs y código
(03) The Product
A forensic view of every visitor
The session drawer shows identifiers, Geo-IP with VPN and datacenter detection, the full device fingerprint and a journey timeline from entry to exit, plus a chronological log of phone, mail and WhatsApp clicks.
Attackers identified by fingerprint, not IP
The shield keeps an attacker identified even when the IP rotates. The detail view shows the ad and search term behind the clicks, the network range used and a cascaded blocking history that respects the account's IP cap.
A live pool of tracking numbers
Each row shows the number currently swapped on the site, the live state of the call with countdowns and timers, the destination, the traffic source and the session the call is attributed to.
Attribution built into every card
A Kanban pipeline where each lead carries its traffic source and the exact search term that generated it, so commercial follow-up and ad attribution are the same object.
Search terms turned into decisions
An opportunities panel with a recommendation score per term and one-click approve as exact keyword or add as negative, with undo. Approved rows turn green and negatives are struck through.
(04) The Outcome
A prototype that behaves like the product: 98 active screens, modals and states across 23 routes, reviewed and refined over 13 documented rounds. Each round shipped a change log where every row cites the section of the spec it comes from and deep-links to the affected state. Capture numbers are fixed identities, so a comment about capture 40 still means the same screen three rounds later. Several rounds changed product logic, not just layout: a hard block became a soft paused state, and project creation grew from a modal into an eleven-step guided process.