ClickConvert
? Oops! Sorry
The mobile version is not created.
I'm working.
Please visit on desktop version.
Project
ClickConvert
Date
Tasks
March 2026
Product Design
IT Strategy
Business Arch.
Branding
Web
ERP
Vibe coding
An Engineering Kerning LABS® Case Study
Designing a high-performance conversion framework from the ground up. I built this proprietary PHP framework and ClickFlow® engine to prove how custom MVC and surgical UX transform hypotheses into high-ROI infrastructures.
#1 The Vision
Most businesses are inadvertently bleeding ROI by relying on «bloatware-heavy» CMS platforms. These generic systems are built for the masses, sacrificing loading speed and user experience for a suite of features that offer zero value to a high-ticket sales funnel. In a world where every millisecond costs money, «standard» is no longer enough.
ClickConvert was born from a radical philosophy: Surgical Precision. It isn’t just a website; it’s a proprietary Full-stack PHP infrastructure engineered to bridge the gap between digital traffic and actual revenue. By applying a strict MVC architecture and «Zero-Bloat» coding, I have stripped away the technical debt of traditional systems to prioritize what truly matters: speed, traceability, and conversion.
With a native 98%+ Lighthouse performance and sub-100ms response times, ClickConvert ensures that the path from a Google Ads click to a qualified lead is frictionless. The vision is to transform technical excellence into a business weapon—moving beyond vanity metrics to focus on a single, uncompromising goal:
The Maximum Conversion.
#2 Strategic Core
ClickConvert isn’t just a website; it’s a dynamic sales funnel. My workflow integrates market-fit research with a proprietary ClickFlow system:
- Step-up Profiling: Instead of long, friction-heavy forms, the framework uses a progressive qualification logic. It captures basic data first and injects complex fields (budget, specs, urgency) as the user engages, ensuring a surgical filter of lead quality.
- Ad-Hoc Zero-Bloat Architecture: Built entirely from scratch in strict PHP MVC, this framework eliminates the heavy dependencies and bloatware of traditional CMS platforms. By guaranteeing load times under 100ms and a consistent Lighthouse score of >98, it minimizes bounce rates, directly lowering the Cost Per Acquisition (CPA) and maximizing Google Ads ROAS.
- Behavioral Fingerprinting & Predictive Scoring: A built-in Business Intelligence engine calculates the real «temperature» of a lead dynamically. It tracks engagement depth—such as the frequency of visits, time spent on case studies, and interaction within a 48-hour window—to assign a dynamic Sales Velocity score. This allows sales teams to prioritize high-intent micro-targets instantly.
- End-to-End Attribution & True ROI Tracking: Moving beyond vanity metrics and simple lead volume, the framework seamlessly syncs ad spend with closed deals. It traces the entire user lifecycle from the first Google Ads click to the final signed contract months later, revealing the net Return on Ad Spend (True ROAS) and the real Lifetime Value (LTV) of each campaign.
- Workzone ERP: A centralized backend that provides total lead traceability, from the first Google Ads click to the final conversion, including real-time interest scoring.
- Automated Nurturing: Integrated SMTP and API logic that «warms up» leads with automated, transactional emails based on user behavior and project status.
#3 Work Process
The Challenge: Can a high-performance CRO framework be conceptualized, branded, and deployed in just two weeks?
This project was a personal challenge to evolve a conversion framework from 2024 into a fully functional MVP, leading the entire cycle from strategic architecture to the final product deployment.
- 01. Time-Boxing & Research: I established a strict 14-day window to move from ideation to a multi-language landing page. The process began by auditing my 2024 research docs and using html.to.design to import validated structures into Figma, allowing for rapid UI prototyping without reinventing the wheel.
- 02. Interaction Architecture: Once the UI flows were defined in Figma, I drafted 5 comprehensive specification documents. These covered every technical touchpoint: dynamic forms, modal logic, interlinking, and UX triggers, ensuring the system’s «brain» was fully mapped before writing a single line of code.
- 03. Vibe Coding & Prompt Engineering: Using Claude as a high-speed development partner, I imported the visual designs and the 5 spec docs. I leveraged «Vibe Coding»—directing the AI to generate a custom «All-in-one» HTML/Tailwind CSS structure, focusing on architectural integrity rather than just syntax.
- 04. Iterative Fine-Tuning: I performed 20 to 30 iterations per page to ensure 1:1 fidelity with the Figma design. This stage was critical to refining JS interactions and polishing the «Kerning» (the details) of the code to reach professional standards.
- 05. Systematization & Backend Logic: I manually configured the internal processing logic (config-send.php, project-form.php, and transactional email templates). This ensured that the AI-generated frontend integrated perfectly with a secure, functional backend.
- 06. Performance Validation: The result is a lightweight, ultra-fast infrastructure. Despite the speed of development, the core architecture achieved a 97+ PageSpeed score, proving that AI-guided code, when strictly directed, can outperform traditional heavy CMS builds.
#4 Results
I am incredibly proud of this milestone: delivering a full-scale digital product in just 14 days. Despite not being a developer by trade, I successfully architected the core ClickFlow® framework, designed the high-conversion landing infrastructure, and engineered a fully functional ERP backend with automated lead nurturing.
This project proves that with ‘Vibe Coding’ and strategic direction, the gap between a complex hypothesis and a production-ready, scalable MVP can be closed in record time. From pure logic to final deployment: it’s all live ?
Explore the final deployment
A high-performance conversion engine, delivered in record time.
ReformesReus.cat
? Oops! Sorry
The mobile version is not created.
I'm working.
Please visit on desktop version.
Project
ReformesReus
Date
Tasks
March 2023
Product Design
UX & Figma System
CRO Architecture
PHP Backend
GTM & Attribution
Performance Media
ClickFlow Engine
A CRO Kerning LABS® Case Study
Building a full-conversion web ecosystem for a local renovation company, from blank canvas to €400K in quoted revenue in 90 days. The project proves that high-intent lead generation can be achieved autonomously through rigorous product thinking and performance design, without relying on AI.
#1 The Vision
Reformes Reus was never a website project.
It was a revenue engineering problem disguised as one.
The renovation market in Reus, Catalonia, was fragmented, offline-first, and entirely dependent on word-of-mouth. The opportunity was clear: build the digital infrastructure that local competitors simply didn’t have — and turn it into a lead machine. The vision was to design a complete acquisition system: a high-performance website built around conversion psychology, a custom CMS to give the business full operational autonomy, and a data layer connected to paid media that could scale.
Every decision, from information architecture to form placement to Google Ads campaign structure, was made with one metric in mind: qualified quotes generated.
The result was a complete product ecosystem — proprietary CMS (Workzone), mobile-first design system, CRM-integrated contact logic, and a GTM + Google Ads stack — shipped end-to-end in 2023.
This system became the foundation of what I later formalized as the ClickFlow Engine, my proprietary conversion framework.
#2 Strategic Core
The core challenge was engineering a digital acquisition system capable of converting high-intent renovation leads with zero friction and full operational autonomy for the client. This required building more than a website — it required a full conversion ecosystem: a product with its own CMS, a design system calibrated for trust-building, and a performance layer that could feed paid media campaigns with clean, attributable data.
The solution was architected around a proprietary PHP + MySQL core (Workzone CMS), a Figma-to-production design system, and a fully connected analytics and ads stack via Google Tag Manager and Google Ads.
At the conversion layer, a One-Step Profiling funnel captures leads with zero-friction entry capturing only name, email, and phone, then routes them through an automated qualification sequence that populates the CMS with full renovation specs before any human touchpoint. At the retention layer, a native Contact Mailing Engine allows sending targeted blog content directly to individual leads from within the CRM, with per-contact tracking of opens, clicks, timestamps and IP, delivering full engagement intelligence with no third-party dependency.
- Proprietary CMS (Workzone): Custom-built content management system in PHP with multi-module architecture — blog, static pages, contact management, newsletter, file manager, and role-based access control. Full operational autonomy for the client with zero dependency on third-party platforms.
- Product Design & UX System: End-to-end product development in Figma — wireframes, high-fidelity prototypes, mobile-first design system, and component library. Full UX flow designed before a single line of code was written.
- CRO Architecture with One-Step Profiling Funnel: Two zero-friction forms placed at top and bottom of the homepage capture only name, email, and phone. On submission, the lead self-qualifies through a Project Form — triggered both on-page and via automated email — surfacing full renovation specs in the CMS before any human touchpoint. Every funnel ends in the blog, extending session depth through content.
- Data Layer & Attribution (GTM): Google Tag Manager implementation connecting all user interactions — form submissions, CTA clicks, scroll depth, and session data, enabling full-funnel attribution for paid media.
- Performance Media (Google Ads): Campaign architecture built on clean conversion data from GTM. Keyword strategy aligned with renovation intent signals in the Tarragona market.
- Mobile-First Design: Full responsive system designed and validated in Figma before development. Mobile version treated as primary, not as an afterthought.
- Custom CRM Logic & Email Intelligence: Contact management system with origin tracking, service type categorization, read/unread status, soft delete, and automated email notifications — built directly into the CMS. The platform includes a native content mailing engine: blog posts can be sent individually to any lead from within the CRM. Each send is tracked at delivery level — open detection (Llegada) and click tracking (Click + timestamp + IP) — giving full visibility into post-send engagement per contact without any third-party email tool.
- ClickFlow Engine Framework: The conversion logic, IA structure, and CRO methodology deployed in Reformes Reus became the operational blueprint for what I later systematized as the ClickFlow Engine framework.
#3 Work Process
The Challenge: Can a full conversion ecosystem — custom CMS, mobile-first design system, CRO strategy, and paid media infrastructure — be designed and shipped by a single product lead in 2023 without AI tools?
This project was a full-stack product sprint executed through rigorous design thinking and technical orchestration. Starting from market research, the entire product was architected and delivered: from UX flows and Figma prototypes to a custom PHP CMS, a Google Tag Manager data layer, and live Google Ads campaigns.
Every decision was made to eliminate the gap between business intent and user action — deploying a system that captures, qualifies, and routes high-intent renovation leads autonomously, 24 hours a day.
The developer executed the technical build. Every product decision, design specification, UX architecture, CRO logic, conversion copy, data layer implementation, and media strategy was designed and directed in-house.
No templates. No WordPress. No AI. Pure product engineering and conversion design.
#4 Results
Reformes Reus compressed what typically requires an agency, a media buyer, and months of iteration into a single coordinated product sprint — and delivered commercial results within the first quarter of operation.
In 90 days from launch, the system generated over €400,000 in renovation quotes — fully attributed, tracked, and routed through the conversion infrastructure built from scratch.
The CMS gave the client complete operational autonomy: blog management, contact CRM, newsletter, and file uploads — all without third-party dependency. The contact system tracked every submission origin, enabling continuous CRO iteration based on real conversion data.
The GTM + Google Ads stack created a closed-loop acquisition system: user behavior fed campaign optimization, campaign traffic fed the conversion funnel, and the CRM captured and qualified every lead automatically.
Beyond the numbers, Reformes Reus validated a repeatable methodology — the intersection of product design, conversion architecture, and performance media — that I later formalized as the ClickFlow Engine: a proprietary framework for engineering revenue systems from zero. 🚀
Rafel Gil | Senior Product Architect & Growth Strategist
Defining digital solutions
with systemic rigor
+15 years architecting high-impact products via engineering logic & curated design.
Senior Architect in Product · Design Ops · UX/CRO · Growth
Volkswagen website
Strategic UX & Usability engineering to enhance user-centricity and…
Movertis
Leading the 360° product strategy and growth architecture for a GPS fleet…
Studio Projects
8 years of cross-functional leadership for agencies and startups,…
Built for desktop.
This is a technical portfolio, system architecture, AI workflows, and a DevLog. It doesn't do it justice on mobile. Open it on your computer or send the link to yourself.
Kerning LABS®
See the latest work
These projects are part of Kerning LABS® — my product studio where business logic meets conversion design.
Every case study documents the full process: from strategy and architecture to deployment and real commercial results.
+15 YEARS OF PRODUCT & RIGOR
Human and Creative
I am a Senior Product Architect & Growth Strategist with a unique background: 12 years in civil engineering and 15 leading high-scale digital products. This trajectory allows me to merge engineering precision with strategic design to architect robust, scalable, and high-performing digital products.
Specializing in Systemic Rigor and my UX Pyramid Method®, I go beyond aesthetics to focus on product architecture, Design Ops, and UX/CRO. I don't just manage projects; I engineer products that align business goals with user needs through Applied AI and technical rigor.
I lead strategic consulting, helping companies transform complex visions into roadmaps and profitable digital products. Integrating Design Ops with systemic rigor, I ensure assets are built to scale, minimizing technical debt while maximizing ROI.
Tagline
Methodology
Change the color to match your brand or vision, add your logo, choose the perfect layout, modify menu settings, add animations, add shape dividers, increase engagement with call to action and more. Change the color to match your brand or vision, add your logo, choose the perfect layout, modify menu settings, add animations, add shape dividers, increase engagement with call to action and more.
+15
Years
+120
Projects
+2000
Pages of Brief
+10K
Cups of coffee ☕
Feedback of Rafel
15+ years merging engineering logic with curated design and UX/CRO. An approach driven by systemic rigor that consistently leaves clients surprised by its depth.
Account manager | DDB Barcelona
Rafel nos ayudó mucho en un proyecto largo y ambicioso para nuestro cliente Volkswagen. Su actitud y predisposición siempre fueron bien acogidas y valoradas.
Technological advisor at Movertis
Rafel is creative, dynamic, he is excellence. Responsible, resilient and decisive, contagious curiosity and the desire to always take a step forward, a wonderful...
UX Designer | DDB Barcelona
He’s an absolute team-player, always ready to solve problems or challenges thrown at him with sound IxD and UI proposals, thus improving the overall user...
Full picture?
Download my CV
