Book a call

The five pillars

01Attract02Engage03Nurture04Convert05Scale

The loop

All services How it works Our work About us Your first 90 days Blog Book a call

Noah Garden Rooms 3D configurator with instant prices

Garden roomsStarted September 2026

The Noah Garden Rooms 3D configurator on desktop, with a garden room model and the six steps

A six-step 3D configurator that prices a garden room on screen and sends every lead with a seven-page PDF quote.

Client
Noah Garden Rooms
Sector
Garden rooms
Timeline
Started September 2026
Pillars

Pillars: Engage and Convert

Services
Website
Configurator preview (opens in a new tab)

Results

  • 6 stepsFrom choosing a range to an instant price
  • 7 pagesPDF quote with scale drawings, created for every lead
  • 1 tapTo stand the design in a buyer’s garden at full size with AR

The brief.

Noah Garden Rooms manufactures made-to-measure garden rooms, pods and outbuildings in its Shropshire workshop, and installs them within 150 miles of its Telford base. We have worked with Noah since November 2025, first on HubSpot sales automation, Google Ads and Meta ads, then on a complete rebuild of the Noah website.

A garden room is a considered purchase. Before most buyers pick up the phone, they want to see what their building will look like and what it will cost. Noah’s previous design tool was complex and captured contact details late, so in the first phase of our work we moved paid traffic to a low-friction brochure download instead.

The next step was to bring design-your-own back, rebuilt as a lead-generation tool. Using Three.js, we built a six-step 3D product configurator into the new Noah website. Visitors pick a range, set the size in one-foot steps, clad each wall, place doors and windows directly on the model, and add decking, canopies and interior finishes, with every choice updating the 3D model and the price waiting at the end.

The price sits behind five contact details. Once they are entered, the buyer sees their price on screen straight away and receives a seven-page PDF quote with scale elevations, a floor plan and a line-by-line price. The same PDF and specification are logged in HubSpot, so Noah’s sales team call every lead with the exact building in front of them.

The result is a configurator built for the sales conversation as much as the design. Buyers can look inside their building, check where the sun falls, measure it and stand it in their own garden with AR, and every price request arrives as a qualified lead with a quote already attached. The configurator is now in final testing with Noah’s team.

A Noah garden room modelled in 3D in the configurator

What we set out to do

  • Bring design-your-own back to Noah Garden Rooms as a lead-generation tool, replacing a complex design tool with a 3D configurator that makes pricing and building the easiest route to an enquiry.
  • Model all four priced ranges, from uninsulated garden buildings to SIP-built Signature Garden Rooms, with every roof, size, cladding, door, window and extra set up from Noah’s features and range matrix.
  • Show buyers an accurate 3D model they can walk around, look inside, view from above and see at full size in their own garden.
  • Capture the lead at the point of highest intent, with five contact details revealing the price and the full specification passing straight to the sales team.
  • Hand Noah’s sales team a ready-made quote for every lead: an automatic PDF with scale drawings and a line-by-line price, logged against the contact in HubSpot.
  • Build it mobile-first in Noah’s new brand, as part of the new Noah Garden Rooms website.
The price reveal form and the QR code that opens the design in augmented reality

What changed

  • Delivered a six-step 3D garden room configurator, covering four ranges, pent, pitched and L-shaped roofs, and sizes from 8ft to 30ft wide in one-foot steps.
  • Made every choice visible on the model as it is made. Cladding can be set wall by wall, doors and windows are placed by tapping a wall and dragged to a new spot, and a “Looks good, price it” shortcut appears on every step once a range is chosen.
  • Five contact details now reveal the price on screen straight away and produce a seven-page PDF quote with outside and inside views, scale elevations, a floor plan, a specification and a price page where every line adds up to the total.
  • Connected the configurator to HubSpot, so each lead arrives with its PDF and full specification, and any design can be reopened from its NOAH quote reference.
  • Added the features that help buyers decide: AR that stands the design in their garden at full size, a sun and shadow study for a clear June day, a tape measure, and share links that carry every choice.
  • Turned Noah’s demo feedback into live changes within a day, including whole-foot sizing, vertical cladding boards and outside doors set level with the full-height windows.
