founo.Free website reviewStart a project
A replay of the Treetop Gardens landing page. Long grass at night under their headline. The view rises over an overgrown plot with each problem labelled, which is cut back, loaded onto a trailer and taken away. At sunrise the ground is levelled and turfed, a patio and decking are laid and a fence goes up. At dusk the garden’s lights come on, and the page shows a real garden before and after.

Case studyTreetop Gardens

A landscaper’s website, quotes and jobs. Built as one system.

Treetop Gardens clears, builds and looks after gardens across South Tyneside, and takes the waste away under its own licence. We designed and built its website, the enquiry form, customer accounts and the staff workspace that turns an enquiry into a booked job.

Client
Treetop Gardens
Where
South Tyneside
What we built
Website, enquiry form, quotes and jobs, customer accounts

LaunchThe landing page

We built the landing page around one garden.

Scrolling builds it, one of their services at a time, from an overgrown plot at night to a finished garden at dusk. This is the page itself, replayed.

  1. It opens on long grass at nightUnder their own headline, with the quote button and the phone number on the first screen.
  2. Then the plot, every problem markedA rotten fence, brambles, an old stump, bagged rubbish and uneven ground, each labelled where it is.
  3. It is cut back and carted awayCleared, then loaded up and taken off under their waste licence.
  4. The sun comes up on the buildLevelled, turfed, paved, decked and fenced, each part named as it goes in.
  5. It ends at dusk, on a real gardenThe lights come on, then a before and after from one of their own jobs.

The page goes on to the kinds of place they work on, the towns they cover, how a quote works, reviews and common questions. A quote is a tap away from every part of it.

LaunchEvery other page

We gave every service, problem and town a page.

Thirteen services, eight common problems and the six towns they cover each have a page, drawn from the same garden plan and map. A quote is a tap away on all of them.

  • The services page: the thirteen services grouped into five trades, beside a plan of a garden
    Services
  • The fencing page, with a drawn plan of a garden’s boundary and a button to get a quote
    A service
  • The solutions page, which starts from the problem: commercial sites, landlords, homeowners, new builds and emergencies
    Problems
  • The areas page: a map of South Tyneside with its six towns marked
    Areas
  • The page for Jarrow, with its postcode districts and a map, and a button to get a quote there
    A town
  • The about page: over ten years of sorting gardens out, beside a before and after of a real job
    About

A town’s page carries the town into the enquiry form, so nobody is asked for it twice.

LaunchThe enquiry

We built the quote request around a plan of a garden.

Visitors tap the parts of the garden that need work and answer a few short questions. A job sheet fills in beside them, so the team has what it needs to price the job.

  1. The jobTap the garden, or pick from the list.
  2. The propertyTheir own home, a let or a business.
  3. The size of itRough answers are fine.
  4. Where and whenThe nearest town, and how soon.
  5. PhotosOptional, and made smaller on the phone before they are sent.
  6. Your detailsWhere to send the quote.
The Treetop Gardens enquiry form being filled in. The lawn and an overgrown patch are tapped on a plan of a garden, then a home, an average garden, a one-off job, Jarrow and the next few weeks are chosen. Beside the questions a job sheet fills in with each answer. It stops at the question asking where to send the quote. Recorded on a copy of the site. Nothing was sent.

BuildThe staff workspace

We built what happens after they press send.

One job, followed through the workspace the team runs on: a school’s turf repairs, from the enquiry to a booked day.

  1. EnquiryIt lands in the inbox with everything they said. They get an email straight away saying it has.
  2. QuoteWritten from the services they asked for, and laid out beside it as the customer will see it.
  3. AcceptedThey accept it online. The job is made there and then, and the team gets an email to say so.
  4. BookedA day, a time and a crew, in UK time, and a confirmation email sent from the job.
  5. On the scheduleIt takes its place in the week. Once it is done, a thank-you is one button away.
