Upace
Industry
Health & Wellness
Company
Upace
Scope
Web
Date
Nov 2024—Feb 2025
Upace helps community recreation centres modernise operations, boost member retention, and streamline facility reservations.
The opportunity
Enterprise fitness platforms are built for commercial gyms. Legacy municipal software is built around rigid databases rather than member experience. This leaves a massive gap for mission-driven community hubs—like YMCAs, JCCs, and Parks & Rec centres—where digital convenience and human connection need to work together. Upace is built specifically for that space, but its web presence needed to evolve from a basic marketing site into a cohesive B2B growth engine.
Leading the web design and Webflow development, I redesigned and built the flagship marketing experience from the ground up. I shaped how facility directors, operations leaders, and community managers discover Upace's five-part product suite, turning complex B2B software capabilities into an approachable, conversion-ready digital journey.
My role
I owned the end-to-end web design strategy, motion direction, and Webflow development for Upace, translating brand positioning into a scalable, high-performance marketing platform.
Architected the site-wide information architecture and navigation system across five core product lines (Admin Portal, Member Mobile App, Upace Connect App, Sub Management, and Web Embeds) and three target verticals (YMCAs, JCCs, and Parks & Rec).
Established a modular visual design system and reusable Webflow component library that enabled rapid page assembly while maintaining strict brand consistency.
Crafted bespoke motion graphics in Jitter and choreographed custom scroll and micro-interaction sequences using GSAP, anchoring the site's visual rhythm around Upace's signature brand clock symbol.
Engineered responsive Webflow layouts and asset optimisation workflows (leveraging next-gen AVIF formats, lightweight SVGs, and hardware-accelerated motion) for fast load times across devices.
Balancing multi-product depth with narrative clarity
Every page on the Upace website had to balance two competing needs. Prospective buyers needed to grasp Upace's overarching value quickly—"building stronger communities, one interaction at a time"—while operations directors needed deep, role-specific validation across five distinct tools, from staff sub-management to automated website schedule embeds.
The challenge was ensuring this product breadth didn't overwhelm first-time visitors. Presenting every feature, technical integration, and audience vertical at once risked creating cognitive overload and burying the core story before decision-makers could book a call.
The approach
Instead of overwhelming the homepage with dense feature matrices, I reframed the site experience around progressive discovery. I designed an intuitive mega-menu navigation that segmented paths by Product Suite (each paired with micro-copy like "Let's do the heavy lifting" and "Smart subs, zero stress") and Who We Serve (YMCAs, JCCs, Parks & Rec), letting visitors self-select the context most relevant to their facility.
On the homepage and product pages, I paired high-level value propositions with layered UI mockups, contextual badges, and scannable feature cards. By grounding abstract operational benefits in tangible product visuals and real leadership testimonials, the final experience made a multi-faceted SaaS platform feel immediately understandable and easy to evaluate.
Bringing the brand clock to life through motion and Webflow
Time and pace sit at the heart of Upace's identity—from real-time facility reservations and instant schedule syncs to its signature clock mark. The challenge was translating that sense of momentum into the web experience while keeping the Webflow build lightweight, maintainable, and easy for the internal team to update.
To achieve this, I designed a motion system in Jitter and GSAP inspired directly by the geometry and radial movement of the Upace clock symbol. Subtle rotational motifs, ticking transitions, and choreographed GSAP scroll reveals guided the user's eye naturally from section to section—reinforcing the brand's promise of saving time without distracting from the content.
Under the hood in Webflow, I paired clean class-naming conventions and scalable layout grids with optimised GSAP timelines and AVIF media delivery. This ensured that rich visual storytelling—such as multi-layered hero compositions, infinite client logo marquees, and high-resolution portal mockups—performed smoothly while guiding prospects naturally toward booking a demo.
Key design & development decisions
Unified five distinct software tools and three industry verticals into a streamlined, dual-axis mega-menu and site architecture.
Anchored the visual and interactive identity in Upace's brand clock symbol, using Jitter and GSAP to create purposeful motion that echoed real-time scheduling and operational flow.
Streamlined the B2B buyer journey by placing contextual demo and consultation touchpoints at key moments of product validation.
Humanised B2B software through warm, community-focused photography layered with clean UI mockups and custom vector accents.
Prioritised front-end performance in Webflow by combining lightweight GSAP animations, responsive srcset imagery, and AVIF compression with a scalable component system.
Outcome
The final website positioned Upace as the definitive engagement platform for community recreation centres, uniting its expanding product suite under a clear, credible, and modern digital identity. Whether a visitor arrived looking for a mobile app for members, sub-management for instructors, or full administrative automation, they could move from initial discovery to booking a call with minimal friction.
Designed and built to balance B2B authority with community warmth, the new Webflow platform transformed a complex software ecosystem into an engaging, motion-rich web experience that strengthened brand trust and accelerated demo bookings.
