Outworks

Problem

Outworks does four different kinds of work (landscaping, hardscaping, excavation and concrete), and a homeowner rarely knows which one they need. Most property-service sites bury that behind a single contact form and a wall of text. Outworks needed a site that explained each service clearly, backed it with real reviews and photos, and made a free estimate one obvious step away on every page and every screen size.

Process

1 A promise and a quote box in the hero2 Four services, each with its own card3 Details in a side drawer4 From bare dirt to finished yard5 Why Outworks6 A quote form that explains itself

1 / 6

A promise and a quote box in the hero

The hero opens with Transforming Yards Into Outdoor Perfection over a dark aerial photo of a real job site. A frosted card sits at the bottom with a location, a service and a Get a Quote button, so a visitor can start a request without leaving the first screen. A row of client initials and a 5.0 rating adds proof in the corner.

Four services, each with its own card

Landscaping, Hardscaping, Excavation and Concrete each get a tall photo card with a short description and a Learn More button. Real crew and machinery photos keep the section honest. The soft shadow and rounded corners echo the brand's friendly, approachable tone.

Details in a side drawer

Learn More opens a drawer from the right instead of taking the visitor to a new page. It holds a large photo, a plain explanation and a checklist of what is offered, such as sod installation and garden bed design. Closing it returns the visitor exactly where they were on the page.

From bare dirt to finished yard

A row of four project cards shows real jobs with a category label and a Before to After tag. Each card carries a one line description of what was built, from a paver patio to a full backyard sod install. The intro promises that every clip ends on the photo taken the day the job wrapped up.

Why Outworks

A short story block explains the company's approach beside a photo of the truck in front of the Halifax Citadel. A caption on the photo says Locally owned, and two pills call out free estimates and the service area. It ties the brand to the place it works in.

A quote form that explains itself

The estimate form opens as a two panel dialog. The green panel says what happens next, with a list of promises and the phone number, while the white panel holds the fields. Required fields are marked, project details and photos are optional, and one button sends the request.

← BackNext →

On mobile

On a phone the hero keeps the full aerial photo and headline, and the estimate form turns into a Call Now and Get Estimate pair pinned to the bottom of the screen, so both actions stay within thumb reach. The navigation collapses into a full screen menu with large tap targets and the same two actions repeated at the bottom. The quote form opens as a bottom sheet with a drag handle and one field per row, and project photos become a sideways swipe carousel with a peek of the next card.

Color palette

A light, airy system on white and sage with a single lime green pulled from the brand: fresh enough for landscaping, restrained enough to still feel like a serious contractor.

Outcome

Live in production for a Halifax property-services company. Four services that used to blur together now each have a card, a drawer and a checklist of their own, so a homeowner can work out what they need without a phone call, and a free estimate sits one tap away on every page, from the hero's quote box to the pinned mobile bar.