Blue Men Plumbing

Problem

Homeowners hate calling a plumber because the price is a mystery until someone's already standing in the kitchen. Most trade sites lean on stock photography and a single 'Contact Us' form, which does nothing to solve that anxiety. Blue Men Plumbing needed a site that could sell trust and price transparency before a single call was made, and a back office simple enough for a two-person crew to actually run.

Process

1 A hero that talks about price2 Pick the problem, see the price3 Tell us about the job4 A live estimate before any contact form5 Contact details come last6 Consent, notes and a preferred date

1 / 6

A hero that talks about price

Most plumbing sites open with a truck photo and a phone number. This one opens with a promise, that the price gets sorted out first, and gives the visitor one big button to act on. The logo sits beside the offer so the brand and the pitch share a single screen, and the phone number stays visible for people who would rather call.

Pick the problem, see the price

The quote opens in a dialog so the visitor never leaves the page. Step one groups services by category, and each row shows its price and time estimate up front. Choosing Kitchen Leak reveals a fixed price of $95 and roughly 60 minutes, which is the answer most people came for.

Tell us about the job

Step two asks only what a plumber needs to price the visit: property type, city and a description of the problem. Property type is a set of large icon buttons instead of a dropdown. Choosing a city shows the travel fee right below it, so there are no surprises later, and the description counter tells people how much more they need to write.

A live estimate before any contact form

Step three adds up the chosen services and the travel fee into an estimated total. Every line item can be removed, and Edit Services takes the visitor back one step. The total sits in a solid color block at the top with a note that the final price depends on inspection, which sets honest expectations.

Contact details come last

Only after seeing the price does the form ask for a name, phone number, email and address. By then the visitor has already decided the price is acceptable, so the form asks for less trust and gets more completed requests. The city is pre-filled from the previous step, and the progress bar is now full.

Consent, notes and a preferred date

The last stretch covers the things a plumber needs before showing up. Optional access notes cover gate codes and pets. A consent checkbox explains in plain language how personal information will be used. A date picker for the preferred visit time is optional, and the submit button stays pinned at the bottom of the dialog.

← BackNext →

On mobile

On a phone the site keeps the same promise with a different layout. The logo and the price offer stack into one column, and a Call Now and Free Quote bar stays pinned to the bottom of the screen for the whole scroll, so both actions are always in thumb reach. Photos and facts drop into two column grids that are easy to skim, and the quote wizard becomes a full height sheet where services collapse into tappable categories with their price ranges shown up front.

UX flow

Four steps from “Get Your Price” to a submitted request, with a phone shortcut for anyone who'd rather just call.

Logo

I designed the Blue Men Plumbing mark myself, and it's the seed the rest of the site grew from: the blues, the roundness, even the tone of the copy all trace back to it. It had to read instantly at favicon size and still hold up as an animated hero.

Color palette

Brand blue reused straight from the logo, warmed up with a cream neutral so a trade site doesn't feel clinical.

Outcome

Shipped and live on Vercel, actively taking real quote requests from GTA homeowners. The two-tier service/pricing model and the quote wizard's data shape now double as the admin dashboard's editing surface, so updating a price on the site updates the quote calculator for free: one source of truth instead of two systems to keep in sync.