The business & the brief.
Northstar Exterior Co. is a fictional exterior-cleaning and lawn-care company serving Palm Beach County, Florida. The site is built to turn a 'boring' local service into a lead machine: an instant estimator in the hero, public starting prices, a five-step quote with a live price, and a ZIP checker on every route into the funnel.
Northstar Exterior Co. is a fictional business. This concept was designed and built by Obsidian Webworks to demonstrate what we create for home services businesses. No client results are implied.
Look, feel & voice.
A bright, airy SaaS-style product system — one family (Plus Jakarta Sans), 14–20px radii, soft layered shadows, chips, toggles and progress bars — crossed with real-estate photography of sunny Florida homes. It reads as organised and trustworthy, which is exactly what someone letting a stranger near their roof needs to feel.
Built to bring customers in.
Estimator in the hero
Pick surfaces as icon chips, enter a ZIP that is validated against the service-area list, choose a home size, and get an instant range with bundle savings and a pre-filled quote link.
Five-step quote with a live price
A progress-tracked quote with a sticky summary card that recalculates on every tap, client-side photo previews, preferred days and arrival windows, and a designed 'what happens next' confirmation.
Services mega-dropdown
Every service with its icon and 'from $' price one click from any page, keyboard- and Escape-friendly, plus a persistent green quote button.
App-style mobile tab bar
Services · Quote · Call · Menu sit in thumb reach on phones, with a bottom-sheet menu and a floating live-estimate pill on the quote page.
Switchable before/after slider
Three scenes (house, driveway, roof) with an accessible drag-and-keyboard slider, each paired with the steps, timing and starting price — clearly labelled as simulated.
Route-day service-area map
A hand-drawn SVG county map with tappable towns, city chips and a ZIP lookup that shows crew days and deep-links into a pre-filled quote.
Service pages that list what's not included
Each service block has inclusions, exclusions, timing, an interactive prep checklist with progress, and price-driver meters.
Northstar vs. DIY table
An honest comparison that becomes stacked, labelled cards on mobile and ends in a price-me CTA.
The full experience.
Hover (or tap) to scroll the entire homepage. Every section, top to bottom.
Designed for the phone first.
Most customers will meet this brand on a phone. The mobile layout is designed on its own terms, with thumb-friendly actions and a dedicated menu.
Site sections.
A complete, production-ready structure. Every section is designed, written and responsive.
- Utility bar + mega nav
- Hero with instant estimator
- Services with starting prices
- Before/after slider (3 scenes)
- 3-step process
- Northstar vs. DIY
- Service areas map + ZIP checker
- Sample reviews
- FAQ
- Quote CTA band
- Dense footer
Want a website like this for your business?
Tell us what you do and who you serve. We’ll show you what your website could be.
Start Your ProjectMaison Aura
Skin studio & med spa
Explore Project
