Northline Property & Build
A complete marketing site for a property & building company, five service disciplines, a project case-study system and a consultation funnel in one editorial package.
Visit real-estate-portfolio-nine-woad.vercel.app
Recorded on the production build: scroll reveals, live project filters, the before/after slider and the consultation form, with zooms on the interactions.
The problem
Construction and property businesses sell on trust but market on generic one-pagers: services flattened into bullet lists, no proof of finished work, and a contact form that loses the details a first quote actually needs.
What we built
A 19-page site architected like the business itself, five disciplines as dedicated service pages, a filterable portfolio where every project opens into a full case study, a drag-to-compare before/after section, and a consultation form that captures scope properly.
The result
A production site on Vercel: home, a services hub with 9 service pages, a projects index with 5 full case studies, about and founder pages, and a structured contact flow, data-driven content and editorial typography throughout.
The product journey
Land on the promise
A full-bleed hero with the featured project card immediately shows finished work, proof before persuasion.
Scan the disciplines
Five service areas, property, build, interiors, outdoor, systems, each expanding into its own dedicated page.
Filter the portfolio
Tag filters narrow the project grid live by discipline: building, interiors, gardening, lighting, outdoor.
Drag the proof
A before/after compare slider reveals each transformation. The preparation story told visually.
Read the case study
Every project opens into a full narrative page, scope, location, stage and the services involved.
Request a consultation
A structured form captures name, service required and project type, so the first reply has context.
Best features
Before/after that proves the work
A pointer-drag compare slider over real photography, visitors physically reveal the difference between 'cleared' and 'considered'.
A portfolio that filters itself
Project cards filter live across five disciplines; every card opens into a proper case-study page, not a lightbox.
Services as a real architecture
Five disciplines become nine dedicated pages. Each with its own scope, sub-services and photography, not a bullet list.
A form that scopes the job
Service required, project type, location and description. The enquiry arrives with enough structure to quote against.
Editorial by design
Cormorant Garamond display type over a quiet ivory palette, with scroll-driven reveals pacing the read.
Content as data
Projects, testimonials, company copy and site details live in typed data modules, a real company swaps its facts in one place.
How we handled the hard parts
- Reveals that keep up with the reader
- Every section animates in on intersection, tuned so content is never late, never popping after the eye arrives.
- A slider that sells the before
- The compare control is draggable across the whole photograph with a proper accessible label, 'Reveal the finished result', not just a decorative widget.
- Structure that mirrors the sale
- The sitemap matches how property clients actually decide: services → proof → process → trust → enquiry.
- Accessibility baked in
- Skip-to-content link, visible focus states and labelled controls ship with the design, not as an afterthought.
Stack
Frequently asked questions
Is this a template or a bespoke build?
A bespoke design system: custom tokens, editorial type pairing and hand-tuned reveals. The content layer is data-driven so a real firm's facts, photos and testimonials slot into typed data files.
Can the sample projects be swapped for real work?
Yes, projects, testimonials and company copy live in dedicated data modules; replacing them doesn't touch a line of layout code.
What interactions does the site have?
A drag-to-compare before/after slider, live project filters, a structured consultation form, scroll-driven reveals and a responsive navigation menu.
Who is this kind of site for?
Property, construction, renovation and trade businesses where finished work is the sales pitch. The case-study format turns photography into proof.
Can Usmani Labs build this for our company?
Yes, marketing sites with real case-study systems and conversion funnels are our bread and butter. Tell us about the business and we'll scope it.
Keep exploring
- Web Development : Marketing sites, web applications and portals: fast, accessible and built to rank.
- UI/UX Design : Product design and interfaces users understand instantly.
- SEO : Technical SEO, content and audits that turn search into a channel.
- Keynou case study : Free online file-conversion and document tool suite.
- Workflow automation for construction companies : the same fixed-price, built-around-your-workflow approach for construction companies.
- Workflow automation for property management companies : the same fixed-price, built-around-your-workflow approach for property management.
- Software we build, by industry
Built by Usmani Labs
We turn manual business workflows into software that runs them: fixed price, shipped in weeks.