The staff inbox with the school’s enquiry open: turfing and a garden tidy, their message, their phone number and email, and the quote written for itThe quote builder: two priced lines, sports turf repairs and a boundary trim, and beside them the quote as the customer will see it, £530.40 with VATThe quote marked accepted, with its history: written, accepted online, and a job made from itThe job page: booked for Thursday 15 October, 11:30 to 13:00, with its progress, the work from the quote, and the customer’s detailsThe week’s schedule, with the school’s visit on Thursday and the other jobs on the days around it
Shown with made-up customers and prices, not Treetop’s own.
The school’s own account: the quote, marked accepted, and what happens nextThe school’s account overview: the visit coming up on Thursday 15 October and how far along it is
The customer’s side

BuildThe staff workspace

We gave the team one screen for the day.

What is on today, what needs doing next and how the week is filling up. Anything late is in rust, and worded as what to do about it.

The staff Today screen: new enquiries, quotes to send, quotes waiting for an answer and jobs to book, then today’s jobs in time order, what needs doing with the late ones in rust, and the week ahead
Shown with made-up customers and prices.
The Today screen on a phone, with five tabs along the foot of the screen
On a phone
Needs doing
Replies, quotes to send, days to book and bookings to confirm, the most pressing first.
Find anything
Ctrl K, or ⌘K on a Mac, finds a customer, a quote or a job by name, phone, street or number.
On a phone
The same workspace, with five tabs along the foot of the screen.
Search open over the Today screen: typing school finds the school’s enquiry, its quote, its job and its account
Search opens over any screen. Typing school finds the school’s enquiry, quote, job and account.

In the staff workspace

  • Today
  • Inbox
  • Quotes
  • Jobs
  • Schedule
  • Messages
  • Team
  • Search

AutomateThe emails

We wrote an email for every step.

Five go to the customer and two to the team. Some go out on their own; the rest are sent from the quote or the job they belong to.

  • The enquiry received email: thanks for getting in touch, a summary of what they asked for, and what happens next
    Enquiry receivedTo the customer. Straight after they send an enquiry.
  • The quote email: each line of the quote with its price, VAT and the total, and a button to accept it online
    QuoteTo the customer. When a quote is sent.
  • The quote accepted email: what was accepted, the total, and the next steps
    Quote acceptedTo the customer. As soon as they accept.
  • The booking confirmation email: the date, the time, the address and the work, and what to expect on the day
    Booking confirmationTo the customer. Sent from the job, once it has a date.
  • The thank-you email: the work done and the date, and a button to leave a review
    Thank youTo the customer. Sent from the job, once it is done.

And two to the team

  • The new enquiry alert to the team: the customer’s details, the services they want and their message
    New enquiry alertThe moment an enquiry arrives.
  • The quote accepted alert to the team: who accepted which quote, for how much, and a button to open it
    Quote accepted alertWhen a customer accepts online.

Booking confirmations and thank-yous that are due wait in a list of their own, so none is forgotten.

The Messages screen in the staff workspace: two booking confirmations and a thank-you waiting to be sent, each with a Send button
Messages, in the staff workspace: what is due to be sent, what went and what failed, and every email with a preview.

Shown with the made-up details the team’s own preview uses.

BuildCustomer accounts

We gave customers an account.

Their quotes, the next visit and how far along it is, and every enquiry they have sent, in one place.

  • A customer’s overview: the visit coming up and its progress, their quotes and their jobs
    Overview
  • A customer’s quote, marked accepted, with what happens next
    A quote
  • A customer’s job: booked for Thursday 15 October, with its progress and its history in plain words
    A job
Quotes
Accept or decline online. Once a quote has passed its date, they are asked to ring instead.
Jobs
From the day it is booked to the day it is done, in plain words.
Details
Their name, email and password, changed in place.

Shown with a made-up customer.

What this shows, and what it doesn’t.

The brief
Thirteen services across five trades, for homes, landlords and businesses. An enquiry had to say enough to price the job, and an accepted quote had to become a booked job without anything being typed twice.
What we built
The landing page and every page of the site, the enquiry form, customer accounts, the staff workspace and the emails at each step.
Where it stands
Live at treetopgardens.co.uk: the site, the enquiry form, customer accounts and the staff workspace.
Not claimed
No figures for enquiries, jobs or revenue. Those are Treetop’s own, and the screens here show made-up customers and prices instead.

Now picture yours.

Every project starts with what the business does. Tell us where yours gets stuck and we’ll say where we would start.

Start a projectSee pricing