Motion-Rich HubSpot Site
For a Nonprofit Foundation.

When static pages cannot convey the scale of environmental work — we built motion into the foundation.

Role

UX Designer + HubSpot Developer

Stack

HubL, Lottie, SVG, GSAP

Timeline

8 Weeks

Outcome

2x Donation Page Conversion

01 // The UX Brief

Credibility
Through Motion.

Foundation websites often feel static and disconnected from the urgency of their work. The UX brief was clear: tell the impact story through numbers that animate, maps that draw themselves, and progress indicators that scroll into view. The site needed to feel alive without slowing to a crawl.

UX wireframe of the impact section with count-up statistics and a restoration map that draws itself on scroll

02 // The Animation Architecture

Lottie +
SVG Harmony.

Impact illustrations were designed as Lottie JSON files — lightweight vector animations delivered via the dotLottie player. Scroll-driven SVG path animations were authored in Illustrator and triggered via IntersectionObserver. All animations respect prefers-reduced-motion.

→ Lottie player integrated into HubL custom module
→ SVG stroke animations on scroll
→ CSS custom properties for brand-consistent motion timing
→ Fallback static images for no-JS environments

Lottie animation JSON excerpt beside rendered frames of a tree growing in the dotLottie player

03 // The UX Outcome

Felt.
Not Just Read.

The animated impact section became the highest-engagement part of the site. Scroll depth increased 40% on the home page and donation page conversions doubled within the first quarter post-launch.