The Gardner's Inc. — A Landscaping Site That Asks for the Job

The Gardner's Inc. has been landscaping in Thurston County, Washington since 1980: design and installation, irrigation and hardscape, and year-round maintenance for homes and commercial properties. It is a company that has spent 45 years producing exactly the kind of evidence a website is good at showing, and its website showed none of it.

The old site was a Wix template. Its hero was a heading saying "Welcome to The Gardner's Inc." over a background image. Its three service sections were paragraphs beside decorative image blocks, with not one photo of a finished yard. Its only button was "Explore Our Services", which scrolled down the page. The single conversion mechanism was a red marquee repeating CALL TODAY AND SCHEDULE A FREE QUOTE. There was no form anywhere. I checked the markup and found zero form elements. A homeowner browsing at nine in the evening, when a lot of that browsing happens, had no way to raise a hand.

That is not a cosmetic problem. A landscaping job is a considered purchase, often in the tens of thousands, and the buyer is comparing two or three companies before calling any of them. A site that looks dated, shows no work, and only accepts phone calls during business hours loses that comparison before the company knows it was in one.

There was no research budget, and a one-week project doesn't leave room for a study. What there was: a live site to take apart, a company that knew its own customers well, and a clear picture of how people choose a contractor for their own yard.

The teardown came first because it is fast and it is factual. I went through the old page as a visitor would and wrote down what a visitor could actually do on it: read three paragraphs, scroll, or call. Then I wrote down what was worth keeping. Three real client testimonials, the phone number, the 1980 founding story, and a service grouping into design, irrigation and hardscape, and maintenance that was already right. The raw material was good. It had no structure and no exit.

The buyer's side is well understood, and it shaped every section. A homeowner hiring a landscaper is trying to answer a short list of questions in order. Is this the kind of result I want? Can I trust these people on my property? Do they do my kind of job? What does working with them look like? And finally, what will it cost? Each of those questions became a section of the page, in that order.

The last input was the photographs. The owners had years of real job-site photos: finished commercial beds, terraced lawns, an irrigation trench mid-install. None of them were on the old site. Those photos became the proof layer of the new one.

I wrote the brief before I drew anything, and I wrote it as a specification rather than a mood board. It covered the brand position, eight sections in a fixed order with the job of each, the calls to action, and the UX requirements: mobile-first, a persistent quote button, a short form, fast images, and real photography over stock wherever possible. The brief is the most valuable artifact in the project because it is what made the speed possible. When the structure is decided in words, generating the first build is a production step, not a design step.

Lo-fi was about order. I sketched the page as a sequence of questions rather than a stack of sections, and marked every place a visitor could leave for the quote form. The obvious alternative was a conventional multi-page site with separate Services, Work, and About pages. I didn't build it. Every page break is a place to drop off, and someone comparing three landscapers will not click five pages deep into each. A single scroll keeps the argument continuous and keeps the form one gesture away. It is also what made a one-week build realistic without cutting anything that mattered.

Mid-fi was about hierarchy, and it stayed grey on purpose so the decisions could be judged without colour or photography doing the persuading. Three calls were locked here. First, the hero gets two doors of different weight: a solid Request a Free Quote for the visitor who is ready, and a ghost View Our Work beside it for the one who isn't. Second, every service card answers the same three questions in the same order (what it is, what's included, who it's for), so a visitor can qualify themselves before they ask. Third, each card carries its own quote button, because the decision happens at the card and the action should be there too.

The quote form got its own wireframe because it is the only part of the site that earns money. The question was how little to ask while still producing a lead worth calling back. The answer was six fields, five required, and two of them are doing real work. Project type and budget are both dropdowns, so there is no typing on a phone. Together they tell the owners, before anyone picks up the phone, whether this is a $3,000 cleanup or a $40,000 terraced yard. The phone number stays beside the form, set large, and is a tap-to-call link on mobile. The form added a channel. It didn't take the old one away.

The visual layer came last and came from the company's own register: a deep forest green, a sage secondary, warm off-whites, and a pairing of Jost for structure with Playfair Display for voice. One word in the hero headline takes the serif italic, so the brand has a tone in six words without a single adjective about quality. The whole palette lives in Tailwind v4 design tokens, so it is applied consistently rather than remembered.

The build ran on the same principle as the brief: my time goes into decisions, and the agent's time goes into mechanism. Figma Make turned the Figma design into a working React and Vite codebase on Thursday evening, and every section was reading from Sanity within two hours. On Friday, paired with Claude Code, I wired the quote form to a Netlify Function that checks the required fields and sends the lead through Resend. I deployed Sanity Studio for the owners, removed the generator's leftover code and unused UI library, and tuned Netlify for long-lived asset caching and non-blocking fonts. Monday and Tuesday were refinement. Wednesday morning was the project gallery, in three small pull requests.

The finished site is one page that argues in the order a homeowner decides. First the result, in a full-bleed hero with the 45-year badge above an outcome headline. Then trust: licensed and insured, award-winning design, satisfaction guaranteed. Then the three services as self-qualifying cards, and six featured projects in the company's own photographs. Then a four-step description of what happens after you ask, then testimonials beside a nine-photo gallery, then the founding story. The quote form comes last, where the argument ends.

There are six doors to that form, and a visitor is never more than one gesture from one. The navigation goes solid on scroll and carries a filled Get a Quote button down the whole page. The hero has one, each service card has one, and the form itself sits at the bottom. On a phone, the menu collapses to a sheet whose largest element is Get a Free Quote, and the company phone number is a single tap.

A quote request is a qualified lead the moment it arrives. It lands in the company inbox with the project type, the budget band, and reply-to set to the customer, so responding is just hitting Reply. There is no CRM to learn and no dashboard to check, which matters for a business whose people are out on job sites all day.

The owners run it without me. Nine Sanity content types cover everything from the hero copy to the gallery, and the CDN cache is off, so an edit in the Studio is on the site at the next page load. Every section also carries fallback copy in the code, so the page still renders if the CMS is ever unreachable.

The return on this project is easiest to see as arithmetic. A week of design and build, against a business whose average job is measured in thousands of dollars and whose larger hardscape work runs well into five figures. A single additional mid-size job pays for the site. The owners report that outreach and conversions are up 200% since launch, and the two biggest changes behind it are things the old site simply didn't have: a way to ask for a quote outside business hours, and photographs that let a stranger believe the quote would be worth asking for. Neither is decoration. Both are interface decisions with a revenue line attached.

The speed came from where the thinking happened, not from skipping it. The brief, the scroll order, and the form's six fields were all decided before a line of code existed. That is what let Figma Make and an agent do the production work without the result drifting. When a build takes days instead of months, the design decisions are no longer spread across the schedule. They are concentrated at the front, and they carry more weight for it.

Two things are next. The 200% figure is the owners' own count of calls and requests, because the new site doesn't yet carry analytics. The next change is event tracking on the quote form and the tap-to-call link, so the next number is measured per channel. The hero and About images are also still stock placeholders. The brief asked for real photography everywhere, and the owners' own job photos already carry the portfolio and gallery. Swapping those last two images is a CMS edit rather than a code change, which is the point of having built it that way.