WEB DESIGN
WEB DESIGN
WEB development
WEB development
workflow efficiency
workflow efficiency
Migrating HG’s Websites to Framer While Refreshing 22+ Pages To Optimize Workflow ///
Migrating HG’s Websites to Framer While Refreshing 22+ Pages To Optimize Workflow ///
Migrating HG’s Websites to Framer While Refreshing 22+ Pages To Optimize Workflow ///
Healthy Gamer
4-11
days saved per page
4-11
days saved per page
4-11
days saved per page
1/2-1
days saved per edit
1/2-1
days saved per edit
+10%
more full bundle
sales
$24k
saved per year
$24k
saved per year
$24k
saved per year
The Project ///
The Project ///
The Project ///
Healthy Gamer is a mental health startup that provides mental health resources to the internet generation. The Healthy Gamer website serves as the mid-funnel hub for the entire HG ecosystem, capturing users coming from Dr. K's live streams, YouTube content, and social media and converting them into customers or community members. It introduces the brand's mission of mental health support for the internet generation and directs visitors toward HG's flagship products — Coaching, Dr. K's Guide, and Memberships — while also cross-linking to HG Institute and HG Foundation. It establishes Dr. Alok Kanojia (Dr. K) as the credible, central figure behind the brand, builds awareness of HG's broader impact, and provides an entry point to the platform.
The HG Institute website serves as the primary destination for mental health professionals and aspiring coaches seeking accredited education in the intersection of technology and mental health. It directs visitors toward two flagship offerings — the NBHWC-approved Coach Certification program and a catalog of Continuing Education courses for clinicians — while also building brand awareness for HG Institute as a distinct entity within the broader Healthy Gamer ecosystem. The site targets a professional audience (therapists, coaches, healthcare providers, educators, and institutions) rather than general consumers, and functions as both an informational hub and a sign-in portal for enrolled learners.
The HG Foundation website serves as the nonprofit and advocacy arm of the HG ecosystem. Its primary purpose is to build awareness around the systemic failures of the mental health industry — particularly for young people — and to establish it's credibility as a research and policy organization. The site directs visitors toward donating or fundraising in support of the Foundation's mission. It communicates a three-pronged approach of Research, Advocacy, and Grants, positioning the Foundation as the part of HG working at the institutional level (governments, NGOs, and companies) rather than the individual level.
All three original websites were built in Webflow and developed and maintained by a Webflow agency. I worked with the agency to build new pages, address bugs, and make small daily changes where needed.
Healthy Gamer is a mental health startup that provides mental health resources to the internet generation. The Healthy Gamer website serves as the mid-funnel hub for the entire HG ecosystem, capturing users coming from Dr. K's live streams, YouTube content, and social media and converting them into customers or community members. It introduces the brand's mission of mental health support for the internet generation and directs visitors toward HG's flagship products — Coaching, Dr. K's Guide, and Memberships — while also cross-linking to HG Institute and HG Foundation. It establishes Dr. Alok Kanojia (Dr. K) as the credible, central figure behind the brand, builds awareness of HG's broader impact, and provides an entry point to the platform.
The HG Institute website serves as the primary destination for mental health professionals and aspiring coaches seeking accredited education in the intersection of technology and mental health. It directs visitors toward two flagship offerings — the NBHWC-approved Coach Certification program and a catalog of Continuing Education courses for clinicians — while also building brand awareness for HG Institute as a distinct entity within the broader Healthy Gamer ecosystem. The site targets a professional audience (therapists, coaches, healthcare providers, educators, and institutions) rather than general consumers, and functions as both an informational hub and a sign-in portal for enrolled learners.
The HG Foundation website serves as the nonprofit and advocacy arm of the HG ecosystem. Its primary purpose is to build awareness around the systemic failures of the mental health industry — particularly for young people — and to establish it's credibility as a research and policy organization. The site directs visitors toward donating or fundraising in support of the Foundation's mission. It communicates a three-pronged approach of Research, Advocacy, and Grants, positioning the Foundation as the part of HG working at the institutional level (governments, NGOs, and companies) rather than the individual level.
All three original websites were built in Webflow and developed and maintained by a Webflow agency. I worked with the agency to build new pages, address bugs, and make small daily changes where needed.
The Challenge ///
The Challenge ///
The Challenge ///
Working with our Webflow agency could be cumbersome. Small but time-sensitive changes — like updating a promotional banner or swapping out copy ahead of a product launch — required submitting requests, waiting for a developer to pick them up, and going through a round of review before anything could go live. What should have taken minutes could take hours or days.
Developing new pages presented challenges as well. Initial drafts could require 100+ comments during QA to match what was built in Webflow with the designs in Figma. The inherent back-and-forth workflow added significant time to launches and created friction when we wanted to make quick iterations.
The design team also felt creatively constrained. Many of the polished details we wanted to incorporate — page-to-page transitions, scroll-triggered animations, and interactive sections — were either outside the agency's scope or difficult to implement reliably in Webflow. There was always a gap between what we could envision and what could be shipped that limited the high bar of quality we wanted to hit.
Working with our Webflow agency could be cumbersome. Small but time-sensitive changes — like updating a promotional banner or swapping out copy ahead of a product launch — required submitting requests, waiting for a developer to pick them up, and going through a round of review before anything could go live. What should have taken minutes could take hours or days.
Developing new pages presented challenges as well. Initial drafts could require 100+ comments during QA to match what was built in Webflow with the designs in Figma. The inherent back-and-forth workflow added significant time to launches and created friction when we wanted to make quick iterations.
The design team also felt creatively constrained. Many of the polished details we wanted to incorporate — page-to-page transitions, scroll-triggered animations, and interactive sections — were either outside the agency's scope or difficult to implement reliably in Webflow. There was always a gap between what we could envision and what could be shipped that limited the high bar of quality we wanted to hit.
The Solution ///
The Solution ///
The Solution ///
Our solution was to bring the development process completely in-house by transitioning all three websites from Webflow to Framer, one page at a time. Framer's design-native environment meant the same person who designed a page could build and publish it. This eliminated the need to handoff to an external agency entirely and gave the team full ownership over both the quality and the timeline of every release.
Rather than doing a like-for-like migration, we treated each page as an opportunity to improve it. As we rebuilt every page across all three websites, we refreshed outdated layouts, resolved visual inconsistencies that had accumulated over time, and brought every page in line with HG's refreshed branding. Pages that had previously felt disconnected from one another — or that hadn't been touched in months — were updated to feel cohesive as part of a unified design system.
Framer also unlocked the creative capabilities the design team had been wanting to leverage. With direct control over animations, transitions, and interactions, we were no longer limited to what our external agency could feasibly build — we could design and implement the finer details ourselves, closing the gap between what we envisioned and what we could actually ship.
We could also now start conducting split tests by utilizing Humblytics, something our Webflow agency didn't have the capability to do.
Our solution was to bring the development process completely in-house by transitioning all three websites from Webflow to Framer, one page at a time. Framer's design-native environment meant the same person who designed a page could build and publish it. This eliminated the need to handoff to an external agency entirely and gave the team full ownership over both the quality and the timeline of every release.
Rather than doing a like-for-like migration, we treated each page as an opportunity to improve it. As we rebuilt every page across all three websites, we refreshed outdated layouts, resolved visual inconsistencies that had accumulated over time, and brought every page in line with HG's refreshed branding. Pages that had previously felt disconnected from one another — or that hadn't been touched in months — were updated to feel cohesive as part of a unified design system.
Framer also unlocked the creative capabilities the design team had been wanting to leverage. With direct control over animations, transitions, and interactions, we were no longer limited to what our external agency could feasibly build — we could design and implement the finer details ourselves, closing the gap between what we envisioned and what we could actually ship.
We could also now start conducting split tests by utilizing Humblytics, something our Webflow agency didn't have the capability to do.
The Results ///
The Results ///
The Results ///
4-11
days saved per page
4-11
days saved per page
4-11
days saved per page
Average web page development time was reduced from 10-13 days to 4-6 days.
Average web page development time was reduced from 10-13 days to 4-6 days.
1/2-1
days saved per edit
1/2-1
days saved per edit
1/2-1
days saved per edit
Time needed for small changes was reduced from 4 hours-2 days to 15-30 minutes.
Time needed for small changes was reduced from 4 hours-2 days to 15-30 minutes.
$24,960
saved per year
$24,960
saved per year
$24,960
saved per year
The company was also able to save money by switching to Framer’s cheaper hosting plan, and reducing our Webflow agencies retainer.
The company was also able to save money by switching to Framer’s cheaper hosting plan, and reducing our Webflow agencies retainer.
