RelayHome — A Home Services Website Built Like a Work Order
Shreyansh Shrivastava
RelayHome
A home-services website designed like a work order.
Type: Free Framer template · Home services
Scope: Product design, UX, visual design, Framer build
Timeline: 1 week, October 2026
Live preview: relayhome.framer.website
Get it free: RelayHome
*RelayHome homepage hero.*
A water heater starts leaking at 7:42 on a Tuesday
The homeowner isn't comparing companies or reading about anyone's values. They're standing in a wet utility room with their phone, trying to answer three questions before they call anyone.
Do you fix this? Can I trust you? What's this going to cost me?
RelayHome is a free Framer template for plumbing, HVAC and electrical businesses, built around that moment.
Most trade websites answer the wrong question
The typical trade site leads with a stock photo of a smiling technician, a list of services and a promise of quality. That explains what the business does. It doesn't touch what the customer is worried about.
The anxiety in this category isn't finding someone. It's everything after the call. When will they show up, who's coming, and will the bill double once they start?
That became the brief: design the site around what happens after the call.
Rather than inventing a completely unfamiliar interface, I looked at an existing system customers could understand: the work order. Job numbers, timestamps, status labels, and sign-offs became the visual language for explaining the service journey.
Turning familiar work-order conventions into a customer-facing interface.
Design the whole site like a work order
Instead of a brochure, every section borrows the language of a job ticket, the way a service company actually tracks its work. Jobs have numbers. Steps have timestamps. Reviews point back to the job they came from.
It gives a small trade business something most competitors don't have: a site that feels like a working operation, not an ad.
One connected journey: services, process, completed jobs, reviews, and the work-order form.
Show the job before selling the service
The hero has a live job card that follows Job #0142 through four stages: booked, tech on the way, price approved, fixed and tested.
Before a visitor reads a line about the company, they've already watched a job go right.
Job #0142 moving through four stages, from booking to completion.
Give the price its own step
"How it works" follows a real Tuesday morning as a timestamped timeline, from the request at 7:42 AM to a walkthrough of the finished job at 11:30.
Price approval is its own step, not a line in the fine print. "Nothing starts until you say yes" is the sentence most homeowners want to read, so it sits in the middle of the process where they can't miss it.
From the first request to the final walkthrough, with price approval made explicit.
Proof tied to real jobs
Past work is presented as closed job files, each with a job number, neighbourhood and trade. It reads as evidence, not a gallery.
Reviews follow the same logic. Every testimonial references the job it came from, so the praise is attached to work a visitor can actually look at.
Completed projects presented as numbered job records.
Social proof connected to the work it describes.
A contact form that thinks like a dispatcher
The quote form is a draft work order. It asks what a dispatcher would ask: which trade, how urgent, and what's happening.
Urgency as a field. The business can triage "today" vs. "this week" before calling back.
A "Don't know what's wrong?" path. Homeowners who can't tell plumbing from electrical describe what they're seeing, hearing or smelling, and the business sends the right tech.
The phone is always one tap away. It sits in the top bar and the nav on every page, because urgent jobs get booked by phone, not by form.
A draft work order that gathers the details needed to understand a service request.
Built to be handed over
Designed and built end to end in Framer. Business-specific details like service area, license number and diagnostic fee are left as clearly marked placeholders, so an owner knows exactly what to swap.
What's included
Homepage: hero job tracker, services, process timeline, past jobs, reviews, work-order form, FAQ
Service pages for plumbing, heating & cooling, and electrical
Individual job pages
Contact page
Fully responsive across desktop, tablet and mobile
Two CMS collections: Services and Projects
Six custom code components:
RelayTrack, RelayButton, RelayMobileBar, RelayFAQ, RelayReviews, and RelayJobTickerScroll effects, reusable UI elements, and page-level SEO metadata groundwork
The demo is set up as a three-trade company, but the structure works just as well for a single trade, or for roofing, pest control or appliance repair.
Business names, phone numbers, service areas, licence details, pricing, project records, testimonials, and legal content are examples. They must be reviewed and replaced before a real business publishes the site. The inquiry form must also be connected to and tested with the owner's chosen destination.
The same service-first hierarchy adapted across smaller screens.
Dedicated CMS detail pages for individual services and completed jobs.
Where it stands
RelayHome is a template, not a client project, so there are no conversion numbers to report yet.
The next step is to release it, see how other designers and service businesses adapt it, and learn which parts of the system create the most value.
It's the first of five free niche templates I'm releasing in October 2026, each built around how one type of local business actually wins customers.
One lesson from this project: a strong visual metaphor only works when it improves understanding. The work-order system gives the experience a distinctive identity, but familiar navigation, clear calls to action, and straightforward forms still do the heavy lifting
Need a site like this for your business?
If you run a home-service business, I can adapt RelayHome to your branding, services, and service area—or design and build a custom website around the way your business works.
Message me on Contra to discuss your project.
Like this project
Posted Oct 10, 2026
Framer template for plumbing, HVAC & electrical businesses, built around homeowners’ biggest questions: when you'll arrive, who's coming, and what it costs.
Likes
0
Views
0
Timeline
Oct 4, 2026 - Oct 11, 2026
