Designing and building G FORCE Moving’s website end to end, and doubling its booking rate without paid ads

The client we designed for

This profile is a composite of 10 client interviews, with demographics from Google Analytics and our client records.

This client is about to hand strangers everything they own. On the old site, they found little about our services, how booking worked or what happens on moving day, and no photos or videos of real moves. On mobile, the locations slider was hard to work out, and the map showed pins with no information behind them. If their city wasn't on the list, they assumed we didn't serve it and left.

The client we designed for

I set the goals before choosing any tool, because I delegate work to our SEO and marketing people based on those goals and the design decisions behind them. That only works if they can act on their own: edit texts and images, create pages and fix problems without waiting for a developer. Each goal got a measure, and every key action, from quote start to submit, is tracked in GA4 so the team can see progress against it.

For clients, the site had to explain our services, earn trust and lead more visitors to a quote. The CRM had to keep each client's details from the moment they submitted it.

An unlisted city looked like a "no"

In interviews and the survey, clients said they assumed we didn't serve a city if it wasn't on the list. We cover much of Ontario and move across Canada and to the USA, so the site was turning away customers we could serve. This finding shaped the information architecture: every city we serve needed its own page, and the site needed to say that the list was not complete. After launch, the new locations hub became the third most viewed page on the site. Province pages and USA city pages cover long-distance and cross-border moves.

Old location hub

New location hub

Clients saw no evidence of our work

Before booking, clients worried most about two things: whether we were insured if something broke, and how we charge. The old site answered neither and showed no photos or videos of real moves. I designed a trust layer into the page templates: a gallery of photos and videos from our own moves, Google reviews, and plain statements such as "Fully insured & licensed".

For the pricing worry, dedicated pages now explain how our prices are formed, so a client understands the quote before we call. A blog covers the questions around the move: case studies of past moves, tips and advice, and explanations of how the moving process works.

Photo gallery on a city page

Widget: personalized moving advice

Blog hub

The site didn't explain what we do

Visitors found too little about our services and how booking and moving day work. I designed a moving services hub with a dedicated page for each of our 7 services: residential, office, commercial, long-distance, Ontario to USA, storage and packing. Every service page comes from one template, so each one explains its service the same way and can rank for its own searches.

The hub was also an SEO decision. Service pages link to each other, to the hub and to the city pages, so search engines can follow the whole site. In the first quarter after launch, organic search sessions grew 69%, and this structure was one of the changes behind that.

Moving services hub page

Long distance moving page

Rebuild instead of patching

Patching the monolith would have kept the single-developer dependency, the security gaps and the slow pages. I decided to replace it and build the front end and back end from scratch on separate platforms, so a change on one side can't break the other. This time I made security a requirement from the start, and we built it into the new back end.

Webflow, Cloudflare and HubSpot

I compared six options against those goals: Framer, Squarespace, WordPress, Wix, a custom React and Next.js site with an expanded custom CMS and CRM, and Webflow with a separate back end. I chose Webflow for the front end and CMS, Cloudflare for the back end and HubSpot as the CRM. For the moving team's convenience, every quote request is also posted to a Telegram group, so the crew can respond from their phones.

Webflow was the first choice because it gave us control of both the front end and the content, connected to Figma and to AI tools, and offered stronger security than the other options we compared. A custom React and Next.js build would have put the site back in code, where only a developer could change it. Cloudflare won the back end for its easy integration, its support and its price.

Hiring the developer

I still needed a developer to finish the front end, build the back end, connect the CRM and Google Analytics and secure the system. I interviewed 11 developers over 2 weeks. I screened for five things: experience with monolithic codebases, so they could carry parts of the old system across; Webflow proficiency; experience in the same or a similar business; clear communication; and the tools they work with. Above all, I looked for someone bold enough to suggest ideas and collaborate actively with the team, and that quality decided the hire.

What the design system holds

The foundations run on Figma Variables: 3 collections and 58 variables, with theme and device modes for desktop and mobile. Colours come in two layers, a primitive palette and semantic roles for backgrounds, text, buttons, status and strokes, so changing a role updates every page that uses it. Type has separate desktop and mobile scales, and a layout grid covers each breakpoint. The library has 24 components, from buttons and form fields to service, location, review and step cards, navigation, tabs, accordions and alerts, plus 78 icons in 6 categories, from navigation to moving equipment.

