WORK /
CATEGORY
Framer Development
YEAR
2026
ROLE
Web Designer & Framer Dev.
INDUSTRY
AI
TIMEFRAME
2 Months
SERVICE
Framer Development
TL;DR
OVERVIEW
The client, a senior Product leadership executive at a major global tech company, wanted a personal branding website built around a specific point of view: that companies over-reliant on algorithms lose users, while companies over-reliant on ego-driven decisions fail to innovate on the tech side. The site positions him as the balancing force between the two, offering metrics-driven consulting solutions in tech and innovation, built from the ground up, from moodboard and logo through a fully custom-coded diagnostic quiz.
OBJECTIVES
/ 01
Establish a Distinct Personal Brand
Build a site that clearly positions the client as the balance point between algorithm-driven and ego-driven decision-making in tech.
/ 02
Deliver a Diagnostic Tool, Not Just a Brochure Site
Go beyond a standard landing page by building a custom questionnaire that actively diagnoses a visitor's organization.
/ 03
Ship a Fully Functional, Production-Ready Site
Carry the project from concept through live deployment, with working quiz logic, CMS, and all supporting integrations in place.
/ 01
Full Ground-Up Brand & Site Build
Built the moodboard, logo, and complete landing page (home page plus articles), designed in Figma and approved before moving into development.
/ 02
Custom Culture Debt Score Quiz
Designed a 10-question questionnaire where each question carries its own weight, producing one of four score-based outcomes, under 25%, 25, 50%, 50, 75%, and 75, 100%, each with its own diagnosis and recommendation.
/ 03
Custom Quiz Logic Built in TypeScript
Carry the project from concept through live deployment, with working quiz logic, CMS, and all supporting integrations in place.
/ 04
Article System via CMS
Set up a CMS to power the site's article section alongside the main landing page.
/ 05
Post-Quiz Lead Capture
Added a custom contact form after the quiz results, letting visitors subscribe ahead of an upcoming ebook release.
/ 06
Full Technical Setup
Integrated Google Analytics and reCAPTCHA, with the full site built responsive across desktop and mobile.
/ 01
Custom Culture Debt Score Diagnostic Engine
A 10-question, independently-weighted quiz scores each visitor into one of four outcome tiers, each with its own tailored diagnosis and recommendation, all powered by custom TypeScript logic coded directly through Framer's Code Overrides rather than a plugin.
/ 02
High-End "Tech Terminal" Visual Identity
A sleek, terminal-inspired design language with custom gradient illustrations, built to resonate with senior tech and product executives.
/ 03
Post-Result Lead Capture Flow
After receiving their diagnosis, visitors are guided into a custom contact form to subscribe for an upcoming ebook, turning the quiz into a lead-generation tool rather than just an engagement gimmick.
IMPACT
The finished site gave the client a personal brand asset that goes beyond a typical consulting landing page, the Culture Debt Score quiz turns visitors into qualified leads by giving them a concrete diagnosis of their organization before any conversation even starts, while the post-result form builds an audience for his upcoming ebook. The client was highly satisfied with the final result, considering the design an accurate match for his vision.
RESULTS
The project delivered a complete personal branding platform, from initial moodboard and logo through a fully custom-coded diagnostic quiz and CMS-backed article system, built and shipped end-to-end in Framer with production-grade setup including analytics, reCAPTCHA, and full responsiveness. Coding the quiz's scoring logic directly in TypeScript to power a marketing-facing diagnostic tool set this build apart from a typical landing page project, and the client considered the final design a strong match for his vision.
