Web App
BlockVantage
AI-powered campaign analytics platform
A full-stack data analytics website with an AI engine that processes advertising patterns, built as a standalone demo experience that bridges marketing and product.
UX Design · UI Design · Engineering
How do you convert backend AI intelligence systems into a compelling, user-friendly demo that drives signups for the full SaaS platform?
Design and build a standalone demo experience that bridges marketing and product:
- •Demo Experience: Interactive brand analysis tool for AI-generated campaign insights
- •Lead Capture: Conversion-optimized signup flows
- •Technical Integration: Connect frontend with Databricks APIs and LLM services
Balancing showing enough platform value to generate qualified leads while maintaining simplicity for broad audience appeal, and ensuring the demo experience accurately represents the full platform's capabilities.
Solution Preview
A preview of what the platform delivers.
When a user submits a brand URL, BlockVantage processes the site through its AI engine and returns a full campaign analysis. The preview above shows the processing state — the moment between input and insight where the system is actively working through brand analysis, audience segmentation, and campaign recommendations.
Industry Background
The advertising intelligence gap.
Blockboard is a programmatic media platform — AI-powered, blockchain-backed, built around trust-verified ad delivery. The company serves mid-market agencies and brands running campaigns across streaming TV and digital channels.
BlockVantage is a product inside that ecosystem. It takes the data intelligence that powers Blockboard's ad buying and packages it as a self-service tool: enter a brand, get a full campaign recommendation, launch streaming TV ads. The pitch is simple — no minimums, no wasted spend, real results.
The problem I was hired to solve: BlockVantage had a working AI engine but no public-facing experience. Small and mid-sized clients couldn't see what the platform actually did before committing. The typical onboarding involved sales calls, slide decks, and weeks of back-and-forth. The goal was to compress that into a single self-serve demo that doubles as a lead-generation tool.
Parent brand
Final iteration
Infrastructure Design
Securing and scaling the AI pipeline.
The demo site needed to call Databricks APIs from a browser — which meant solving for CORS, secret management, caching, and abuse prevention all at once. Rather than stitching together multiple AWS services, I chose Cloudflare as a unified infrastructure layer. Workers handled proxying and caching, KV stored rotating tokens, DNS provided content filtering, and Turnstile replaced CAPTCHA for bot protection.
Cloudflare Workers provided a unified solution for CORS proxying, intelligent caching, secret rotation, and URL security scanning — eliminating the complexity of managing multiple AWS services. Five capabilities, one platform.
Front-End Design
BlockVantage started on Framer — the right tool for rapid prototyping when the product's core value lived in backend intelligence, not frontend complexity.
What Framer Provided
Rapid prototyping, layout iteration, and visual design exploration. Framer allowed fast experimentation with interaction patterns and visual hierarchy while Cloudflare Workers and Databricks handled the heavy lifting on the backend. It was the right tool for validating the product's core experience before committing to a full build.
Why the Migration Was Needed
- •Server-side rendering for faster initial loads and dynamic content
- •SEO control — meta tags, OG images, structured data for organic discovery
- •Performance — code splitting, image optimization, edge caching
- •Maintainability — typed components, reusable patterns, testable architecture
What Changed in the UI
Cleaner typography, tighter spacing, a more polished conversion flow, and responsive design that scales from mobile to ultra-wide. The entire user journey — from first impression to signup — was redesigned during the migration to move visitors through content with fewer distractions and stronger calls to action.
API Breadth for Marketing
Next.js made it straightforward to integrate third-party tracking and reporting APIs that Framer couldn't support. Visitor analytics, conversion events, and demo engagement data could now be captured server-side and piped directly to marketing platforms — giving the sales team real attribution data instead of guesswork.
Technical Stack
LLM Design
The web app uses Databricks to orchestrate a multi-stage data pipeline. Web content is processed through cloud clusters where a cost-optimized, production-grade model extracts semantic features. LangChain handles prompt orchestration and response formatting. Content is automatically classified into IAB taxonomy categories.
For audience mapping, segments are generated by vector-matching taxonomy profiles against behavioral signals — producing dynamic audiences with probability scores and estimated reach.
Real-Time Processing: When a user submits a brand URL, the interface displays a live progress indicator as the LLM engine processes the request. Users see the system working — not a blank screen — which builds trust and sets expectations for the 60-second analysis window.
The multi-stage data pipeline — from web content to audience recommendations
Expanding the Product
From demo to lead-generation engine.
With the core demo experience validated, the product needed to close the loop. A compelling AI analysis means nothing if there is no path from “that was interesting” to “I want to use this.” After the Next.js migration, we added account creation directly into the site — users transition from exploring the demo to registering in a single flow, no redirects, no friction.
Account creation was the missing bridge. The demo proved the AI engine worked — it showed users exactly what BlockVantage could do with their brand data. But without a path to ownership, every demo session ended at a dead end. Adding signup directly into the page meant users could act on momentum: see their brand analyzed, understand the value, and claim their account without context-switching to a separate registration flow.
Enter Details
Submit your email and company name. The same information used in the demo carries forward — no redundant data entry.
Verify Email
A verification link confirms the account. This step filters out bots and ensures legitimate lead capture for the sales team.
Receive Credentials
Account credentials and a direct login link are delivered. The user transitions from demo visitor to platform user in under a minute.
The Final Product
Everything in one flow.
The shipped site consolidates the entire experience into one continuous flow: landing page, AI-powered demo, campaign results, and account creation. Content was streamlined for clarity, and CTAs were placed at natural decision points throughout the page. A visitor can go from first impression to signup without ever leaving the experience.
The final shipped site — landing, demo, results, and signup in one page
Summary and Results
Designed and shipped a full-stack demo-to-signup engine — migrating from Framer to Next.js along the way — that gives potential customers a hands-on preview of the platform's AI capabilities.
Key Features: Real-time LLM processing, dynamic campaign visualizations, responsive design, Framer-to-Next.js migration
malicious traffic
API calls to LLM
demo-to-trial conversion
- •Created seamless conversion pathway from demo experience to paid platform
- •Significantly reduced infrastructure costs through optimized API usage
- •Enhanced user experience drives higher demo-to-trial conversion rates
- •Positioned BlockVantage as an accessible, enterprise-ready advertising solution