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.
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
