← All work

Website

JPW Estimating

A new business needed a site that says what it does and how to get a quote.

Visit the live site ↗

Kind
Website
For
A new estimating business
Built with
Next.js
The JPW Estimating home page: a headline about fast, accurate electrical estimates beside an example estimate summary with material, labour and total lines
The brief

A friend started an electrical estimating business and needed a website for it. His old site was a template full of filler copy and stock photos, and it didn't say what the business actually does or how to ask for a quote.

The people reading it are electrical contractors with a bid due. They want to know in a few seconds whether this is for them, what they'll get back and how fast.

What I built

A five-page site: Home, Services, About, FAQ and Contact. Every page answers one of the questions a contractor has before handing their drawings to someone outside the company.

Booking a call is the only way in, and the button for it is in the header of every page. Below is every page. Where a picture carries a number, it matches a note under it.

Home

The page most people land on, so it carries the whole pitch in short form.

The JPW Estimating home page: a headline about fast, accurate electrical estimates beside an example estimate summary with material, labour and total lines
  1. One action. Book a Call is the only button in the opening section. A contractor can start a conversation without hunting for contact details.
  2. The three facts people check first, right under the button.
  3. This is what you get. An example estimate, drawn in the page. The first version was text on flat colour and looked unfinished, and there are no photos to use, so the design leans on graphics, icons and texture.
  4. Always one click away. The header stays fixed while you scroll, and on a phone the Book a Call button stays visible when the menu folds away.
How it works

Further down the home page.

The JPW Estimating home page's stats bar and How It Works section: three cards for sending drawings, receiving an estimate and winning the bid
  1. Experience, range and turnaround. The experience figure is the owner's hands-on estimating experience, worded that way because the business itself is new.
  2. The process before the call. Three steps, so a contractor knows what happens before committing to anything. Drawings come by email or a shared link, so there is no upload portal.
Services

The page meant to come up in search.

A faint blueprint grid sits behind the dark sections, so they have depth instead of reading as a flat slab.

The top of the JPW Estimating Services page: the heading Electrical Estimating Services over a short introduction
  1. The search phrase as the heading. "Electrical Estimating Services" is close to what a contractor types into a search engine. Every page has its own title and description for search results, and the site has a sitemap.
Project types

Each card says what that kind of job covers, so a contractor can tell whether theirs fits before booking a call about one that won't be taken.

The Project Types section of the Services page: cards for commercial, industrial, office and tenant improvement, and new residential work
What's included
The What's Included section of the Services page: a checklist of what every Excel estimate covers
  1. Turnaround up front, price on request. Three to five business days from receiving the drawings, so a contractor can plan around a bid date. Price depends on the job, so the page says to ask for a quote.
About

The top of the About page is the owner's background. The part below it says what working with him looks like.

The What to Expect section of the About page: four cards on communication, the Excel file, turnaround and revisions
FAQ

There are six questions a contractor asks before hiring an outside estimator: sending drawings, turnaround, accuracy, NDAs, revisions and payment. They can rule themselves in or out without writing first.

The JPW Estimating FAQ page with the first question open, about how to send drawings
  1. Open more than one. Several answers can be open at once, so comparing two doesn't mean closing one.
Booking a call

The Contact page is only this calendar. A contractor picks a day and a time for a 30-minute phone call, with no emailing back and forth to find a slot.

The JPW Estimating Contact page: a booking calendar for a 30-minute phone call, with a month of days on the left and the open times for the chosen day on the right
How it was built

The site started with a quote form beside the booking calendar. It wasn't clear whether a visitor should fill in one or both, and the owner didn't want his personal phone number on the site, so the form and its email backend came out and booking became the only contact path.

The owner picked the blue palette himself.

Every page is built ahead of time, with no database and no admin panel. The content changes maybe twice a year, so editing it means a small code change and a redeploy.

A Lighthouse accessibility run flagged the footer's link contrast and some of the markup screen readers use, and both were fixed.

The owner and his wife loved how it turned out, the booking calendar I built in most of all.

Have something in mind?

A few sentences about the problem is enough to start.

contact@JordanAdair.ca
Open in email