Back to all work Web Design & Webflow · SaaS / Healthtech

BoomerangFX

Rebuilding the marketing site for an AI-powered practice growth platform used by 10,000+ clinics worldwide.

BoomerangFX, homepage 01
Client
BoomerangFX
Role
Senior Web Designer & Webflow Developer
Tools
Figma, Webflow, Client-First (Finsweet)
Sector
SaaS / Healthtech
About BoomerangFX
10K+ Practices
5 Countries
#5 Fastest-growing tech company in Canada (Deloitte Fast 500, 2023)

An AI-powered practice growth platform for med spas and cosmetic clinics, ranked among Canada's fastest-growing technology companies.

A single login for an entire aesthetic practice.

BoomerangFX is an AI-powered clinic software and marketing platform for private-pay healthcare: med spas, cosmetic surgery, dermatology and other cash-pay practices. It brings four products, RUN, GROW, ELEVATE and LEARN+, under one platform, used by more than 10,000 practices in 20+ countries.

The site already existed, but the visual style was dated and didn't match where the company is now, including AUVIA™, its new AI clinic co-pilot, which had no real presence yet. The brief: take the internal team's wireframes, raise the visual system to an enterprise SaaS level, and ship a fully responsive production site in Webflow.

My role

Started from the internal team's wireframes and an in-progress Figma file.

Ran co-creation sessions with Marketing and Leadership to refine layout, system and messaging together.

Finalized the Figma file: sharpened hierarchy and the visual system instead of starting over.

Built the production site in Webflow, refining details directly in the browser as the build progressed.

02
BoomerangFX website walkthrough
Co-creation

Refining the design with Marketing and Leadership.

The team already had wireframes and a rough direction. The job was to sharpen that, not override it: walking through each section with Marketing and Leadership, and testing whether one visual system could hold four different products without feeling generic.

Process

  1. 1

    Wireframe audit

    Reviewing what the internal team had already built.

  2. 2

    Co-creation workshops

    Working through layout and messaging with Marketing and Leadership.

  3. 3

    Visual system pass

    Sharpening type, color and hierarchy across every section.

  4. 4

    Final mockups

    Locking the direction before it moved into Webflow.

  5. 5

    Webflow build

    Building the site, refining details directly in the browser.

Three key decisions

01 Messaging hierarchy
Messaging hierarchy

What we did. Worked with Marketing to decide, section by section, which product leads and which supports, instead of giving all four equal weight everywhere.

Why. A page that treats four products as equally important treats none of them as important. Visitors need a clear entry point before they can take in the rest.

02 Enterprise, not clinical
Enterprise, not clinical

What we did. Refined the type scale, color use and imagery so the site reads as a serious enterprise SaaS product, not a generic medical template.

Why. The buyer is a practice owner or executive comparing BoomerangFX to other growth platforms. The site has to look like the category leader it's positioned as.

03 Designing in the browser
Designing in the browser

What we did. Leadership reviewed and signed off on direction in Figma, but a fair number of refinements (spacing, copy, small layout calls) happened directly in Webflow once the build was live.

Why. Some decisions are easier to make in a real, responsive browser than a static frame. Treating Webflow as part of the design process kept the site closer to what leadership wanted.

Previous website 03
Previous website
New website, desktop 04
New website, desktop
New website, mobile 05
New website, mobile
Webflow Architecture

Built inside Webflow, structured to stay easy to maintain.

The build follows Finsweet's Client-First naming system, so anyone on the marketing team can duplicate a section, swap copy and images, and trust it won't break the rest of the page. BoomerangFX's brand system is still evolving, so the site was built on a consistent internal system, ready to absorb a more finished brand later instead of needing a rebuild.

Colors, spacing and type sizes were set up once, at the system level, before a single section was built. A brand update later means changing it in one place, not hunting through dozens of pages.
Structure

A consistent naming system

Every element is named the same predictable way across the site. Open any section and you can tell what it does without guessing.

Theming

Colors and type set once

Brand colors, spacing and type sizes are controlled from a handful of central styles instead of being set inside every section.

Reuse

Reusable components

Repeating patterns (cards, CTAs, stat blocks) are built once as components, so updating one instance updates every instance sitewide.

Figma 06
Figma
Webflow 07
Webflow
Responsive System

Four breakpoints, one connected system.

Text and spacing adjust smoothly as the screen narrows, instead of jumping at fixed widths. Desktop, laptop, tablet and mobile each got their own design pass, since many of BoomerangFX's visitors browse from their phones.

Responsive system 08
Responsive system
Breakpoint, desktop 09
Desktop
Breakpoint, tablet 10
Tablet
Breakpoint, mobile 11
Mobile
Performance & Interactions

Built to feel fast for real visitors.

A hero video, product demos and animated counters can get heavy fast, so every interaction was weighed against its load cost. Real visitors, measured by Google over a 28-day window, get Core Web Vitals passing on both desktop and mobile.

Core Web Vitals passed on both desktop and mobile, based on field data from real visitors.

Scroll reveals and hover states use short, simple transitions, reviewed for necessity rather than added by default.

Stat counters animate once on scroll into view and never re-trigger, so they don't distract on re-scroll.

Core Web Vitals, July 2026 12
Core Web Vitals, July 2026
Impact & Results
Passed Core Web Vitals, real-user field data on desktop and mobile
92 SEO score, Lighthouse audit via PageSpeed Insights (July 2026)
90 Accessibility score, Lighthouse audit via PageSpeed Insights (July 2026)
92 Best Practices score, Lighthouse audit via PageSpeed Insights (July 2026)

Learnings

  • Co-creation beats hand-off: refining wireframes together with Marketing and Leadership meant far fewer revision rounds once the build started.
  • Four products need one hierarchy: the hardest problem wasn't any single page, it was deciding which product leads on each one.
  • A class system is a deliverable too: a maintainable Webflow structure is as much part of the handoff as the visual design.

Next steps

  • Site speed: replace the current videos with the lighter exports the marketing team is producing.
  • SEO & keywords: refine on-page targeting and search positioning post-launch.
  • Animations: layer in more motion detail now that the core structure is stable.

BoomerangFX already had the ingredients: wireframes, a product story worth telling, a marketing team who knew the audience. The work was tightening the visual system enough to carry an enterprise SaaS story across four products, then building it in Webflow in a way the team can keep growing on their own.

BoomerangFX · Webflow build

This case study describes the process in general terms. Internal Figma files, Webflow exports, brand assets and anything under BoomerangFX's NDA aren't shown here, only what's publicly visible on the live site.

More work

Three more projects worth a look.

Let's build something
worth using.

Contact