Teamflect is a growing HR tech B2B SaaS and an official Microsoft partner that originally struggled with a split website architecture: half rigid custom code and half WordPress. This fragmented setup caused slow performance and severe bottlenecks for their marketing team.

(Client)

Teamflect

(Year)

2024-curent

Table of contents

CMS Architecture: Zero-Compromise Migration & Scalability

Anatomy of Integrations: Advanced Lead Routing & A/B Testing

Migrating over 400 articles from WordPress to Webflow presented strict technical challenges. The marketing team relied heavily on WordPress plugins to insert custom elements (galleries, cards, dropdowns) directly into posts, and depended on nested category URLs. Webflow’s native Rich Text does not support embedding such elements out of the box, creating a massive risk of breaking the publication workflow, ruining layouts, and losing SEO traffic.

SEO-Preserving URL Routing: To maintain the critical blog/category/blog-post URL structure, I nested 6 distinct CMS collections under a single "Blog" folder. This bypassed Webflow's blog nesting limitations and allowed for seamless scalability in years 2-3 (which is exactly how new categories like Teamflect Updates, Enterprise, and Knowledge Hub were painlessly added).

Bypassing Rich Text Limitations: I replaced WordPress plugins with a robust component system. I built separate collections for interactive elements (cards, lists, dropdowns), designed them, and linked them to blog posts via multi-reference fields. Using conditional visibility, marketers can now build rich articles like a visual constructor, with zero risk of breaking the global design.

Dynamic Content Routing: I engineered relational logic to make content work for conversions. Customer Success Stories are programmatically mapped to specific feature pages via a bridging Customer-success-related-pages collection (e.g., the OKR Software page displays 3 relevant cases, while the 1-on-1 Meetings page shows its own). Similarly, multi-references power unique FAQ blocks for each product in their extensive template library.

Finsweet Customization: I implemented a dynamic Table of Contents that adapts to the marketing goals of each specific article (flexibly showing or hiding H3 tags). I also integrated automated Reading Time and sharing functionalities.

‍Integrating the marketing stack presented non-standard conversion pathways. The primary CTA buttons routed users directly to the external Calendly widgets of various specialists rather than internal forms. Standard integrations failed to track these handoffs, creating a critical risk of losing lead data for the HubSpot CRM. Additionally, the marketing team required VWO for regional A/B testing, but the default script implementation caused a content flicker effect that disrupted the user experience.

Custom Calendly & HubSpot Synchronization: I integrated Webflow with HubSpot by configuring native pop-up forms and interaction triggers. To solve the external calendar drop-off issue, I wrote custom JavaScript to intercept CTA clicks, capture the lead data, and push it directly into the HubSpot CRM before redirecting the user to the respective specialist's Calendly. This ensured complete lead capture accuracy.

Flicker-Free A/B Testing (VWO): The marketing team frequently tested personalized hero copy for different geographical regions. To eliminate the visual flicker effect (where the original text flashes right before the test variation loads), I implemented a custom anti-flicker script. This enabled the marketing team to run clean, localized experiments without compromising page speed or visual stability.

‍At launch, the site was handed over to the team with benchmark metrics: Performance at 90-98, LCP at 1s, TTFB at 1s, CLS at 0, alongside perfect 100/100 scores across Accessibility, Best Practices, and SEO. To protect this architecture from accidental breakage, I deployed a dedicated, private resource hub for the Teamflect marketing team. This portal contained comprehensive documentation, video guides, and text instructions breaking down the logic behind every component. Once the marketing team was fully autonomous, I transitioned into an ongoing WebOps advisory role.

‍After a period of aggressive content production, the site's footprint expanded significantly. The integration of new features, heavy media assets, and third-party scripts by the content team eventually degraded the Core Web Vitals. The LCP (Largest Contentful Paint) plummeted to a critical 11 seconds. The team flagged the performance drop and provided access to their SEMrush dashboards for an emergency technical audit.

‍Following a deep cleanup and optimization phase, I restored all metrics back to the green zone:

Facade Pattern for Video: Marketers were heavily embedding YouTube videos across product pages and blog posts, which severely bottlenecked load times. I refactored the rendering logic: the DOM now only loads a lightweight thumbnail image on page load, while the heavy video iframe initializes strictly upon user click.

Rendering Prioritization: I implemented fetchpriority attributes for critical above-the-fold elements, forcing the browser to allocate resources to them first.

Style & Script Refactoring: I executed a massive cleanup of accumulated duplicate CSS classes, optimized image weights, and significantly reduced and refactored the bloated custom scripts the team had layered over the core codebase.

‍The marketing team launched a webinar initiative and independently built the base CMS collection. However, they hit immediate UX and maintenance bottlenecks: webinar times displayed statically (ignoring the visitor's local timezone), and managing the schedule required manual intervention to hide past events and update the standalone "Next Upcoming Webinar" component.

Dynamic Timezone Conversion: Utilizing custom JavaScript mapped to Webflow attributes and CMS fields, I engineered a localization script. The site now automatically detects the user's location and dynamically recalculates and displays the webinar start time in their local timezone.

Automated Content Rotation: I implemented an automated sorting architecture using stacked collection filters and conditional visibility. This completely eliminated manual CMS maintenance: concluded webinars automatically drop off the main schedule, while the "Upcoming Webinar" highlight block dynamically populates with the next scheduled event.