IDENTIDAD DIGITAL DE BAMPE360 DESDE CERO

Una empresa que no existía en internet

BAMPE360 llevaba meses operando y facturando. Todo el trabajo llegaba por un único canal: la red profesional del fundador, administradores de fincas que ya lo conocían, el boca a boca de una obra a la siguiente.

Es un modelo que funciona y tiene un techo evidente. No escala, no se puede acelerar, y depende por completo de que una sola persona mantenga los mismos contactos. La pregunta que trajo el cliente fue "necesitamos una web". La pregunta real era cómo convertir un negocio basado en relaciones en uno que también capte por sí mismo.

Eso cambia el encargo. No había nada que rediseñar, ninguna analítica que auditar, ningún histórico de conversión del que aprender. Tampoco había restricciones heredadas, que es la parte buena. Lo que había: una hoja en blanco y la posibilidad de equivocarse gravemente. Así que lo primero no fue diseñar. Fue averiguar dónde estábamos.

• 0 páginas, 0 URLs indexadas, 0 posicionamiento declarado
• Un catálogo de servicios que vivía en la cabeza del fundador
• Una red de administradores de fincas que traían trabajo por teléfono

Qué hay ahí fuera: un mercado estructural, ocho compradores, seis rivales

La primera fase produjo un informe estratégico del que cuelga todo lo demás. No es un anexo: es la razón por la que el sitio tiene las páginas que tiene y no otras.

El mercado es estructural, no cíclico. Barcelona tiene 793.062 viviendas y los 35 municipios del área metropolitana suman 607.756 más. 424.147 viviendas son anteriores a 1981, y el 86% de los edificios tiene una calificación energética E o peor. La demanda no depende del ciclo inmobiliario: el envejecimiento del parque, la ineficiencia energética, la vivienda de segunda mano y los programas públicos de rehabilitación la sostienen por sí solos. Eso permite construir a largo plazo en vez de perseguir la campaña del mes.

Documenté ocho buyer personas y las ordené por dificultad de coordinación y capacidad de cierre. La regla que salió de ahí condicionó cada línea de texto del sitio: una compra no se dispara cuando el cliente quiere reformar. Se dispara cuando aparece un detonante que combina urgencia, complejidad y riesgo percibido. Una web que habla de la empresa no se dirige a nadie. Una que dice "acabamos de comprar un piso" o "la comunidad tiene que actuar" se dirige a alguien que ya está buscando.

Analicé los seis competidores con más solapamiento y presencia online. Ninguno ocupaba claramente un rol: el punto único de contacto en proyectos donde el cliente no puede ni quiere coordinar por separado a técnicos, gremios, permisos y subvenciones. Ese es el hueco, y es defendible por una razón operativa, no de marketing: BAMPE360 trabaja con su propio equipo, sin subcontratas. La promesa se puede cumplir.

• Personas principales: comprador tras la adquisición, presidente de comunidad de vecinos, familia adaptando su vivienda, cliente de eficiencia energética. Cada uno con su objeción a desactivar: sobrecostes, conflicto vecinal, vivir la obra, retorno de la inversión
• Cinco detonantes: tras la compra, deterioro visible, cambio vital, obligación técnica o legal, oportunidad económica
• Renuncia deliberada: no competir en amplitud ni en precio. Renunciamos a "reformas baratas barcelona" (140 búsquedas reales al mes) porque atrae al cliente que compara tres presupuestos por WhatsApp y no cierra ninguno. En un negocio sin modelo low-cost, ese tráfico erosiona el valor percibido y quema horas comerciales

Técnico y ordenado, no "reformas felices"

El sector tiene dos estéticas dominantes. El catálogo de cocinas: fotos de stock, degradados, sonrisas y un formulario de "presupuesto gratis" encima de todo. Y la constructora: un PDF corporativo convertido en web, azul marino y gris, cero personalidad. Ninguna de las dos funciona aquí. El posicionamiento es "una empresa técnica que ordena decisiones complejas", así que el sitio tiene que verse ordenado antes de que nadie lea una palabra.

Azul marino profundo como color de autoridad, dorado cálido como único acento, blanco roto como superficie de lectura. El dorado es lo que separa esto del contratista genérico: una nota de oficio y trabajo bien acabado sin lujo falso. Syne para los titulares, Poppins para el texto. Syne tiene un carácter geométrico que se reconoce en dos segundos; Poppins sostiene párrafos largos y no discute con ella. Dos familias, no tres.