The Noah Garden Rooms configurator on desktop and mobile

How we
did it.

6 steps, from the first conversation to the results.

  1. Range and pricing discovery

    We started with Noah’s product range before touching the 3D model. Working with Noah’s team, we built a features and range matrix setting out which roofs, claddings, doors, windows and extras each range can take and where the rules change.

    Signature Garden Rooms, for example, are built from SIP panels as standard, while granny annexes are quoted per project and sit outside the configurator. That matrix, combined with Noah’s pricing, became the logic behind every choice and price on screen.

  2. Conversion-first UX design

    The configurator follows the order a buyer thinks in: range, shape and size, structure and cladding, doors and windows, finishing touches, then price. Each step explains itself in a sentence, shows the cost of every upgrade and keeps “Looks good, price it” within reach.

    Extras that need a conversation, such as heating, a shower room or help with planning permission, sit in an “Ask us about” list. Ticking one adds it to the design for the sales call, so the price on screen stays accurate.

  3. 3D engine development

    We built the 3D engine in Three.js, generating the building from the design itself. Sizes change in one-foot steps by typing, tapping or dragging the arrows on the model, and doors and windows can be dragged along a wall or onto another one.

    Buyers can switch between outside, inside and roof-off plan views, mirror the layout, measure between any two points and preview the sunlight at any time of a June day. A lighter 3D mode is available for less powerful devices, and the whole design is stored in the page link.

  4. Instant pricing and PDF quotes

    At step six, five details reveal the price on screen, including VAT, delivery and installation within 150 miles of Telford. The configurator then builds a seven-page PDF from eleven fixed views of the design: four corners, two inside views, a roof-off view and four flat elevations.

    The PDF opens with the price, a valid-until date and a QR code back to the design. Its elevations and floor plan are drawn to a real scale from the same geometry as the 3D model, so sizes, door positions and labels always match.

  5. HubSpot, AR and sharing

    Every price request is logged in HubSpot with its PDF and specification, giving Noah’s sales team the full picture before they call. Any design can also be reopened from its NOAH quote reference.

    Buyers can scan a QR code to open their design on a phone and stand it in the garden at full size with AR. They can also share a link that carries every choice without the price, or email the link to themselves and come back to it later.

  6. Demo, feedback and refinement

    Configurator updates are shipped through GitHub pull requests, with a Netlify deploy preview and an automated Claude code review on each one before it reaches the staging site.

    After demoing the configurator to Noah’s team, we turned their feedback into live changes within a day: whole-foot sizing in metric mode, feet as the default unit, vertical cladding boards, decking boards running left to right and outside doors set level with the full-height windows.

See the configurator.

A 60-second walkthrough of the Noah Garden Rooms configurator, from picking a range to an instant, itemised price, and the qualified lead it hands to Noah’s sales team.

  • Design in 3D: drag the building to size, clad it wall by wall, and place doors and windows by hand.
  • See it before you buy: sun and shadow, full-size AR in the garden, and a room planner for granny annexes.
  • Five contact details reveal the price, with the PDF and an edit link sent by email.
  • Every lead arrives priced and specified, with the customer’s wish list and 11 drawings.

Press play to watch. Sound is optional.

See the configurator for yourself.

Try the configurator (opens in a new tab)

More case studies.

See all 28 projects

Want results
like these?

Your 30 minute strategy call.

Talk through your campaigns, website and sales process. We will point you to the projects closest to your business and the first step that would make the biggest difference.

  1. Share where you are.What you spend, what it produces and where enquiries stall.
  2. See the closest examples.The projects most like yours and what made them work.
  3. Choose your first move.A practical priority for your next 90 days.
Choose a time

Choose an available time and leave your details. Your invitation arrives by email. No preparation needed beyond a short outline of your business.

Choose an available time in the calendar. Your invitation arrives by email.

Calendar provided by HubSpot. Manage booking tools in Cookie settings.

Open scheduler in a new tab
Book a call