Selected work

The Fence Guys Local service website

Every page leads toa better estimate request.Every pageleads to abetter estimaterequest.

Collins Creative designed and built the website for The Fence Guys in Bakersfield: service pages organized around what is wrong with the fence, and a five-step estimate flow that gathers the project details before anyone picks up the phone.

The Fence Guys homepage we designed: a call and text bar, the main navigation, and a headline for fence installation and repair with Start my project and call buttons
ClientThe Fence Guys (founder-owned)
LocationBakersfield, California
ProjectWebsite + estimate flow · live at fenceguysbakersfield.com
Our roleUX/UI design, page structure, front-end development

The website, interactive

Start an estimate.
Step through to review.

Browse the service pages, then open the project estimate on desktop or on a phone and step through all five parts to the review screen. This is a copy of the live site.

Sending, verification, calls, texts and email are switched off in this copy, along with analytics, so nothing ever reaches the business.

The estimate flow we built

Five short steps
instead of one long form.

A fence estimate depends on the job: new or replacement, the material, the length and height, the ground, and what is in the way. We broke the request into five steps that ask one kind of question at a time, with picture cards where a homeowner might not know the word for it.

Captured from a local copy of the finished site, October 21, 2026

  1. ProjectNew fence, replacement, repair, gate, pool, or not sure
  2. FenceMaterial, rough length, height, and gates
  3. PropertyGround, access, obstacles, neighbors, and HOA rules
  4. PhotosPictures of the fence line, if they have them
  5. ReviewEverything checked before it is sent
Step one of the estimate flow: a five-step progress bar, the question What can we help you with, picture cards with Replace Existing Fence selected, and a Your project so far panel
Step one. Picture cards for each kind of job, a progress bar that names all five steps, and a running summary that fills in as the homeowner answers.

What is switched off The interactive copy above is frozen from the finished build. Its estimate flow works through the review step, then shows that sending is switched off. Nothing reaches fenceguysbakersfield.com.

The challenge

Homeowners start with a problem, not a service name.

People looking for a fence company usually know what is wrong: a section is leaning, the old fence is done, or the yard needs one for the first time. A long list of services makes them translate that into trade terms first.

So the homepage asks the question for them and points each answer to its own page, with the estimate one tap away from every one.

InstallationRepairReplacementFree estimate
The homepage section Installation, repair, or replacement, with three cards that each describe one situation and link to its service page
Choose the starting point. Three cards describe three situations in plain words and link to the page that explains each one.

The page system

One template.
A page for every service.

Each fence type and service runs on the same page structure: a breadcrumb, a plain headline, build choices, a short sequence of the work, questions, and links to related services and Bakersfield areas. Start your project and the phone number sit in the first screen of every page.

Service page

Same structure, every service.

The Wood Fence Installation page: breadcrumb, headline, a short description, and Start your project and phone buttons
The wood fence page, one of the service pages built on the shared template.
On a phone

Menu and call, side by side.

The homepage on a phone with Get estimate in the header, Menu and Call buttons below it, and Start my project in the hero
The mobile menu open, listing the main pages and then each fence service
On a phone the header keeps Get estimate, Menu, and Call in view. The menu lists the main pages first, then every service.

The estimate on a phone

Easy to answer
from the yard.

Most people will fill this out standing next to the fence. On a phone the steps collapse to numbered markers, answers become full-width buttons, and Back and Continue stay pinned to the bottom of the screen.

Answers are saved on the device as a draft, so a homeowner can stop to measure and come back.

Step two on a phone: Tell us about the size and features, with full-width answer buttons and Back and Continue pinned to the bottom
Step two on a phone, with the pinned Back and Continue bar.

Project documentation

Projects that explain
the service.

We set up project cards that label each job by service and say what the homeowner should look at: alignment, hinge hardware, or a section used to judge repair against replacement. They link to full project pages instead of sitting in a loose photo grid.

The homepage section See the details behind the service: four project cards, each tagged as installation or repair, with a short note on what the project shows and a View documented projects button
Project cards. Each card carries a service tag and one sentence on what to check, so the projects support the service pages.

What we made

A website organized
around the estimate.

  1. Homepage and navigation

    A homepage that sorts visitors by installation, repair, or replacement, with call, text, and estimate actions in the header on every screen size.

  2. Service page template

    One structure for each fence type and service, with build choices, the order of the work, questions, and related pages.

  3. Project estimate flow

    Five steps with picture cards, a running summary, a saved draft, an optional photo step, and a review before sending.

  4. Projects and service areas

    Documented project pages, a gallery, and Bakersfield area pages that link back to the services.

Ask what the estimate needs.
Nothing more.
Brendan Collins

Project lead

Brendan Collins

Brendan led the UX/UI design and front-end build of the site, from the homepage and service template to the estimate flow.

The judgment that mattered was the order of the questions: start with the problem the homeowner can describe, and leave measurements optional so nobody quits the form to find a tape measure.

Meet the studio

Your next chapter

Are your estimate requests missing the details?

If every new lead starts with a phone call to ask the same questions, we can build the questions into the website.

Start a project
The Fence Guys estimate flow asking about fence length, height, and gates