Back to Notes
3 Years. One Weekend. One Million+ Users. And a Full Circle Moment.
3 Years. One Weekend. One Million+ Users. And a Full Circle Moment.
3 Years. One Weekend. One Million+ Users. And a Full Circle Moment.
How we used Framer to build, scale, and manage the NIAT website from scratch — and everything I learned along the way about speed, ownership, and designing at scale without breaking things.
How we used Framer to build, scale, and manage the NIAT website from scratch — and everything I learned along the way about speed, ownership, and designing at scale without breaking things.
How we used Framer to build, scale, and manage the NIAT website from scratch — and everything I learned along the way about speed, ownership, and designing at scale without breaking things.
Introduction
Introduction
Introduction
Three years ago, my manager walked up to me and Abhishek Acharya and said something that sounded simple on the surface — "We need a website for NIAT. Can you both get it done?"
Three years ago, my manager walked up to me and Abhishek Acharya and said something that sounded simple on the surface — "We need a website for NIAT. Can you both get it done?"
Three years ago, my manager walked up to me and Abhishek Acharya and said something that sounded simple on the surface — "We need a website for NIAT. Can you both get it done?"
What he didn't say was: we need it fast, we're both completely new to the tool, and this is going to be the face of an initiative that will eventually reach millions of students.
What he didn't say was: we need it fast, we're both completely new to the tool, and this is going to be the face of an initiative that will eventually reach millions of students.
What he didn't say was: we need it fast, we're both completely new to the tool, and this is going to be the face of an initiative that will eventually reach millions of students.
That weekend, we sat down, opened Framer for the first time, and started figuring it out. No prior training. No documentation walkthrough. Just a goal, a deadline, and a blank canvas.
That weekend, we sat down, opened Framer for the first time, and started figuring it out. No prior training. No documentation walkthrough. Just a goal, a deadline, and a blank canvas.
That weekend, we sat down, opened Framer for the first time, and started figuring it out. No prior training. No documentation walkthrough. Just a goal, a deadline, and a blank canvas.
And somehow — we shipped it.
And somehow — we shipped it.
And somehow — we shipped it.
Fast forward to today — I had the opportunity to share that entire journey at Manifest 2026, a creative community event held at Microsoft Hyderabad, where Framer was an official partner. Standing in that room and talking about how a weekend experiment turned into managing a website with 1 Million+ unique visitors felt genuinely surreal.
Fast forward to today — I had the opportunity to share that entire journey at Manifest 2026, a creative community event held at Microsoft Hyderabad, where Framer was an official partner. Standing in that room and talking about how a weekend experiment turned into managing a website with 1 Million+ unique visitors felt genuinely surreal.
Fast forward to today — I had the opportunity to share that entire journey at Manifest 2026, a creative community event held at Microsoft Hyderabad, where Framer was an official partner. Standing in that room and talking about how a weekend experiment turned into managing a website with 1 Million+ unique visitors felt genuinely surreal.
This article is everything I shared in that session — and more.
This article is everything I shared in that session — and more.
This article is everything I shared in that session — and more.
3
Years managing the NIAT website on Framer
1M+
Unique visitors on the NIAT website last year
25+
External university pages built and managed in Framer CMS
Top 1% Developer
Recognized by the Framer team in their Year End Wrap
Why Framer? And Why It Made Sense for Us
Why Framer? And Why It Made Sense for Us
Why Framer? And Why It Made Sense for Us
When we started, the biggest advantage Framer had over every other tool in our consideration set was one thing: it felt like Figma.
When we started, the biggest advantage Framer had over every other tool in our consideration set was one thing: it felt like Figma.
When we started, the biggest advantage Framer had over every other tool in our consideration set was one thing: it felt like Figma.
If you've ever spent time designing in Figma, Framer's layout system, component logic, and canvas interactions feel immediately familiar. You don't need a developer mindset to start building. That familiarity was not a small thing — it meant designers could take full ownership of the website without waiting for a developer in the loop for every change.
If you've ever spent time designing in Figma, Framer's layout system, component logic, and canvas interactions feel immediately familiar. You don't need a developer mindset to start building. That familiarity was not a small thing — it meant designers could take full ownership of the website without waiting for a developer in the loop for every change.
If you've ever spent time designing in Figma, Framer's layout system, component logic, and canvas interactions feel immediately familiar. You don't need a developer mindset to start building. That familiarity was not a small thing — it meant designers could take full ownership of the website without waiting for a developer in the loop for every change.
That principle — designer ownership, minimal developer dependency — became the core philosophy behind how we ran the NIAT website for the next three years.
That principle — designer ownership, minimal developer dependency — became the core philosophy behind how we ran the NIAT website for the next three years.
That principle — designer ownership, minimal developer dependency — became the core philosophy behind how we ran the NIAT website for the next three years.
The Features We Used Daily — And Why They Mattered
The Features We Used Daily — And Why They Mattered
The Features We Used Daily — And Why They Mattered
Over three years, we didn't just use Framer as a website builder. We pushed it in ways that forced us to build our own systems and patterns on top of it. Here's what we actually used, and the real-world problems each feature solved.
Over three years, we didn't just use Framer as a website builder. We pushed it in ways that forced us to build our own systems and patterns on top of it. Here's what we actually used, and the real-world problems each feature solved.
Over three years, we didn't just use Framer as a website builder. We pushed it in ways that forced us to build our own systems and patterns on top of it. Here's what we actually used, and the real-world problems each feature solved.
Automatic WebP Conversion
Automatic WebP Conversion
Automatic WebP Conversion
One of the quietly powerful things about Framer is that it automatically converts PNG and JPG images to WebP format on upload. For a website like NIAT — which is content-heavy, imagery-rich, and accessed by students on mobile connections — this matters enormously for page speed.
One of the quietly powerful things about Framer is that it automatically converts PNG and JPG images to WebP format on upload. For a website like NIAT — which is content-heavy, imagery-rich, and accessed by students on mobile connections — this matters enormously for page speed.
One of the quietly powerful things about Framer is that it automatically converts PNG and JPG images to WebP format on upload. For a website like NIAT — which is content-heavy, imagery-rich, and accessed by students on mobile connections — this matters enormously for page speed.
Beyond the automatic conversion, Framer also has a plugin called the WebP Image Converter that let us optimize images directly within the platform. No exports, no external tools, no back-and-forth with a developer. Clean, fast, done inside Framer itself.
Beyond the automatic conversion, Framer also has a plugin called the WebP Image Converter that let us optimize images directly within the platform. No exports, no external tools, no back-and-forth with a developer. Clean, fast, done inside Framer itself.
Beyond the automatic conversion, Framer also has a plugin called the WebP Image Converter that let us optimize images directly within the platform. No exports, no external tools, no back-and-forth with a developer. Clean, fast, done inside Framer itself.
Why this matters at scale: When you're managing a website with dozens of sections, multiple landing pages, and content being updated regularly by multiple team members, image optimization can't be a manual afterthought. Having it baked into the tool keeps things fast by default.
Why this matters at scale: When you're managing a website with dozens of sections, multiple landing pages, and content being updated regularly by multiple team members, image optimization can't be a manual afterthought. Having it baked into the tool keeps things fast by default.
Why this matters at scale: When you're managing a website with dozens of sections, multiple landing pages, and content being updated regularly by multiple team members, image optimization can't be a manual afterthought. Having it baked into the tool keeps things fast by default.
The YouTube Video Component Trick
The YouTube Video Component Trick
The YouTube Video Component Trick
This one is my favorite engineering solution we built inside Framer — and it came from a real problem.
This one is my favorite engineering solution we built inside Framer — and it came from a real problem.
This one is my favorite engineering solution we built inside Framer — and it came from a real problem.
We had sections in the NIAT website that needed to display 20+ videos in a single page. The moment you drop even a handful of live YouTube components on a page, page speed tanks. It doesn't matter which tool you're using — embedding live YouTube iframes kills your load time.
We had sections in the NIAT website that needed to display 20+ videos in a single page. The moment you drop even a handful of live YouTube components on a page, page speed tanks. It doesn't matter which tool you're using — embedding live YouTube iframes kills your load time.
We had sections in the NIAT website that needed to display 20+ videos in a single page. The moment you drop even a handful of live YouTube components on a page, page speed tanks. It doesn't matter which tool you're using — embedding live YouTube iframes kills your load time.
Here's what we did: we created a custom component with two variants.
Here's what we did: we created a custom component with two variants.
Here's what we did: we created a custom component with two variants.
Variant 1
Variant 1
Variant 1
A static thumbnail image, styled to look exactly like a YouTube video player. The real YouTube component is set to Visible: No.
A static thumbnail image, styled to look exactly like a YouTube video player. The real YouTube component is set to Visible: No.
A static thumbnail image, styled to look exactly like a YouTube video player. The real YouTube component is set to Visible: No.
Variant 2
Variant 2
Variant 2
The actual YouTube component, now set to visible. The thumbnail is hidden.
The actual YouTube component, now set to visible. The thumbnail is hidden.
The actual YouTube component, now set to visible. The thumbnail is hidden.
We then added a simple interaction: when the user clicks on the thumbnail, it switches to Variant 2. The YouTube embed loads only at that moment — not on page load.
We then added a simple interaction: when the user clicks on the thumbnail, it switches to Variant 2. The YouTube embed loads only at that moment — not on page load.
We then added a simple interaction: when the user clicks on the thumbnail, it switches to Variant 2. The YouTube embed loads only at that moment — not on page load.
The result? A page with 20+ "videos" that loads as fast as a page with 20 images. Because until the user clicks, that's exactly what it is.
The result? A page with 20+ "videos" that loads as fast as a page with 20 images. Because until the user clicks, that's exactly what it is.
The result? A page with 20+ "videos" that loads as fast as a page with 20 images. Because until the user clicks, that's exactly what it is.
Variables — One Button, Infinite Flexibility
Variables — One Button, Infinite Flexibility
Variables — One Button, Infinite Flexibility
Here's a stat that sounds made up but is completely true: we have exactly one button component in our entire Framer project. One. With a single variant.
Here's a stat that sounds made up but is completely true: we have exactly one button component in our entire Framer project. One. With a single variant.
Here's a stat that sounds made up but is completely true: we have exactly one button component in our entire Framer project. One. With a single variant.
That one button — through variables — powers every CTA, every action link, every "Apply Now" across the entire NIAT website.
That one button — through variables — powers every CTA, every action link, every "Apply Now" across the entire NIAT website.
That one button — through variables — powers every CTA, every action link, every "Apply Now" across the entire NIAT website.
The same principle applies to testimonial cards, university listing cards, news and media highlight cards, course cards. We build one. We create variables for the content fields. We duplicate it across the canvas and just swap the data.
The same principle applies to testimonial cards, university listing cards, news and media highlight cards, course cards. We build one. We create variables for the content fields. We duplicate it across the canvas and just swap the data.
The same principle applies to testimonial cards, university listing cards, news and media highlight cards, course cards. We build one. We create variables for the content fields. We duplicate it across the canvas and just swap the data.
This might sound like basic component thinking — and it is. But the discipline of actually enforcing it across a large website, with multiple designers contributing, is what keeps things consistent over years.
This might sound like basic component thinking — and it is. But the discipline of actually enforcing it across a large website, with multiple designers contributing, is what keeps things consistent over years.
This might sound like basic component thinking — and it is. But the discipline of actually enforcing it across a large website, with multiple designers contributing, is what keeps things consistent over years.
The CMS — Where Real Speed Lives
The CMS — Where Real Speed Lives
The CMS — Where Real Speed Lives
NIAT collaborates with many universities across India. Students who join the NIAT program can pursue their B.Tech from partner colleges alongside the NIAT curriculum. As new universities come on board, the website needs to reflect that — fast.
NIAT collaborates with many universities across India. Students who join the NIAT program can pursue their B.Tech from partner colleges alongside the NIAT curriculum. As new universities come on board, the website needs to reflect that — fast.
NIAT collaborates with many universities across India. Students who join the NIAT program can pursue their B.Tech from partner colleges alongside the NIAT curriculum. As new universities come on board, the website needs to reflect that — fast.
Before CMS, adding a new university meant manually duplicating a page, updating content, checking for inconsistencies. After CMS, it means opening a collection, adding a new row, filling in the details, and publishing. New university on the website in minutes.
Before CMS, adding a new university meant manually duplicating a page, updating content, checking for inconsistencies. After CMS, it means opening a collection, adding a new row, filling in the details, and publishing. New university on the website in minutes.
Before CMS, adding a new university meant manually duplicating a page, updating content, checking for inconsistencies. After CMS, it means opening a collection, adding a new row, filling in the details, and publishing. New university on the website in minutes.
We also maintained two different types of universities in the CMS — internal partners and external collaborations — with different display logic and page behaviors for each.
We also maintained two different types of universities in the CMS — internal partners and external collaborations — with different display logic and page behaviors for each.
We also maintained two different types of universities in the CMS — internal partners and external collaborations — with different display logic and page behaviors for each.
Meta Titles & Descriptions for CMS Pages
Meta Titles & Descriptions for CMS Pages
Meta Titles & Descriptions for CMS Pages
For any CMS-driven page, Framer lets you pull in collection fields directly into the SEO metadata. Instead of hard-coding a meta title for every university page, we use {{Meta Title}} and {{Meta Description}} — and Framer populates them dynamically from whatever is in that CMS record.
For any CMS-driven page, Framer lets you pull in collection fields directly into the SEO metadata. Instead of hard-coding a meta title for every university page, we use {{Meta Title}} and {{Meta Description}} — and Framer populates them dynamically from whatever is in that CMS record.
For any CMS-driven page, Framer lets you pull in collection fields directly into the SEO metadata. Instead of hard-coding a meta title for every university page, we use {{Meta Title}} and {{Meta Description}} — and Framer populates them dynamically from whatever is in that CMS record.
This kept our SEO sharp across 25+ university pages without any manual intervention every time a page was created or updated.
This kept our SEO sharp across 25+ university pages without any manual intervention every time a page was created or updated.
This kept our SEO sharp across 25+ university pages without any manual intervention every time a page was created or updated.
The External University Pages — Our Smartest Infrastructure Decision
The External University Pages — Our Smartest Infrastructure Decision
The External University Pages — Our Smartest Infrastructure Decision
This is the part I'm most proud of, and it's a good example of using a tool's constraints creatively to solve a real business problem.
This is the part I'm most proud of, and it's a good example of using a tool's constraints creatively to solve a real business problem.
This is the part I'm most proud of, and it's a good example of using a tool's constraints creatively to solve a real business problem.
Here's the situation: NIAT collaborates with 25+ external universities. The expectation was that each of these universities would have a dedicated page about NIAT on their own websites — giving prospective students all the information they need about the program.
Here's the situation: NIAT collaborates with 25+ external universities. The expectation was that each of these universities would have a dedicated page about NIAT on their own websites — giving prospective students all the information they need about the program.
Here's the situation: NIAT collaborates with 25+ external universities. The expectation was that each of these universities would have a dedicated page about NIAT on their own websites — giving prospective students all the information they need about the program.
The challenge? Each university runs on a completely different tech stack. Coordinating design, development, content updates, and link changes across 25+ different university web teams is an operational nightmare. Every time we needed to update a phone number, change a CTA, or refresh course details — we'd need to reach out to each university's team individually and wait.
The challenge? Each university runs on a completely different tech stack. Coordinating design, development, content updates, and link changes across 25+ different university web teams is an operational nightmare. Every time we needed to update a phone number, change a CTA, or refresh course details — we'd need to reach out to each university's team individually and wait.
The challenge? Each university runs on a completely different tech stack. Coordinating design, development, content updates, and link changes across 25+ different university web teams is an operational nightmare. Every time we needed to update a phone number, change a CTA, or refresh course details — we'd need to reach out to each university's team individually and wait.
We decided to take complete ownership.
We decided to take complete ownership.
We decided to take complete ownership.
"We built all 25+ university pages ourselves — in Framer. Then we gave each university a single URL to embed. That's it. They never had to touch their website for NIAT content again. We owned everything.
"We built all 25+ university pages ourselves — in Framer. Then we gave each university a single URL to embed. That's it. They never had to touch their website for NIAT content again. We owned everything.
"We built all 25+ university pages ourselves — in Framer. Then we gave each university a single URL to embed. That's it. They never had to touch their website for NIAT content again. We owned everything.
Using Framer CMS, we created a standardized template for all external university pages — same structure, same theme, same content fields, same quality. Each university got their own CMS record. Each record generated its own page.
Using Framer CMS, we created a standardized template for all external university pages — same structure, same theme, same content fields, same quality. Each university got their own CMS record. Each record generated its own page.
Using Framer CMS, we created a standardized template for all external university pages — same structure, same theme, same content fields, same quality. Each university got their own CMS record. Each record generated its own page.
Now here's the clever part: we stripped out the NIAT header and footer entirely from these pages. No navbar. No site footer. Just the core content.
Now here's the clever part: we stripped out the NIAT header and footer entirely from these pages. No navbar. No site footer. Just the core content.
Now here's the clever part: we stripped out the NIAT header and footer entirely from these pages. No navbar. No site footer. Just the core content.
The universities then embedded these URLs in their websites using a simple iframe. From the visitor's perspective, it looks like a native part of the university's website. From our end, it's a Framer CMS page we fully control.
The universities then embedded these URLs in their websites using a simple iframe. From the visitor's perspective, it looks like a native part of the university's website. From our end, it's a Framer CMS page we fully control.
The universities then embedded these URLs in their websites using a simple iframe. From the visitor's perspective, it looks like a native part of the university's website. From our end, it's a Framer CMS page we fully control.
Any time we needed to update anything — contact details, program information, deadlines, buttons — we updated the CMS record. Every university's embedded page updated instantly. No emails. No dependencies. No waiting.
Any time we needed to update anything — contact details, program information, deadlines, buttons — we updated the CMS record. Every university's embedded page updated instantly. No emails. No dependencies. No waiting.
Any time we needed to update anything — contact details, program information, deadlines, buttons — we updated the CMS record. Every university's embedded page updated instantly. No emails. No dependencies. No waiting.
One important Framer feature made this possible:
One important Framer feature made this possible:
The ability to control whether a page should appear in search engine results. For the external university pages, we disabled search indexing — these pages aren't meant to be discovered independently, they're meant to be embedded. Framer lets you control this per-page, which gave us exactly the right behavior.
The ability to control whether a page should appear in search engine results. For the external university pages, we disabled search indexing — these pages aren't meant to be discovered independently, they're meant to be embedded. Framer lets you control this per-page, which gave us exactly the right behavior.
The ability to control whether a page should appear in search engine results. For the external university pages, we disabled search indexing — these pages aren't meant to be discovered independently, they're meant to be embedded. Framer lets you control this per-page, which gave us exactly the right behavior.
Managing Digital Marketing Pages — A Different Set of Rules
Managing Digital Marketing Pages — A Different Set of Rules
Managing Digital Marketing Pages — A Different Set of Rules
Not all pages on a website serve the same purpose. The pages we built for organic traffic — SEO-optimized, content-rich, link-connected — were completely different animals from the pages we built for paid digital marketing campaigns.
Not all pages on a website serve the same purpose. The pages we built for organic traffic — SEO-optimized, content-rich, link-connected — were completely different animals from the pages we built for paid digital marketing campaigns.
Not all pages on a website serve the same purpose. The pages we built for organic traffic — SEO-optimized, content-rich, link-connected — were completely different animals from the pages we built for paid digital marketing campaigns.
DM pages (as we called them internally) followed a strict set of rules:
DM pages (as we called them internally) followed a strict set of rules:
DM pages (as we called them internally) followed a strict set of rules:
🚫 No external links or internal navigation:
🚫 No external links or internal navigation:
🚫 No external links or internal navigation:
Every link on a DM page that takes a visitor somewhere else is a potential conversion loss. We removed them all — no navbar links, no footer navigation, no "read more" links to other pages.
Every link on a DM page that takes a visitor somewhere else is a potential conversion loss. We removed them all — no navbar links, no footer navigation, no "read more" links to other pages.
Every link on a DM page that takes a visitor somewhere else is a potential conversion loss. We removed them all — no navbar links, no footer navigation, no "read more" links to other pages.
📌 Minimal footer — only the mandatory stuff:
📌 Minimal footer — only the mandatory stuff:
📌 Minimal footer — only the mandatory stuff:
Privacy Policy and Terms & Conditions stayed. Everything else was removed. The only goal of these pages was a single action: click Apply Now or Register.
Privacy Policy and Terms & Conditions stayed. Everything else was removed. The only goal of these pages was a single action: click Apply Now or Register.
Privacy Policy and Terms & Conditions stayed. Everything else was removed. The only goal of these pages was a single action: click Apply Now or Register.
🔍 Hidden from search engines:
🔍 Hidden from search engines:
🔍 Hidden from search engines:
Framer lets you disable search indexing and internal site search per page. We disabled both for all DM pages. These pages were built for paid traffic — showing up organically would confuse the analytics and the user experience.
Framer lets you disable search indexing and internal site search per page. We disabled both for all DM pages. These pages were built for paid traffic — showing up organically would confuse the analytics and the user experience.
Framer lets you disable search indexing and internal site search per page. We disabled both for all DM pages. These pages were built for paid traffic — showing up organically would confuse the analytics and the user experience.
🔗 UTM parameters on every CTA:
🔗 UTM parameters on every CTA:
🔗 UTM parameters on every CTA:
Every button on every DM page had UTM parameters attached. We needed to know not just which campaign drove a visitor to the page — but which specific button on which specific page they clicked to convert.
Every button on every DM page had UTM parameters attached. We needed to know not just which campaign drove a visitor to the page — but which specific button on which specific page they clicked to convert.
Every button on every DM page had UTM parameters attached. We needed to know not just which campaign drove a visitor to the page — but which specific button on which specific page they clicked to convert.
UTM Parameters — The Analytics Backbone
UTM Parameters — The Analytics Backbone
UTM Parameters — The Analytics Backbone
UTMs weren't just something we added to DM pages. They were baked into every meaningful link across the entire NIAT website.
UTMs weren't just something we added to DM pages. They were baked into every meaningful link across the entire NIAT website.
UTMs weren't just something we added to DM pages. They were baked into every meaningful link across the entire NIAT website.
The discipline worked like this: every CTA button, every "Apply Now," every referral link, every link we shared externally — all carried UTM parameters. Not as an afterthought, but as a standard practice built into how we built and maintained the website.
The discipline worked like this: every CTA button, every "Apply Now," every referral link, every link we shared externally — all carried UTM parameters. Not as an afterthought, but as a standard practice built into how we built and maintained the website.
The discipline worked like this: every CTA button, every "Apply Now," every referral link, every link we shared externally — all carried UTM parameters. Not as an afterthought, but as a standard practice built into how we built and maintained the website.
This gave us real clarity on user behavior. We could see which section of which page was driving the most applications. We could tell which campaign sources were converting best. We could identify buttons that looked prominent but nobody was clicking.
This gave us real clarity on user behavior. We could see which section of which page was driving the most applications. We could tell which campaign sources were converting best. We could identify buttons that looked prominent but nobody was clicking.
This gave us real clarity on user behavior. We could see which section of which page was driving the most applications. We could tell which campaign sources were converting best. We could identify buttons that looked prominent but nobody was clicking.
Combined with Microsoft Clarity for heatmaps and session recordings, Google Analytics for traffic and funnel data, and Framer's built-in analytics for page-level engagement — we had a genuinely comprehensive picture of how visitors interacted with the website.
Combined with Microsoft Clarity for heatmaps and session recordings, Google Analytics for traffic and funnel data, and Framer's built-in analytics for page-level engagement — we had a genuinely comprehensive picture of how visitors interacted with the website.
Combined with Microsoft Clarity for heatmaps and session recordings, Google Analytics for traffic and funnel data, and Framer's built-in analytics for page-level engagement — we had a genuinely comprehensive picture of how visitors interacted with the website.
That stack — UTMs + Clarity + GA + Framer Analytics — became our full-funnel visibility layer. Nothing happened on the website that we couldn't trace.
That stack — UTMs + Clarity + GA + Framer Analytics — became our full-funnel visibility layer. Nothing happened on the website that we couldn't trace.
That stack — UTMs + Clarity + GA + Framer Analytics — became our full-funnel visibility layer. Nothing happened on the website that we couldn't trace.
Custom Code in Framer — Three Features We Built Ourselves
Custom Code in Framer — Three Features We Built Ourselves
Custom Code in Framer — Three Features We Built Ourselves
Framer's code override feature is one of those things that separates it from every drag-and-drop tool. You can write real React code, attach it to any element as an override, and extend the platform's native behavior in ways that aren't possible out of the box.
Framer's code override feature is one of those things that separates it from every drag-and-drop tool. You can write real React code, attach it to any element as an override, and extend the platform's native behavior in ways that aren't possible out of the box.
Framer's code override feature is one of those things that separates it from every drag-and-drop tool. You can write real React code, attach it to any element as an override, and extend the platform's native behavior in ways that aren't possible out of the box.
We used it for three specific things that made a real difference on the NIAT website.
We used it for three specific things that made a real difference on the NIAT website.
We used it for three specific things that made a real difference on the NIAT website.
Exit Intent Popup
Exit Intent Popup
Exit Intent Popup
An exit intent popup is triggered when a desktop user moves their cursor toward the top of the browser window — the area where the close or back button lives. It's the last moment before a visitor leaves, and a well-timed popup can re-engage them.
An exit intent popup is triggered when a desktop user moves their cursor toward the top of the browser window — the area where the close or back button lives. It's the last moment before a visitor leaves, and a well-timed popup can re-engage them.
An exit intent popup is triggered when a desktop user moves their cursor toward the top of the browser window — the area where the close or back button lives. It's the last moment before a visitor leaves, and a well-timed popup can re-engage them.
We implemented this on the NIAT website using a code override. The logic tracked cursor position relative to the browser viewport and triggered the popup component when the cursor approached the exit zone.
We implemented this on the NIAT website using a code override. The logic tracked cursor position relative to the browser viewport and triggered the popup component when the cursor approached the exit zone.
We implemented this on the NIAT website using a code override. The logic tracked cursor position relative to the browser viewport and triggered the popup component when the cursor approached the exit zone.
We intentionally kept this desktop-only. On mobile, there's no equivalent cursor movement to track, and a poorly-timed popup on mobile creates friction rather than reducing it.
We intentionally kept this desktop-only. On mobile, there's no equivalent cursor movement to track, and a poorly-timed popup on mobile creates friction rather than reducing it.
We intentionally kept this desktop-only. On mobile, there's no equivalent cursor movement to track, and a poorly-timed popup on mobile creates friction rather than reducing it.
Dynamic Exam Date — Never Update It Again
Dynamic Exam Date — Never Update It Again
Dynamic Exam Date — Never Update It Again
NIAT conducts the NAT Exam every week. Prospective students need to know the next upcoming exam date so they can register in time. Manually updating this date across the website every week is exactly the kind of repetitive work that creates errors and slips through the cracks.
NIAT conducts the NAT Exam every week. Prospective students need to know the next upcoming exam date so they can register in time. Manually updating this date across the website every week is exactly the kind of repetitive work that creates errors and slips through the cracks.
NIAT conducts the NAT Exam every week. Prospective students need to know the next upcoming exam date so they can register in time. Manually updating this date across the website every week is exactly the kind of repetitive work that creates errors and slips through the cracks.
We built a code component that automatically determines the next upcoming Sunday date and displays it. The logic is simple: if today is past the most recent Sunday, show the next Sunday. If the current Sunday hasn't passed, show it.
We built a code component that automatically determines the next upcoming Sunday date and displays it. The logic is simple: if today is past the most recent Sunday, show the next Sunday. If the current Sunday hasn't passed, show it.
We built a code component that automatically determines the next upcoming Sunday date and displays it. The logic is simple: if today is past the most recent Sunday, show the next Sunday. If the current Sunday hasn't passed, show it.
We embedded this component wherever the exam date needed to appear — and then never touched it again. The website always shows the correct, upcoming exam date without anyone on the team doing anything.
We embedded this component wherever the exam date needed to appear — and then never touched it again. The website always shows the correct, upcoming exam date without anyone on the team doing anything.
We embedded this component wherever the exam date needed to appear — and then never touched it again. The website always shows the correct, upcoming exam date without anyone on the team doing anything.
Countdown Timer for FOMO
Countdown Timer for FOMO
Countdown Timer for FOMO
We also used code components to create countdown timers — creating a sense of urgency around exam registrations, application deadlines, and limited-seat program launches. These were targeted, temporary, and data-driven in terms of where they were placed. Code overrides made them easy to build and easy to remove once the deadline passed.
We also used code components to create countdown timers — creating a sense of urgency around exam registrations, application deadlines, and limited-seat program launches. These were targeted, temporary, and data-driven in terms of where they were placed. Code overrides made them easy to build and easy to remove once the deadline passed.
We also used code components to create countdown timers — creating a sense of urgency around exam registrations, application deadlines, and limited-seat program launches. These were targeted, temporary, and data-driven in terms of where they were placed. Code overrides made them easy to build and easy to remove once the deadline passed.
Staging and Production — Keeping Reviews Clean
Staging and Production — Keeping Reviews Clean
Staging and Production — Keeping Reviews Clean
One of the practical things Framer enables is having a separate staging environment from your production website. Every significant update we made to the NIAT website went through staging first — shared internally for reviews, approvals, and feedback — before being pushed to the live site.
One of the practical things Framer enables is having a separate staging environment from your production website. Every significant update we made to the NIAT website went through staging first — shared internally for reviews, approvals, and feedback — before being pushed to the live site.
One of the practical things Framer enables is having a separate staging environment from your production website. Every significant update we made to the NIAT website went through staging first — shared internally for reviews, approvals, and feedback — before being pushed to the live site.
This sounds like standard web development practice, and it is. But having it available natively inside a no-code tool made it something that non-technical stakeholders could also use — they could click a staging link, review what was being proposed, and give a thumbs up without needing any technical knowledge about how the deployment worked.
This sounds like standard web development practice, and it is. But having it available natively inside a no-code tool made it something that non-technical stakeholders could also use — they could click a staging link, review what was being proposed, and give a thumbs up without needing any technical knowledge about how the deployment worked.
This sounds like standard web development practice, and it is. But having it available natively inside a no-code tool made it something that non-technical stakeholders could also use — they could click a staging link, review what was being proposed, and give a thumbs up without needing any technical knowledge about how the deployment worked.
We also maintained redirect rules inside Framer — so short, clean marketing links could map to longer, descriptive page URLs. Useful for anything shared in ads, emails, or social posts where a full URL looks unwieldy.
We also maintained redirect rules inside Framer — so short, clean marketing links could map to longer, descriptive page URLs. Useful for anything shared in ads, emails, or social posts where a full URL looks unwieldy.
We also maintained redirect rules inside Framer — so short, clean marketing links could map to longer, descriptive page URLs. Useful for anything shared in ads, emails, or social posts where a full URL looks unwieldy.
Managing a Large Team's Requests Without Losing Your Mind
Managing a Large Team's Requests Without Losing Your Mind
Managing a Large Team's Requests Without Losing Your Mind
The NIAT website wasn't a one-person or two-person project for long. Over time, multiple teams at NxtWave had requests that touched the website. Product updates. Event announcements. New batch launches. University additions. Campaign-specific landing pages.
The NIAT website wasn't a one-person or two-person project for long. Over time, multiple teams at NxtWave had requests that touched the website. Product updates. Event announcements. New batch launches. University additions. Campaign-specific landing pages.
The NIAT website wasn't a one-person or two-person project for long. Over time, multiple teams at NxtWave had requests that touched the website. Product updates. Event announcements. New batch launches. University additions. Campaign-specific landing pages.
Requests ranged from "we need this live in 20 minutes" to "this is a nice-to-have for next month." Managing that queue — prioritizing, executing, reviewing, shipping — while keeping the website stable and performing well was a real operational challenge.
Requests ranged from "we need this live in 20 minutes" to "this is a nice-to-have for next month." Managing that queue — prioritizing, executing, reviewing, shipping — while keeping the website stable and performing well was a real operational challenge.
Requests ranged from "we need this live in 20 minutes" to "this is a nice-to-have for next month." Managing that queue — prioritizing, executing, reviewing, shipping — while keeping the website stable and performing well was a real operational challenge.
A few things kept us sane:
A few things kept us sane:
A few things kept us sane:
The CMS meant that routine additions (new universities, new testimonials, new media coverage) didn't need a design update — they were data operations, not design operations. That freed up significant bandwidth.
The CMS meant that routine additions (new universities, new testimonials, new media coverage) didn't need a design update — they were data operations, not design operations. That freed up significant bandwidth.
The CMS meant that routine additions (new universities, new testimonials, new media coverage) didn't need a design update — they were data operations, not design operations. That freed up significant bandwidth.
The component and variable system meant that when we did need to make a design change, it cascaded everywhere automatically. Updating one card component updated every card using it across the entire website.
The component and variable system meant that when we did need to make a design change, it cascaded everywhere automatically. Updating one card component updated every card using it across the entire website.
The component and variable system meant that when we did need to make a design change, it cascaded everywhere automatically. Updating one card component updated every card using it across the entire website.
Framer's ability to disable pages without deleting them was also useful — pages in progress could live in the project without being visible to the public or indexed by search engines, making iteration safer and less risky.
Framer's ability to disable pages without deleting them was also useful — pages in progress could live in the project without being visible to the public or indexed by search engines, making iteration safer and less risky.
Framer's ability to disable pages without deleting them was also useful — pages in progress could live in the project without being visible to the public or indexed by search engines, making iteration safer and less risky.
The Manifest 2026 Session — A Full Circle Moment
The Manifest 2026 Session — A Full Circle Moment
The Manifest 2026 Session — A Full Circle Moment
Earlier this year, I had the opportunity to deliver a session on everything described in this article at Manifest 2026 — a creative community event organized at Microsoft Hyderabad, with Framer as one of the official partners of the event.
Earlier this year, I had the opportunity to deliver a session on everything described in this article at Manifest 2026 — a creative community event organized at Microsoft Hyderabad, with Framer as one of the official partners of the event.
Earlier this year, I had the opportunity to deliver a session on everything described in this article at Manifest 2026 — a creative community event organized at Microsoft Hyderabad, with Framer as one of the official partners of the event.
Standing in that room and talking about a weekend three years ago — when Abhishek and I were figuring out Framer together for the first time, with zero prior experience — and connecting it to a website that now serves over a million visitors a year... it was one of those moments where you realize how much compounding effort actually looks like.
Standing in that room and talking about a weekend three years ago — when Abhishek and I were figuring out Framer together for the first time, with zero prior experience — and connecting it to a website that now serves over a million visitors a year... it was one of those moments where you realize how much compounding effort actually looks like.
Standing in that room and talking about a weekend three years ago — when Abhishek and I were figuring out Framer together for the first time, with zero prior experience — and connecting it to a website that now serves over a million visitors a year... it was one of those moments where you realize how much compounding effort actually looks like.
The session was wonderful. The discussions were even better. There were questions I hadn't thought to answer before, and conversations that gave me new ways to think about things I'd been doing on autopilot for two years.
The session was wonderful. The discussions were even better. There were questions I hadn't thought to answer before, and conversations that gave me new ways to think about things I'd been doing on autopilot for two years.
The session was wonderful. The discussions were even better. There were questions I hadn't thought to answer before, and conversations that gave me new ways to think about things I'd been doing on autopilot for two years.
Grateful to Ravi Tej for trusting me with the opportunity to represent NxtWave and the NIAT team at this stage.
Grateful to Ravi Tej for trusting me with the opportunity to represent NxtWave and the NIAT team at this stage.
Grateful to Ravi Tej for trusting me with the opportunity to represent NxtWave and the NIAT team at this stage.
What Three Years Actually Teaches You
What Three Years Actually Teaches You
What Three Years Actually Teaches You
I've been working in Framer almost every day for three years now. There's a version of that statement that sounds like a credential, and a version that sounds like a confession — because the truth is, the first year was mostly figuring things out the hard way.
I've been working in Framer almost every day for three years now. There's a version of that statement that sounds like a credential, and a version that sounds like a confession — because the truth is, the first year was mostly figuring things out the hard way.
I've been working in Framer almost every day for three years now. There's a version of that statement that sounds like a credential, and a version that sounds like a confession — because the truth is, the first year was mostly figuring things out the hard way.
What I actually learned wasn't just "how to use Framer." It was how to think about web at speed.
What I actually learned wasn't just "how to use Framer." It was how to think about web at speed.
What I actually learned wasn't just "how to use Framer." It was how to think about web at speed.
Speed is misunderstood in marketing and web work. People think it means moving fast and breaking things. What it actually means — when done right — is building systems that let you move fast without breaking things. Components that scale. CMS structures that don't require a developer touch. Conventions that every team member can follow without training.
Speed is misunderstood in marketing and web work. People think it means moving fast and breaking things. What it actually means — when done right — is building systems that let you move fast without breaking things. Components that scale. CMS structures that don't require a developer touch. Conventions that every team member can follow without training.
Speed is misunderstood in marketing and web work. People think it means moving fast and breaking things. What it actually means — when done right — is building systems that let you move fast without breaking things. Components that scale. CMS structures that don't require a developer touch. Conventions that every team member can follow without training.
The NIAT website at its peak complexity — 25+ university pages, dozens of DM landing pages, multiple ongoing campaigns, a team of designers and stakeholders with constant requests — was manageable not because we worked harder, but because we built the right infrastructure inside Framer early.
The NIAT website at its peak complexity — 25+ university pages, dozens of DM landing pages, multiple ongoing campaigns, a team of designers and stakeholders with constant requests — was manageable not because we worked harder, but because we built the right infrastructure inside Framer early.
The NIAT website at its peak complexity — 25+ university pages, dozens of DM landing pages, multiple ongoing campaigns, a team of designers and stakeholders with constant requests — was manageable not because we worked harder, but because we built the right infrastructure inside Framer early.
None of this would have been possible without the incredible support of the NxtWave Design Team. They were the ones executing, iterating, and improving the website day after day. Every system we built together, every late night debugging a code component, every stakeholder feedback session that shaped the website into what it became — that was a team effort. I got to learn Framer because they gave me the space and the trust to figure it out.
None of this would have been possible without the incredible support of the NxtWave Design Team. They were the ones executing, iterating, and improving the website day after day. Every system we built together, every late night debugging a code component, every stakeholder feedback session that shaped the website into what it became — that was a team effort. I got to learn Framer because they gave me the space and the trust to figure it out.
None of this would have been possible without the incredible support of the NxtWave Design Team. They were the ones executing, iterating, and improving the website day after day. Every system we built together, every late night debugging a code component, every stakeholder feedback session that shaped the website into what it became — that was a team effort. I got to learn Framer because they gave me the space and the trust to figure it out.
Closing Thought
Closing Thought
Closing Thought
One weekend. Two designers who had never used Framer before. One requirement: build a website for NIAT.
One weekend. Two designers who had never used Framer before. One requirement: build a website for NIAT.
One weekend. Two designers who had never used Framer before. One requirement: build a website for NIAT.
Three years later — 1 Million+ unique visitors. 25+ embedded university pages. Recognized by Framer in their global top 1%.
Three years later — 1 Million+ unique visitors. 25+ embedded university pages. Recognized by Framer in their global top 1%.
Three years later — 1 Million+ unique visitors. 25+ embedded university pages. Recognized by Framer in their global top 1%.
A talk at Microsoft Hyderabad at one of India's most prominent design community events.
A talk at Microsoft Hyderabad at one of India's most prominent design community events.
A talk at Microsoft Hyderabad at one of India's most prominent design community events.
The tool didn't do any of that. The discipline, the systems thinking, and the team did. But Framer gave us the speed to try, fail fast, and build well.
The tool didn't do any of that. The discipline, the systems thinking, and the team did. But Framer gave us the speed to try, fail fast, and build well.
The tool didn't do any of that. The discipline, the systems thinking, and the team did. But Framer gave us the speed to try, fail fast, and build well.
Grateful. Humbled. And very much still learning. 🚀
Grateful. Humbled. And very much still learning. 🚀
Grateful. Humbled. And very much still learning. 🚀
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Want to work together?
Feel free to reach out for collaborations, inquiries, or just to say hello.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2026 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2025 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer
All Rights Reserved © 2025 Guruprakash.