El sitio alterna secciones claras y oscuras de forma estricta: la primera sección después del hero siempre es clara, y luego alterna hasta el footer. Es una regla mecánica, y por eso funciona: estructura páginas de 2.000 palabras sin decidir nada caso por caso. Cuando las ediciones acumuladas la rompieron en cinco páginas, se notó de inmediato.

El modo oscuro tiene su propia paleta, no la clara invertida. Los tokens de tinta se invierten mientras los de superficie se mantienen. Esa separación evitó un fallo de contraste en todo el sitio antes de que existiera, y ahora está fijada por un test. Las revelaciones al hacer scroll usan un único easing expo, todo bajo prefers-reduced-motion. Nada se mueve por decoración.

Una página por intención, no por palabra clave

La investigación confirmó 24 términos con volumen medible. La tentación es obvia: una página por término. Es exactamente lo que hunde a los sitios de servicios locales, porque reparte la autoridad entre cuarenta páginas finas que se canibalizan entre sí. La regla que apliqué: cada página existe porque alguien la busca y porque puede responder mejor que cualquier otra página del sitio. El resto entra como término secundario, FAQ o contenido de apoyo.

La capa transaccional recoge los términos con dinero detrás: reformas integrales (2.400 búsquedas al mes), cocina (1.000), baño (880), piso (590), inspecciones técnicas de edificios (590). Las dos páginas B2B, rehabilitación de edificios y mantenimiento de comunidades, casi no tienen volumen (50 y 10) y están entre las más importantes del sitio. El volumen de búsqueda mide interés, no dinero: un contrato de mantenimiento de comunidad es recurrente y una rehabilitación de fachada es el ticket más alto del catálogo. Optimizar solo por volumen habría dejado fuera el negocio que sostiene a la empresa.

También hay una página para administradores de fincas que no responde a ninguna palabra clave. Existe porque el canal B2B real son sus oficinas y necesitaban una página que enseñar en una reunión.

