Building a High-Converting Scope Calculator for Your Website
Give visitors a price range for their project before they fill in a form. A scope calculator shows what it costs, what it takes, and what is included.
A contact form asks a customer to commit before they know whether they can afford you. Most of them are not ready to commit, so they close the tab and keep looking. A scope calculator answers the budget question first: here is what this kind of project costs, here is how long it takes, here is exactly what is included. It runs in the browser, it shows a range instead of a false precise number, and it is honest about being an estimate rather than a quote.
The form that asks before it answers
Here is the form most small business websites end with. It has a name field, a company field, an email field, a dropdown for the size of the company and a text box for the project.
To fill it in, a customer has to write to you before they know what you charge. If the answer is going to be three times their budget, they have to spend twenty minutes of their life discovering that, and they get nothing for it.
So they leave. They go back to the search results, they open the next site, and they contact the business that answered the question first.
The alternative is not a better form. It is answering the question before asking it.
What a scope calculator actually does
A scope calculator is a short interactive tool on your website that lets a visitor describe the work in a few choices and immediately see what it will cost, how long it will take and what it includes.
┌──────────────────────────────────────────────────────────────────────────────┐
│ THE THREE THINGS A VISITOR CAN LEARN WITHOUT TALKING TO ANYONE │
├──────────────────────────────────────────────────────────────────────────────┤
│ 1. The price A range, not a single invented number │
│ 2. The time Weeks, tied to the choices they made │
│ 3. The contents What is included and what is not │
├──────────────────────────────────────────────────────────────────────────────┤
│ Only then: a way to make contact, for people who already know the answer │
└──────────────────────────────────────────────────────────────────────────────┘The order is the whole design. Show the price first and the contact route becomes a natural next step for the people who want it. Put the contact route first and every visitor has to pay a small price just to find out whether you are worth talking to.
What to put in it
The choices should be the ones that actually change the price, and nothing else. A good estimator for a small studio has five questions, and the answers are the ones a customer already knows.
Here is the set Aura Logic uses on its own site, with our own published prices behind each option. These are our commercial figures, not research findings, and they are the ones we actually charge:
| Choice | Options | What it changes |
|---|---|---|
| What do you need | Website, online store, business automation, custom tool | The base price: $1,200–$1,900, $1,800–$2,900, $900–$1,600 or $2,400–$3,900 |
| How many pages | 1–3, 4–7, 8–14, 15+ | $0 to $1,800 added, and up to 2.5 weeks added |
| How much interaction | Clean layout, extra interactive detail, immersive effects | $0, $250–$400 or $600–$950 |
| What extra help | Contact form, enquiry assistant, help finding information | $0, $400–$650 or $850–$1,350 |
| Which schedule | Standard, or priority at +25% | Price multiplied by 1.25, time multiplied by 0.7 |
Five questions, and the visitor ends up with a price range and a number of weeks. Notice what is not in the list: nothing about the size of the customer’s company, nothing about their industry, nothing that exists only to qualify them. Those questions belong in the conversation afterwards, and only if the conversation is going ahead.
The engineering is the easy part
The calculation itself is trivial. All the difficulty is in keeping the numbers honest and the page fast.
Run it in the browser. The estimator is a small script that reads the choices, adds up the numbers and redraws a price range. No request to a server, no loading state, no spinner between a click and a number. Drag a control and the total moves with it.
// Every price in one place, next to the rest of the pricing.
const BASE = { min: 1200, max: 1900, weeks: [2, 3.5] };
const PAGES = {
'1-3': { min: 0, max: 0, weeks: 0 },
'4-7': { min: 350, max: 550, weeks: 1 },
'8-14': { min: 700, max: 1050, weeks: 1.5 },
};
export function estimate(pages: keyof typeof PAGES, priority: boolean) {
const low = BASE.min + PAGES[pages].min;
const high = BASE.max + PAGES[pages].max;
return {
low: Math.round(low * (priority ? 1.25 : 1)),
high: Math.round(high * (priority ? 1.25 : 1)),
weeks: (BASE.weeks[1] + PAGES[pages].weeks) * (priority ? 0.7 : 1),
};
}Keep the prices in one file. If the numbers live inside a page, they drift out of date the first time you change a price, and an estimator that quotes a price you no longer charge is worse than no estimator at all. One file, imported by the page, is the whole requirement.
Make the page work without it. The calculator is an addition to a normal page, not a replacement for one. The services, the prices and the contact details have to be readable in plain HTML, because some visitors will block the script, some will arrive on a connection that cannot afford it, and search engines read the text rather than the interaction.
Show a range, and label it. A single number is a false promise. Take our own example: “$1,550” sounds like a price. “$1,550 to $2,450 depending on scope” is a range, and a range is what you can actually honour.
How to know whether it is working
This is where most articles of this kind give you a table of conversion rates. We are not going to, because we do not have a client result to put in it, and a made-up percentage is worth nothing to you.
The measurement is simpler than that, and you already own the instrument.
- Count enquiries before and after. Your inbox is the record. The week before the estimator goes live and the four weeks after are the comparison, and you know what your enquiry volume normally looks like.
- Read the first line of each enquiry. If the first question used to be “how much does this cost?” and now it is about the work itself, something has changed. That is a real signal and it is free.
- Watch how many people finish. Open the analytics, look at the page with the calculator on it, and look at the page after it. If lots of people use the calculator and then do not get in touch, the number is scaring them off. If lots of people get in touch without touching the calculator, it is not doing its job.
- Ask the people who do enquire. “How did you arrive at the price range?” is a legitimate question in the first reply, and the answers tell you whether it is being used.
That is a small business owner’s version of conversion measurement: four questions, answered with things you can already see.
The rules that keep it honest
It is an estimate, and it says so. A range based on five choices is a starting point for a conversation, not a contract. Say that in words on the page.
The numbers must match what you charge. An estimator is a promise about your prices. If it is wrong, it is not a small error: it is the first thing the customer checks, and they will not check it against your website, they will check it against your invoice.
It is not a lead form in disguise. If the customer has to enter a name and an email before the price appears, you have rebuilt the form you were trying to get rid of, with extra steps.
Say what is not included. The list of exclusions is what saves you from the argument later. Hosting, domain, licences, copywriting, photography, extra languages: put them next to the number, not in the small print.
Do not over-engineer it. A calculator that needs a backend, a database and a login to work is a project. The version described here is a single script and a table of numbers, and it will still be right in three years.
What to ask whoever builds it
- Can I change a price myself, in one place, without touching the page?
- What happens if I turn JavaScript off? Can I still read the prices?
- Will it show a range, and will the page say it is an estimate?
- Are the numbers in it the numbers I actually charge?
- What does it do on a slow phone connection?
Want to see one working? Try the estimator on this site, or read how to help buyers plan with a price estimator.
Frequently Addressed Technical Inquiries
Why do customers dislike a 'Request a quote' form? [+]
Because the form asks for something before it gives anything. To fill it in, a customer has to write their name and email, describe a project in their own words, and send all of that to a stranger, without knowing what the work will cost or whether it is even in their range. The ones who are not ready to pay for that risk simply do not fill it in, and you never hear from them. A price range at the top of the page answers the question that stops them, and the contact form then arrives from people who already know you are in their ballpark.
Does publishing a price range scare away customers? [+]
It filters, and filtering is the point. Customers who were never going to afford your work leave earlier and more cheaply, which is better for you and better for them. What it changes is who you hear from: people who know the number is real and want to talk about it. The number you publish still has to be a range, has to include what you would actually charge, and has to say what is not included, or it will cost you more trust than it earns.
How do you build an estimator that stays fast? [+]
Run the calculation in the browser rather than on a server. The whole thing is a small script that reads the choices, adds up the numbers and redraws a price range, so moving a control updates the total instantly with no network request and no loading state. The page around it stays ordinary static HTML, so it is fast to load and still readable if the script never runs. The prices live in one file, so a price change is a one-line edit rather than a hunt through a page.
Sources
- [1] Website Design and Development | Aura Logic Verifies the base price this article's table quotes for the website option, the published range of $1,200 to $1,900, and the wider range of $1,550 to $2,450 for a four to seven page build.
- [2] Online Store Development | Aura Logic Verifies the base price this article's table quotes for the online store option, the published range of $1,800 to $2,900.
- [3] Workflow Automation | Aura Logic Verifies the base price this article's table quotes for the business automation option, the published range of $900 to $1,600.
- [4] Custom Software | Aura Logic Verifies the base price this article's table quotes for the custom tool option, the published range of $2,400 to $3,900.
- [5] Project Scope Estimator | Aura Logic Verifies the estimator this article describes: the live tool that applies the page, interaction, extra help and schedule adjustments, and the priority multiplier of 1.25 on price and 0.7 on the schedule.
Related articles
Helping Buyers Plan with a Price Estimator
Self-qualifying website funnels, and how an interactive scope calculator lets buyers see fit and budget before they book.
Keeping Website Content Consistent
How typed schemas and content collections stop editors injecting fonts, colours and oversized images, so a small business site keeps looking the way you designed it.
The 5-Second Filter: How Buyers Scan Your Website
How a buyer decides in five seconds whether to keep reading: load speed, clear type hierarchy and the signals that build trust fast.
WANT IT REVIEWED FOR YOUR BUSINESS?
The above is general. Tell me about your business and I will review business websites for your case: what applies, what does not, and in what order.
Business websites ↗TELL US ABOUT
YOUR BUSINESS.
Tell us what your business does, what you need and your approximate budget. We will review the scope and next steps with you.
READY TO IMPROVE YOUR WEBSITE?
Describe what you want your website to do for your business. Jorge will help you define the scope, understand the cost and choose the next step.