Slatewater Exterior Cleaning
An exterior-cleaning site that leads with a written estimate instead of a phone call.
Concept project · Fictional business demonstration Slatewater is a fictional company, built as a portfolio concept with no client and no customer engagement. AI-generated photographs illustrate the concept, not customer work; every photograph on the site is labelled as an illustration rather than a job. No reviews, ratings, years in business, licences, insurance, warranties, response times or pricing promises are invented. The phone number is in the fictional 843-555-01xx range and the estimate form sends nothing.
A 12-route exterior-cleaning concept for a coastal South Carolina service area: an estimate-first conversion path with the phone as the secondary action, services organised by the surface a homeowner is looking at, a method-by-surface table, a second path for HOAs and property managers, and a matching WordPress theme verified in a local runtime.
Fictional concept, with visible disclosure and noindex in HTML, HTTP headers and robots.txt.
- Type
- 12-route exterior-cleaning concept, homeowner and HOA paths
- Stack
- Eleventy 3, self-hosted fonts, classic WordPress parity
- Hosting
- Cloudflare Pages; WordPress validated locally
- Status
- Live concept demo, noindex
Brief
Exterior cleaning is a considered purchase, not an emergency
Nobody calls a pressure washer at midnight. A homeowner notices green streaks on the siding or a driveway that has gone dark, then spends a while deciding whether it is worth paying for and who to trust with it. The design objective was a conversion path built for that pace: a written estimate as the primary action, with the phone kept as the secondary one for people who would rather talk.
The site keeps four homeowner needs in view:
- Start from the surface you are looking at, not from a menu of company services.
- Understand why siding, concrete, pavers and wood are cleaned differently, and why more pressure is not better.
- Get a price in writing before anything is scheduled, without a phone call as the only way in.
- See what the work looks like without being shown invented customer results.
A second, quieter path serves HOA boards and property managers, who buy on a walkthrough and an approved scope rather than a quick quote. All business details are fictional. The case study evaluates the website, not an operating cleaning company.
Method
Reference-led, implemented from scratch
- The references
- One primary and three secondary public exterior-cleaning and local-service websites were analysed as design references. They are not endorsements, and no affiliation is claimed or implied.
- What the primary informed
- Business and conversion logic only: an estimate-first funnel rather than a call-first one, a quote action repeated at each decision point, services organised as a surface hierarchy, an explicit split between residential and HOA or property-manager buyers, and a service-area structure that can grow into town pages later.
- What the secondary informed
- Contemporary presentation at the level of principle: typographic scale and spacing rhythm, how service cards carry a photograph without becoming a uniform grid, and how an estimate journey is broken into steps a visitor can see the end of.
- How it was kept separate
- The analysis was distilled to structural principles in a separate step. Design and code worked from that distillation, not from the reference pages, and no reference is named on the public site.
- What is original
- Name and mark, typography, colour system, every word of copy, the photography direction and all 13 photo masters, the route structure, the components and every line of markup, CSS, JavaScript and PHP.
- What was not taken
- No reference text, photograph, logo, icon, colour value, CSS or markup. Claims seen on the references, such as reviews, star ratings, years in business and licence or insurance badges, were deliberately left out.
Design decisions
The surface first, then the method, then the estimate
Every page follows the order a homeowner actually thinks in: this is the surface I am looking at, this is why it is cleaned that way, and this is how I get a price for it.
Estimate first, phone second
The opening action is Estimate for my home, with HOA or property manager beside it and the phone number kept as a quieter line underneath. That inverts the usual local-service hierarchy, and it was a deliberate, recorded deviation rather than an oversight: exterior cleaning is priced per surface and per property, so a written estimate is the thing a homeowner actually wants. On phones the two actions stack full width with the estimate first, and a call button stays within reach once the hero scrolls away.
Services sorted by the surface, not the service list
Five services are indexed by what a visitor is looking at — siding, concrete, decks and fences, pavers, and general pressure washing — each with its own page carrying the same two actions, the reasons people usually call, and what is and is not included.
A table that explains why the method changes
More pressure is not more clean. A method-by-surface table pairs each surface with the approach used and a plain reason: a hand-held wand stripes concrete where a rotary surface cleaner spreads pressure evenly; high pressure forces water behind siding laps; wood raises its grain. It is the education step that earns the estimate request.
Before and after, only where it is real
Two comparisons ship as drag-to-compare sliders — house siding and a wood deck — and both are registered pairs: the same surface, same camera, same light, with only the surface changed. The patio section deliberately does not do this. No cleaned-paver frame was ever produced that registers with the dirty one, so rather than pairing two different properties and calling it a transformation, the paver image stands alone as a surface-condition example and the slot that would have been its after frame carries its true subject, a concrete driveway mid-clean. The template gained a generic comparison mode for exactly this case, so the honest treatment is reusable rather than a one-off.
A four-step estimate that admits what it is
Property type, surfaces, details, contact. The progress bar shows how short it is, a running summary in the sidebar reflects what has been chosen, and a notice at the top states that the form is a demonstration and sends nothing. Without JavaScript all four steps render and the submit button is disabled rather than silently failing.
A second path for boards and property managers
HOAs and property managers do not buy from a quick quote, so their band asks for a walkthrough instead, and the estimate form preselects their branch when arrived at from that link. Commercial work is folded in here rather than given a separate page it could not fill honestly.
Concrete as the proof surface
The clearest evidence exterior cleaning can offer is a hard edge between cleaned and uncleaned concrete, so that line is the hero image and the concrete page leads with it. Every photograph on the site, here and elsewhere, carries the same caption: illustrative image, not a customer job.
Design system
Petrol slate and a rinse-blue clean line
- Colour
- Petrol slate #1C4B5E for every action and the dark bands, rinse blue #4FB3CE for the clean-line motif and small accents, and a warm limestone surface tone for alternate panels. The palette comes from water and wet stone rather than from a generic trade blue.
- Type
- Schibsted Grotesk at 600 and 700 for headings, set tight and large so a five-word headline carries a viewport; Hanken Grotesk at 400, 600 and 700 for body text and buttons. Both self-hosted under the SIL Open Font License 1.1.
- The motif
- A single rinse-blue rule, the clean line the work itself produces, marks every section eyebrow and splits the wordmark's square. It is the only decorative device on the site.
- Photography direction
- Lowcountry South Carolina: live oaks, marsh light, lap siding and pale concrete, shot late in the afternoon. Operators appear as boots and hands only, never a face, and no equipment carries readable branding.
- Why it does not look like the other trades
- Remove the wordmark and the vertical should still be obvious. Against the roofing, plumbing, HVAC and garage-door concepts in this portfolio, Slatewater differs in palette, typeface pairing, heading scale, section rhythm and photographic subject — not only in hue.
Implementation
One configuration, two platforms
- Routes
- 12 public routes: home, a services index, five service pages, communities and property managers, service areas, about, the estimate page and privacy, plus a custom 404. Town pages are built and proven by a fixture but switched off in the delivered build.
- Photography
- 13 approved photo masters producing 78 responsive derivatives in AVIF, WebP and JPEG. Nothing is upscaled: derivative widths, the sizes hint and CSS rendering are all capped at the native source width. Zero placeholders ship.
- WordPress parity
- The static build compiles into a classic WordPress theme and a content seed. A local PHP runtime renders all 13 routes identically to the static build — text, titles, descriptions, robots, headings, section order, images and JSON-LD — and the home page bands are editable as native template parts. It is verified locally and never deployed.
- Delivery
- One generated stylesheet, self-hosted fonts, a viewport-scoped preload for the element that is actually the largest paint, and no client-side framework. A strict Content-Security-Policy with no inline styles or scripts is served and verified on the live responses.
- Analytics
- The architecture is analytics-ready and the injection path is proven by a test build, but analytics are disabled: a fictional business has nothing to measure. Zero tags ship.
- Indexing
- noindex in the HTML, in the HTTP headers and in robots.txt. Concept demos in this portfolio are deliberately kept out of search so a fictional business cannot appear in local results.
Measured results
Measured on the live concept
One lab run per page and device on 23 Sep 2026, against the live Cloudflare Pages deployment. Not field data or a multi-run median.
| Page / device | Performance | Accessibility | Best Practices | LCP | CLS |
|---|---|---|---|---|---|
| Home, mobile | 98 | 100 | 100 | 2.3 s | 0 |
| Home, desktop | 100 | 100 | 100 | 0.7 s | 0 |
| House Washing, mobile | 99 | 100 | 100 | 2.0 s | 0 |
| Concrete & Driveway, mobile | 97 | 100 | 100 | 2.3 s | 0.018 |
| Estimate, mobile | 100 | 100 | 100 | 1.5 s | 0 |
Measured
- 12 live routes, and 105 of 105 served files byte-identical to the release build.
- Zero axe-core violations across five live pages: home, services, house washing, concrete and estimate.
- Live checks at 390, 768, 1440 and 1920 with no console errors, no failed requests and no horizontal overflow.
- 170 rendered images measured live: none broken, none displayed wider than the file behind it, no placeholders.
- Claim scan on the live HTML: 13 pages against 12 rules, zero hits.
- Concept disclosure present on all 12 routes.
- Custom 404 returning a real HTTP 404, HTTPS redirect, strict CSP and noindex headers, all read from live responses.
- WordPress parity verified locally: 13 of 13 routes render identically to the static build.
Not claimed
- Leads, bookings, sales, income or customer acquisition.
- Conversion lift, or any other business outcome.
- Real homeowner results, testimonials or customer before-and-after jobs.
- Traffic growth or search ranking. The concept is noindex by design, which is why its SEO category score sits in the sixties.
- Field Core Web Vitals or real-user INP.
- A production WordPress hosting deployment.
Credits
Credits and disclosure
- Concept project. Slatewater Exterior Cleaning is a fictional business demonstration; there was no client, no real company and no customer engagement.
- Design, copy, photography direction, build, QA and deployment: Tarkenil Studio.
- Photography is AI-generated illustration of the concept. Every image on the site is captioned as illustrative rather than as customer work, and no image is presented as a real customer job.
- The two before-and-after comparisons are registered pairs of the same surface, shot to show what a method does. The paver section shows no comparison at all, because no honest cleaned-paver frame existed to pair with it.
- Reference-led: one primary and three secondary public websites informed business and conversion logic and presentation principles only. No copy, photograph, icon, colour, logo or markup was taken from them, and no affiliation is claimed or implied.
- No reviews, ratings, years in business, licences, insurance, warranties, response times, job counts or prices are claimed anywhere on the site. The phone number is in the fictional 843-555-01xx range and the estimate form sends nothing.
- Typefaces: Schibsted Grotesk and Hanken Grotesk, both under the SIL Open Font License 1.1, self-hosted.