Jardine Studio
SERVICE / WEB DEVELOPMENT / CALCULATORS + CONFIGURATORS

Calculators and configurators that move buyers without a sales call.

Three working demos live on the parent /services/web-development page: a custom-website cost calculator, a climbing-tier configurator, and a service-fit eligibility checker. Each one is the engagement shape the studio scopes for clients. The buyer arrives, runs the math, gets a real answer on the site, and hits the inquiry form already qualified.

A FEW BUSINESSES THE STUDIO HAS WORKED WITH
Palisades Lodge of Big Pine logo
The Black Salt Room logo
BLIZZARDFIRE PROTECTION
Bodie Foundation logo
Night Rose Deathcare logo
WHERE IT BREAKS

The team is doing the calculator work by email.

Most calculator engagements start the same way. A buyer asks how much does this cost or does my situation qualify or which option fits. The team answers by hand, every time, for every buyer.

  • The pricing page reads contact us for a quote.

    Every buyer's first move is asking for a number. The team replies with the number. Hours per week of repeat work.

  • Eligibility questions get asked before every consultation.

    The same five questions in every intake call. Then again on the form. Then again in the follow-up email.

  • Comparison tools live in a PDF the team emails out.

    A two-page PDF the team built in 2023. Updated never. Buyers ask which option fits and the team explains by phone.

  • The site has a calculator the team uses internally but customers cannot see.

    The Google Sheet exists. The logic exists. The customer-facing version does not exist.

  • The team has a book a call CTA where a calculator should be.

    Every call starts with the same first 10 minutes. The calculator would have shipped that information before the call started.

WHAT IT COSTS

Manual calculator work is paying somebody. Usually the team.

Every team running a calculator by hand is paying with team time, lost inquiries from buyers who never asked, and a conversion path that breaks at the moment the buyer needed an answer.

  • Hours per week answering the same calculator questions by email.

    The marketing lead, the operations lead, or the founder, depending on the team.

  • Buyers who never asked because they expected a number on the site.

    Self-disqualification before the first email. The buyer who would have engaged never identifies themselves.

  • A conversion path that breaks at the how much question.

    The team's site does the credibility work. The calculator should do the qualification work.

  • A sales process that scales with team headcount instead of with traffic.

    Every new buyer is another call. Growth requires more team. The calculator would have absorbed the volume.

HOW WE DO IT

Five moves that ship a calculator the buyer actually uses.

The studio builds calculators that work the way the team currently does the math by hand, not what an off-the-shelf calculator widget assumes.

  • Logic written out before any UI.

    The math the team does in their head, on the call, in the spreadsheet. Documented as inputs, rules, and outputs before any code.

  • Inputs designed for the buyer, not for the team.

    What the buyer knows, what they do not know, and what defaults the calculator can fill in.

  • Outputs that move the buyer to the next step.

    A number alone is not enough. The output is the number plus a recommended next step (book a call, see the matching service, request a quote).

  • Animated and accessible.

    Calculator UX patterns the studio's parent page already demonstrates. Steppers, range inputs, real-time updates. Accessible by keyboard, screen reader, and reduced-motion.

  • CRM handoff on calculation.

    Optionally tagged email or CRM record at the moment the buyer hits the recommended next step.

Doing the calculator work by email?

Start with the math the team is doing by hand. One call gets it on the page.

WHAT YOU GET

Outcomes every calculator engagement ships with.

Specific deliverables that hold across pricing calculators, ROI calculators, configurators, and eligibility checks.

  • A buyer-facing calculator that does the work the team was doing by email.

    Hours back per week. A qualified buyer arrives knowing their number.

  • Animated, accessible, performant.

    The studio's parent page demonstrates three live calculator builds. The same standard applies.

  • Integrated with the CRM where the team already follows up.

    Optional CRM handoff so the qualified buyer lands in the team's existing pipeline, not in a new system.

THE ENGAGEMENT

How the work moves.

  1. Phase 1: Logic scoping

    Document inputs, rules, and outputs. Edge cases documented. The math the team does by hand becomes the calculator spec.

  2. Phase 2: UX and accessibility

    Stepper, range input, output display. Keyboard navigation, screen reader testing, reduced-motion testing.

  3. Phase 3: Build

    Custom React component on Next.js, or platform-native equivalent on Webflow or Squarespace. Performance-budgeted.

  4. Phase 4: CRM integration (optional)

    Tagged email or CRM record on calculation completion.

  5. Phase 5: Launch and tuning

    Monitor calculator completion rate, drop-off, and downstream conversion. Adjust based on real usage.

PROOF

Real work in this shape.

Named tools the studio integrates with

Next.jsReactHubSpotAirtablePipedriveResend
QUESTIONS

Things worth knowing.

What kinds of calculators does the studio build?
Pricing calculators (the one on /journal/custom-website-cost is a live example). ROI calculators that show payback time. Product configurators that build a recommendation from buyer inputs. Eligibility checks that route buyers to the right service. Comparison tools that compare two or three options side by side. Multi-step wizards that walk a buyer through a complex decision.
Does the calculator need to live on a Next.js site?
No. The studio builds calculators on Next.js (most common), Webflow (using Webflow's logic plus custom code embeds), Squarespace (using Squarespace Code Block), and WordPress with a custom theme. The platform recommendation comes in the scope call.
How does the calculator integrate with the CRM?
Optional handoff at the moment the buyer hits the recommended next step CTA. The calculator output (numbers, selected options, contact information if the buyer provided it) lands in HubSpot, Airtable, Pipedrive, or the team's CRM as a tagged record.
What happens if my pricing changes?
The calculator is built to be edited. The pricing inputs, the rule logic, and the output thresholds are all editable by the team without code. On Next.js, the inputs sit in a config file the team can update. On Webflow or Squarespace, the logic sits in a documented code block.
Can the calculator be embedded inside a journal article or a service page?
Yes. The studio's own /journal/custom-website-cost article embeds a working calculator inline. The same pattern applies to client builds. The calculator can be a standalone page or an inline component inside a longer article or service page.
How much does a calculator cost?
Scope drives the price. A focused pricing calculator with three inputs and one output and a multi-step configurator with conditional logic, CRM handoff, and platform-native integration are different engagement shapes. The first call sizes the scope before the studio quotes.
ALSO HERE

A calculator that does the math, so the team does not.

Show the math the team is running by hand today. The first call shapes the calculator and the inputs.