Skip to content
Work01 / 03

/work/hb-construcciones

A website that makes asking for a quote as easy as sending a WhatsApp

HB ConstruccionesFull home renovations and swimming poolsLive · 2026hb-construcciones.vercel.app
hb-construcciones.vercel.app
Home page of the HB Construcciones website on desktop, with the headline, the WhatsApp buttons and a customer review

The challenge

HB Construcciones carries out full renovations, pools, kitchens, bathrooms and extensions in the west of Madrid. They had no website: every customer came through personal contacts and referrals. They needed to move beyond word of mouth with a site that builds trust with someone about to spend thousands on their home, and turns that trust into a conversation.

The solution

WhatsApp as the main channel

Renovation customers would rather message than fill in forms, so every button leads to WhatsApp, and the form opens the chat with the message already written.

A sticky bar on mobile

with "Call" and "WhatsApp", always one tap away.

Answers before they ask

FAQs on building permits, timelines, quotes and guarantees: the doubts that stop a customer from getting in touch.

Real proof

A gallery of finished work, videos filmed on site and reviews from their customers.

Built for local search

Content aimed at renovation and pool searches in their area.

HB Construcciones work gallery on desktop: a fitted kitchen, a stone staircase and a brick facade under construction
Work gallery · desktop
The sticky bar on the HB website on mobile, with the Call and WhatsApp buttons always visible
Sticky bar · mobile

Brand identity proposal

I designed a logo proposal with a full kit (colour, reversed, monochrome and icon, all in vector format). The client chose to keep their original logo, so the website uses their current identity.

  • HB Construcciones logo in colour
    Colour
  • HB Construcciones logo reversed
    Reversed
  • HB Construcciones logo in monochrome
    Monochrome
  • HB Construcciones icon
    Icon

Outcome

HB has gone from relying only on word of mouth to having its own website, live since October 2026. It's recent, so this case study will be updated with real results (enquiries received via WhatsApp) as soon as there is data.

For developers

Stack

Next.js (App Router) + React 19 + TypeScript.

Interface

Tailwind CSS 4, Framer Motion for subtle animations, Lucide icons and Geist fonts via next/font.

Media

Custom media pipeline: Node/TypeScript scripts that extract frames from site videos and convert the gallery and videos to WebP with sharp.

Local SEO

Local SEO: LocalBusiness JSON-LD structured data, metadata and lang set up.

Conversion

Conversion: floating WhatsApp button, sticky mobile contact bar and a form that builds the WhatsApp message from the user's input.

Deployment

Vercel with automatic deploys from GitHub · Vercel Analytics · ESLint.

Method

Spec-driven development (spec.md + tasks.md).