Colours

Typography

Component library

Scalable grid system

Icons library

Design tokens

On top of the components, I designed page templates for service pages, city pages, province pages and USA city pages. A new page starts from a template, and the CMS fills in its content.

A system AI tools can read

I wrote Claude skills in VS Code that defined the naming and structure for elements, components and pages. Those rules kept Figma and Webflow consistent, and they gave every AI tool in my workflow the same vocabulary, so generated layouts would reuse existing components and tokens.

I also exported the system as code, with tokens, components and a SKILL.md file, so an AI agent can produce on-brand G FORCE pages and assets. I built it before launch and refined it after.

I gave AI a token structure to follow

AI generated components and tokens fast, but not reliably. It ignored the components and styles already in the system, and token names drifted from my hierarchy. So I built the design system in three levels of tokens and wrote that structure into the skill files and agent instructions every AI tool used.

Primitive tokens hold every raw value. Semantic tokens are aliases of primitives and name a role. Component tokens are aliases of semantic tokens and belong to one component. When a primitive changes, every semantic and component token that points to it changes too, so the site stays consistent, and AI tools always know which level a new token belongs to. I connected the Figma MCP, the Webflow MCP and Claude Code and kept them in sync, so this structure, the naming rules and the project decisions reached every tool. The result was one valid set of design tokens that AI tools and developers can both read clearly.

The quote moved to where clients land

Clients who found us in search landed on a city or service page, while the quote lived on a page of its own. Every quote began with a detour, and every extra step gave a client a reason to leave. Better fields alone couldn't fix that, so I moved the form to the pages where clients already were.

Old quote form

The form had its own page, so clients had to take an extra step to reach it. It asked for a name, phone number, email and a comment, which left out the details we need to price a move.

V1 of the new quote

I added the fields we needed, such as the type of move, the number of rooms and the type of property. The form still had its own page, so clients had to dig through the site to find it, which lowered our chances of getting a quote. It also looked long and unclear, and users felt there were too many fields to finish.

Final quote experience

The form no longer has its own page. It sits on the homepage and on every city landing page. Visitors who find us in search are routed to the landing page for their city, for example Toronto, so the quote is on the first page they see. It takes 2 steps and confirms the submission, all inside the quote widget.

The site on a phone

Every page template has a mobile layout built from the same components. The design system's device modes, mobile type scale and mobile grid carry each page from desktop to phone.

How I delivered it

I built about 70% of the front end in Webflow myself. I wrote detailed handoffs for the developer and documentation covering design, development, implementation, integrations, assets, analytics, SEO and marketing. I onboarded him into the project and supported him at every stage. He finished the front end, built the back end, connected the CRM and Google Analytics and secured the system.

What changed after launch

We launched on June 25, 2026 and ran no paid ads for the next three months. I compared July to September 2026 with the same months of 2025, when we paid for ads every month.

Revenue includes phone calls, Google Maps and referrals as well as website quotes, and we can't separate those channels. What the numbers support is that the new site let the business stop paying for ads without losing revenue.

Goals against results

Fewer quotes, more bookings per quote

The site received about 48% fewer quote requests than in the paid-ads summer of 2025, though the 2025 count may include spam we couldn't filter out. A higher share turned into moves: with the booking rate about doubled, we booked an estimated similar number of jobs from about half the requests.

Compared with April to June 2026, which ran almost entirely on the old site, successful quote submissions grew 92% from July to September, and clicks to call grew 145%. That comparison spans seasons, and summer is our busiest time. Of the people who start the new quote form, 74% submit it.

Search and engagement

Organic search sessions grew 69% from Q2 to Q3 2026, ahead of the 40% target. Bounce rate fell from 70% to 62%, and user engagement events grew 95%; Q2 ran almost entirely on the old site. Visits from AI assistants grew about 15 times, and they had the highest key-event rate of any channel, from a small base. Google indexed every page on our indexing list.

Three months is a short window, and market conditions and our Google Maps ranking may also have played a part.