The plan does the selling.
The working drawing usually stays backstage until you’ve signed. Foursquare leads with it. I built the positioning, brand, content, and code around one move: letting homeowners inspect scope, cost, sequence, and disruption before their home becomes the jobsite.
- Role
- Strategy, brand, content, UX/UI, custom imagery, site search, and frontend. Solo, end to end.
- The decision
- Planning became a paid product, credited toward construction.
01 · The problem
The finished room was only half the evidence.
Contractor sites lead with polished afters and craftsmanship claims. But a homeowner isn’t only buying a room: they’re buying scope, cost, timing, permits, and weeks of living inside a jobsite. None of that shows up in a glamour shot.
The brief I set myself: show the work being resolved, not just finished.
02 · The decision
A renovation should be resolved before your home becomes the jobsite.
That one line reorganized the project. Once the working drawing joined the public story instead of staying backstage, the brand, the copy, the interactions, and the business offer all had the same job: make the plan inspectable.
One room.
Four explicit stages.
The same view advances from protected jobsite to coordinated model and finished room. It plays automatically; hover, focus, or select any stage to inspect it.
03 · The build
The strategy held all the way through the code.
I treated “make the plan inspectable” as a product requirement. It shaped what the business sells, how the site is organized, and how every interaction helps a homeowner reach a specific decision.
The offer
Planning became a product, not a prelude.
Three paid planning tiers are priced, scheduled, and credited toward construction. Each one makes its deliverables and cost drivers visible before a build contract.
The architecture
Content follows homeowner decisions.
Cost, schedule, permits, scope, and occupied-home logistics live in distinct, linkable sections. That gives readers a clear path and gives search useful structure to index.
The search
Search ranks meaning, not just matching words.
On first use, the browser builds an index from 6 core pages and 110 sections. Queries are normalized, corrected for close misspellings, expanded through renovation synonyms, and weighted across headings, summaries, topics, and body copy. Results open at the exact section.
The interface
The plan became interactive.
Aligned before-and-after views, stage sequencers, and scope tables turn abstract construction language into comparisons a homeowner can inspect and control.
The frontend
Lightweight on purpose.
This page ships without a frontend framework: local CSS and browser-native JavaScript. Semantic HTML keeps the content crawler-visible without a framework payload. Keyboard behavior and reduced-motion fallbacks are built into the interactions.
04 · In the interface
Every control makes the decision inspectable.
Sliders, stage tabs, scope tables, and search all serve one comparison: what existed, what’s proposed, and what must be resolved.
Before / after
One viewpoint, one slider. Existing and resolved stay aligned, connecting the plan directly to the finished room.
Stage sequencer
Four stages play in order. Hover, focus, or select any stage to pause and inspect it.
Scope tables
Costs, permits, review, and inspections are mapped before construction. They do not surface as late surprises.
Homeowner search
Everyday phrases such as “living at home” expand into occupied-home topics, then rank the most relevant sections on dust, shutdowns, cleanup, and access.
From the concept site
How the search understands a homeowner question
The query living at home is interpreted as occupied-home planning, expanded to related renovation topics, ranked against headings, summaries, topics, and body copy, then linked to the exact matching section.
Homeowner query
-
1 Interpret
Occupied-home planning
Normalizes the phrase, corrects close misspellings, and recognizes the decision behind the words.
-
2 Expand
Related renovation topics
- Dust containment
- Utility shutdowns
- Cleanup
- Access
-
3 Rank + open
#1 Heading + topic match
The occupied-home plan is part of the scope.
Weighted across headings, summaries, topics, and body copy, then opened at the exact section.
05 · The honest part
Spec build. Real system.
Foursquare is a fictional contractor: no invented testimonials, no fake inquiry form. The system around it is production-grade, with a WCAG 2.2 AA baseline, semantic structure, local fonts, no framework payload, and a section-level search index.
What a real launch adds
- Real licensing, insurance, and contact details
- A live inquiry form wired to the owner’s CRM
- Final photography replacing generated placeholders
- The owner’s sign-off on pricing and schedule language