• Capa local: cinco landings municipales (L'Hospitalet, Sant Boi, Cornellà, Badalona, Sabadell) con la misma estructura que las páginas de servicio y contenido local real: barrios, parque de viviendas, los permisos de ese ayuntamiento
• Sin testimonios en ninguna de las cinco, a diferencia de las páginas de servicio, porque no había ninguno real de esos municipios. Tampoco aggregateRating en el JSON-LD. Una landing local sin prueba social convierte peor; una con prueba social inventada es una infracción de política de datos estructurados y, antes que eso, una mentira
• Capa informativa: cinco artículos, todos de intención legal o técnica. Permisos para reformar un piso, qué es una inspección técnica de edificios, cédulas de habitabilidad, subvenciones de rehabilitación 2025, accesibilidad en comunidades. Ni un solo "10 ideas para tu cocina". Cada uno responde a una duda que aparece justo antes de contratar

La landing de servicio, y el precio a media página

Las landings de servicio son donde aterriza el tráfico que importa: orgánico y de pago de alta intención. Son la pieza de diseño más trabajada del sitio y todas siguen el mismo guion, derivado directamente de la tabla de objeciones de la investigación. Hero con franja de confianza ("¿quiénes son estas personas?"). Qué incluye, desglosado ("¿qué entra y qué me van a cobrar aparte?"). Proceso con plazos ("¿cuánto dura, y voy a vivir la obra tres meses?"). Galería de obra real ("demuéstrame que sabéis hacerlo"). FAQ visible: las cinco preguntas que llegan por teléfono, respondidas primero. Formulario incrustado al final ("vale, ¿y ahora qué?").

La decisión más discutida: el bloque de precio a media página. El sector esconde el precio detrás del formulario porque quiere el lead antes de que el visitante se asuste. Es una lógica que optimiza la métrica equivocada: más formularios rellenados y peores conversaciones de venta, porque la mitad de esos leads se caen en la primera llamada al oír el rango.

Publicar el rango filtra antes. Menos leads, mejor cualificados, y una señal de transparencia que encaja con todo el posicionamiento. Si el argumento es "con nosotros no hay desviaciones", esconder el precio de partida lo contradice en la misma página.

La honestidad como restricción de diseño

En un sitio que va a recibir tráfico de pago, una afirmación sin respaldo no es un problema de credibilidad. Es exposición: el coste de que la cuestionen supera el beneficio de exagerarla.

Las cuatro landings de servicio llevaban una franja de confianza que decía "15 años en el sector". Al comprobarlo con el cliente, BAMPE360 no lleva quince años existiendo; la empresa es de reciente creación. Los quince años pertenecen a los gremios con los que trabaja. Se convirtió en "15 años de oficio, nuestros propios gremios". Una afirmación falsa se volvió verdadera, y además funciona mejor: refuerza "equipo propio, sin subcontratas" en vez de competir con ella.

De ahí salió un archivo de afirmaciones versionado donde cada cifra publicada tiene su respaldo y la fecha en que el propietario la confirmó. Las +300 obras, el 100% de equipo propio, la valoración de 5 estrellas sin aggregateRating, y una lista explícita de lo que no se hace: sin superlativos sin fundamento, sin reseñas inventadas, sin atribuir a la empresa lo que pertenece al equipo. Ese último punto es literalmente el origen del error de los quince años, y por eso está por escrito.

El formulario, y la conversación que empieza después

El formulario es el único canal de captación digital, así que se incrusta al final de cada landing en vez de vivir solo en la página de contacto. Antes, las landings enviaban a los visitantes a la página de contacto a través de seis enlaces distintos: un salto de más, pagado con dinero de publicidad, para no ganar nada.

Cada landing preselecciona su servicio en el desplegable. El catálogo del desplegable y las páginas de servicio vienen de la misma fuente de datos, con un test que evita que se desincronicen: no se puede solicitar un servicio que no existe, ni falta ninguno que tenga página.

Al enviar, el visitante llega a una página de agradecimiento que existe para medir el envío y lleva noindex, follow para no competir en buscadores con las páginas que sí tienen que posicionar.

Hacer que la máquina entienda quién es esta empresa

Una empresa recién creada no tiene autoridad de dominio, ni enlaces, ni historial. Lo único que puede hacer es ponérselo fácil a quien la lea.

• JSON-LD con HomeAndConstructionBusiness, Organization, WebSite, BreadcrumbList, FAQPage y BlogPosting. areaServed declara los cinco municipios con landing propia más las comarcas; antes declaraba solo Barcelona mientras existían páginas para Badalona y Sabadell, contradiciendo su propio H1
• La FAQ visible y el marcado FAQPage comparten una sola fuente de datos. No hay una versión para el usuario y otra para Google, así que no pueden desincronizarse
• NAP consistente en el footer de las 31 páginas: mismo teléfono, correo, áreas y horario, desde una única fuente de datos
• Sitemap generado a partir de las colecciones, no escrito a mano, con exclusión automática de páginas noindex. Robots.txt y canonicals correctos en las 31 páginas, con noindex automático fuera de producción
• Un llms.txt, también generado desde las mismas colecciones: servicios, áreas, artículos y contacto en texto plano para modelos de lenguaje. No cuesta nada mantenerlo y el sitio ya se lee bien en los asistentes

Donde se tocan diseño y captación

Una vez el sitio estuvo en producción se activó una campaña de Google Ads, y esa parte tiene su propia historia porque el problema que apareció era de otra naturaleza: la cadena de medición estaba cortada en tres puntos y la cuenta registraba cero conversiones con tráfico real. Lo que corresponde aquí son las dos decisiones donde diseño y captación se tocan.

El banner de cookies con simetría real. "Aceptar todo" y "Solo esenciales" comparten padding, tamaño, peso, espaciado de letra, altura mínima y radio: solo cambia el fondo. Rebajar el rechazo a un enlace gris aumenta la aceptación, y la mitad del sector lo hace. Las directrices 03/2022 del CEPD y la guía de la AEPD tratan esa asimetría como una infracción, y anula el consentimiento obtenido: el atajo que salva la medición es el mismo que destruye la medición. Un test compara ambas reglas CSS propiedad por propiedad y falla si alguna se degrada.

El retraso de aparición pasó de 150 a 1.500 ms para no interrumpir la primera lectura del hero. Un banner que salta sobre el titular en cuanto carga la página convierte peor y se acepta peor.

Lo que ves cuando algo sale mal

• Un 404 con la identidad completa, no el de Apache. Tipografía, navegación y una salida útil hacia servicios y contacto
• Modo oscuro auditado en 23 páginas, cero fallos de contraste WCAG, verificado también en producción
• Sin desbordamiento horizontal a 320 px, medido: 0 px. El tráfico de este sector es mayoritariamente móvil y un 320 no es una hipótesis
• Foco visible en cada elemento interactivo, con un enlace de salto al contenido principal

Cuatro 100 en móvil, cuatro 100 en escritorio

Un sitio que se ve ordenado y carga lento se contradice a sí mismo. PageSpeed Insights en la home de producción, 10 de septiembre de 2026, puntúa 100 en rendimiento, accesibilidad, buenas prácticas y SEO en ambos formatos. La prueba móvil emula un Moto G Power con 4G limitada, que es el dispositivo y la red por los que realmente llega el tráfico de este sector.

Nada de esto viene de un sprint de rendimiento. Es la suma de las decisiones anteriores: HTML estático sin JavaScript de framework, dos familias tipográficas, iconos inyectados en build en vez de un paquete de 41 MB, imágenes al tamaño exacto en que se renderizan, y movimiento solo sobre propiedades amigables con el compositor.

• Móvil: First Contentful Paint 1,0 s, Largest Contentful Paint 1,8 s, Total Blocking Time 0 ms, Cumulative Layout Shift 0, Speed Index 1,9 s
• Escritorio: First Contentful Paint 0,4 s, Largest Contentful Paint 0,6 s, Total Blocking Time 0 ms, Cumulative Layout Shift 0,02, Speed Index 0,7 s
• Datos de laboratorio, no de campo. El sitio es demasiado nuevo para tener cifras del Chrome User Experience Report, así que estas son pruebas de Lighthouse en una única carga de página, no mediciones de usuarios reales

El sistema por debajo

De 29 copias a una sola fuente. La primera versión del sitio eran páginas HTML sueltas, que es la forma correcta de empezar rápido e insostenible en cuanto crecen. El menú vivía duplicado en 29 archivos, el footer también, y había dos conjuntos de tokens CSS que divergían. Cambiar una entrada del menú costaba 29 ediciones. Ahora cuesta una.

Eleventy, no un framework. El hosting no ejecuta Node y el contenido no cambia entre peticiones. La salida es HTML plano: el view-source lleva el contenido completo, sin JavaScript de framework. Next y Astro se descartaron por sobredimensionados para 31 páginas de marketing, y Tailwind porque la hoja de estilos existente ya era la identidad probada en producción.

Las cinco landings municipales son datos, no cinco archivos. Eran cinco plantillas sueltas que habían divergido: una tenía precios, ninguna tenía FAQ, y usaban un vocabulario de clases distinto al de las landings de servicio. Ahora el contenido local vive en un solo archivo de datos y el marcado es el mismo que el de las páginas de servicio.

• 58 tests cubren la paridad de URLs indexadas, SEO, el límite entre variables públicas y de servidor, validadores de formulario, simetría del banner, contraste en modo oscuro y los dominios que la política de seguridad debe permitir

Verificado, y aún no medido

Lo verificado: 31 páginas en producción, 43 recursos, 0 enlaces rotos. Cero fallos de contraste WCAG en modo oscuro en las 23 páginas auditadas. 0 px de desbordamiento horizontal a 320 px. PageSpeed Insights en 100 en las cuatro categorías, móvil y escritorio. Las 29 URLs de la primera versión siguen en producción, con un test que falla si alguna desaparece del build. Sitemap, robots, canonicals y llms.txt generados desde una sola fuente, sin forma de divergir del contenido.

• Aún sin historial de posicionamiento orgánico. El sitio es nuevo y las páginas transaccionales tienen semanas, no trimestres. Un sitio sin autoridad de dominio en un mercado con seis competidores establecidos tarda meses en moverse, y cualquier cifra hoy sería ruido. El número a vigilar dentro de seis meses son las impresiones y clics por URL principal en Search Console, no una posición media agregada
• Sin investigación de usuarios. Cero entrevistas, cero tests de usabilidad. Las decisiones de este proyecto vienen de investigación de mercado, datos de búsqueda, análisis de competidores y normativa, no de sesiones con clientes finales. Lo digo aquí porque prefiero declararlo antes de que se deduzca
• El canal telefónico no está atribuido. Hay 182 enlaces de teléfono y 33 de WhatsApp en el sitio. En reformas la llamada suele ser la mitad de los contactos y el lead de mayor valor. La respuesta real es call tracking por campaña, que no está configurado

La pantalla es lo último que debería aparecer

Cuando alguien pide una web desde cero, lo primero que quiere ver es una pantalla. Y la pantalla es lo último que debería aparecer. Todo lo que hace que este sitio no sea una web de reformas más (qué páginas existen, qué dice cada hero, por qué el precio está a media página y no detrás del formulario, por qué hay una página para administradores de fincas que nadie busca) salió de la fase en la que no había nada que enseñar. Las semanas de investigación fueron las que menos parecían trabajo y las que decidieron todo el proyecto.

Lo segundo es menos cómodo. En una empresa recién creada, la tentación de exagerar es estructural: no tienes años, ni obras, ni reseñas, y todos tus competidores sí. La respuesta fácil es redondear al alza y confiar en que nadie lo comprueba. La corrección de los quince años dejó claro que la respuesta cara sale más barata: una afirmación reatribuida con precisión no solo dejó de ser falsa, dijo algo mejor que la exageración a la que sustituyó.