GSAP Animations
CMS Architecture
Technical SEO
CRM Integration

Immersive interactions meets strict accessibility

Engineering a highly accessible, performance-driven Webflow experience for a 55+ demographic, featuring purposeful GSAP micro-interactions and robust HubSpot integrations.
Client

Pivoters

Nine blue dots arranged in a 3x3 grid on a white rounded square background.
Role
Webflow Developer, Technical SEO + UI/UX Dsigner
Icon with three horizontal rounded bars of different lengths in blue shades on a rounded blue square background.
Deliverables
Accessible Webflow Build, Attribute-Based HubSpot Logic, GSAP Suite
Icon of three stacked orange outlined sheets of paper with text lines.
Status
Live & Optimised
Mobile signal strength icon with four white bars, green dot, and the word LIVE on a blue rounded square background.

The Challenge

Understanding the problem and crafting the solution.

The Problem

The "Accessible vs. Premium" Dilemma

Pivoters needed a digital presence that felt premium and modern, but they faced a critical constraint: their primary target audience is the 55+ demographic. Standard modern web design often relies on aggressive motion and low-contrast minimalism, which would completely alienate this user base. Furthermore, the site needed complex custom HubSpot form integrations to drive their marketing engine, alongside a foundational architecture built for future technical SEO upscaling.

The Solution

A Balanced, High-Performance Ecosystem

I engineered a Webflow site that proves accessibility doesn't mean compromising on aesthetics. By developing a strict, high-contrast design system and utilizing lightweight GSAP for subtle, purposeful interactions, I created an engaging experience that remains fully accessible for older users. Beneath the surface, I built out seamless HubSpot API integrations and laid a scalable HTML structure to support their long-term SEO growth.

The Work

Visual showcase of the final deliverables.

The Process

Developing inclusive digital experiences for diverse user demographics
Step 1

Accessibility-First Architecture

Knowing the 55+ demographic was the absolute priority, the Webflow architecture had to execute the design's accessibility goals flawlessly. I translated the high-contrast UI into a robust, semantic HTML structure, implementing scalable typography using relative units and engineering fully ARIA-compliant navigation. The goal was to bridge the gap between visual design and technical performance, removing all friction so the user felt entirely supported.

Step 2

Purposeful Micro-Interactions (GSAP)

To elevate the brand without compromising accessibility, motion was introduced with extreme restraint. Instead of overwhelming parallax or aggressive scroll animations. I utilised lightweight GSAP and custom SVG stroke tracing for subtle micro-interactions. These minimal animations were made purely to provide elegant visual feedback and gently guide the user's eye, avoiding any risk of distraction or disorientation.

Step 3

Attribute-Based HubSpot Integration Architecture

A highly accessible site still needs to capture leads efficiently. To bypass the rigid constraints and limitations of native Webflow-to-HubSpot integrations, I implemented a custom, attribute-based routing solution. By writing a single global script, the client can now deploy limitless, natively styled Webflow forms anywhere on the site. This completely removes standard embed limitations, keeping the UI perfectly on-brand while ensuring complex data flows flawlessly into Pivoters' CRM.

Step 4

Scalable Component Architecture

To support Pivoters’ aggressive growth plans, the site couldn't rely on rigid, one-off templates. I engineered a highly modular component library, allowing their internal team to rapidly deploy new, brand-consistent landing pages on the fly. By utilizing a strict, utility-driven class naming system, they can infinitely expand their content operations without creating technical debt or requiring constant developer intervention.

The Results

A high performing website with a balance of intentional motion and strict accessibility.
100
Lighthouse a11y core
1
Global HubSpot routing script
0
Cognitive friction points
AA
WCAG 2.2 Standard
Project Type

Accessible Web Build & Marketing Ops

Nine blue dots arranged in a 3x3 grid on a white rounded square background.
Delivery time
2 weeks
Icon with orange vertical bars above the word 'weeks'.
Year
2026
Calendar icon showing the year 2026 with a highlighted day.

Ready to build something great together?

Let's talk about how I can help your business.
Schedule a meeting