B&K Design and Construction

Brian Albrecht es dueño de B&K Design and Construction en Royse City, Texas. Es remodelador de diseño y construcción y hombre de mantenimiento: cocinas, baños, pisos y azulejo, carpintería y muebles a la medida, cercas, terrazas, puertas, techos, y la cola larga de reparaciones que un propietario ha estado posponiendo. Sus propias palabras para el negocio son trabajo guiado por la fe, de calidad, con valores honestos, y las reseñas de Google se leen como gente citándolo de vuelta. La reputación ya estaba ahí. Cinco estrellas en veintiséis reseñas no es algo que produzca un sitio web; es algo que veintiséis hogares decidieron por su cuenta después de ver a alguien trabajar en su casa. Atiende el corredor de Royse City, Rockwall, Fate, Heath, Caddo Mills y Greenville en el lado oriente del área metropolitana, más el resto del área de DFW más allá.

El Perfil de Negocio de Google de Brian ya estaba haciendo la parte difícil. Se posicionaba, llevaba las reseñas, y ponía al negocio frente a quien buscaba un remodelador en su corredor. El campo del sitio web en ese perfil estaba vacío, porque no había sitio web que poner ahí. Lo que hacía las veces de uno era una sola tarjeta social: un enlace que listaba su teléfono y su Instagram. Ese es un hueco específico y arreglable, y vale la pena nombrarlo con precisión en lugar de dramatizarlo. El motor de tráfico existía y funcionaba. Aquello a lo que debía estar apuntando, no. Cada persona que encontraba la ficha, leía las reseñas y decidía que quería hablar con él tenía exactamente una opción: llamarle en frío a un desconocido. Alguna gente lo hace. La mayoría, a las nueve de la noche, mirando una cocina que detesta, no lo hace. Va a seguir bajando hasta el contratista cuyo sitio le deja empezar la conversación sin una llamada. Así que el encargo nunca fue "haz un folleto". Fue: construye aquello a lo que la ficha debería estar apuntando, y haz que el primer paso sea algo que una persona de verdad va a dar.

La primera petición del propio Brian, antes de cualquier conversación sobre diseño, fue una herramienta que le permitiera entender un trabajo antes de manejar hasta allá a verlo. Esa es la economía real de un negocio pequeño de remodelación. Una visita a obra sin calificar cuesta una hora de manejo más una hora en sitio más el trabajo que no estaba haciendo mientras tanto, y una parte significativa termina con un propietario cuyo presupuesto y cuyo proyecto nunca se iban a encontrar. Así que la admisión es la pieza central, no el formulario de contacto. Es un asistente de cuatro pasos, hecho móvil primero porque de ahí viene el tráfico. El paso uno es qué es el proyecto. El paso dos es alcance, tiempos y una banda de presupuesto. El paso tres son fotografías, tomadas en el momento con la cámara del teléfono o arrastradas desde el carrete, con vistas previas para que la persona vea qué mandó. El paso cuatro es dónde está la propiedad y a quién llamar. Los campos se diseñaron hacia atrás desde una sola pregunta: ¿qué necesita Brian para saber a qué se está metiendo? No qué suele preguntar un formulario. La banda de presupuesto está ahí para que el tiempo de nadie se gaste en un desencuentro. Las fotos están ahí porque una imagen de un baño responde más preguntas que un párrafo describiéndolo. El sitio sigue prometiendo un número real solo después de un recorrido real, y esa promesa se cumple. La admisión no es un motor de cotización y nunca se vendió como tal. Lo que hace es decidir, antes de que alguien se suba a una camioneta, qué recorridos vale la pena agendar y qué llevar a ellos.

El momento en que se envía un formulario es el único en que la atención del prospecto está garantizada. Casi cualquier contratista pequeño lo gasta en una página que dice "gracias, estaremos en contacto". Enviar la admisión dispara dos mensajes a la vez. El prospecto recibe una respuesta con la marca que confirma exactamente qué se recibió y le dice qué sigue, para que el silencio entre enviar y tener noticias sea una cantidad conocida en lugar de una preocupación. Brian recibe una alerta estructurada que lleva cada campo, las fotografías como miniaturas que puede abrir, y enlaces de un toque para llamar y para enviar mensaje al número que la persona acaba de dar. El reply-to de su alerta es la dirección del propio prospecto, así que responder el correo le responde al cliente. Ese último detalle es pequeño y es el que cambia el comportamiento. Brian puede estar parado en una obra, abrir la alerta, mirar cuatro fotos de un baño, ver la banda de presupuesto y responder desde su teléfono en menos de un minuto, sin cambiar de aplicación ni copiar un número a mano. La velocidad es toda la ventaja competitiva disponible para un taller de una persona frente a una empresa con gerente de oficina, y se gana o se pierde en el diseño de la interfaz.

Texas regula cómo se puede anunciar el trabajo de contratación, y las reglas muerden antes de que se realice trabajo alguno. Un anuncio que nombra plomería tiene que llevar el número de licencia de un Responsible Master Plumber. Un anuncio que nombra trabajo eléctrico tiene que llevar un número de licencia de contratista de TDLR junto con un aviso específico de TDLR. Los techos, en cambio, no requieren ninguna licencia estatal en Texas. Así que esas dos palabras no aparecen en ninguna parte de este sitio, en ningún encuadre, incluidas las construcciones más suaves que suenan como si rodearan el asunto. Esa decisión se tomó a propósito y costó volumen real de búsqueda, porque son términos de alta intención que cualquier herramienta de palabras clave pondría cerca del principio de la lista. La consecuencia más interesante es lo que forzó. En lugar de describir la cobertura del sitio como una lista de oficios, el texto habla del equipo y del resultado terminado: un solo punto de contacto, una sola cuadrilla, una sola persona responsable de cómo se ve el cuarto cuando queda listo. Eso se lee mejor de lo que se habría leído una lista de oficios. Es un buen recordatorio de que una restricción que llega de fuera del encargo de diseño suele mejorar el trabajo, siempre que se trate como una entrada de diseño y no como un obstáculo que rodear.

La primera versión del sitio tenía una sola página de servicios cargando en la espalda unas veinte búsquedas distintas. Ese es el error estructural más común de un sitio de negocio pequeño, y es invisible hasta que uno mira quién le está ganando posición. Cada competidor por delante de B&K en el corredor corría una página por servicio y una página por ciudad. Así que ahora el sitio también. Diez páginas de servicio, una para cada una de remodelación de cocina, remodelación de baño, remodelación de casa completa, pisos y azulejo, carpintería y muebles a la medida, instalación de cercas, terrazas y patios, puertas y exteriores, techos, y trabajo de mantenimiento. Seis páginas de ciudad para Royse City, Rockwall, Fate, Heath, Caddo Mills y Greenville, más un índice que las amarra. Veintitrés URL indexadas en total, contra seis antes. Debajo de cada una: datos estructurados de Service y FAQ, marcado de LocalBusiness con el nombre, la dirección, el teléfono y el horario reales del negocio, y migas de pan. Las preguntas frecuentes se construyen sobre elementos nativos de divulgación en lugar de acordeones de JavaScript, lo que significa que cada respuesta viaja dentro del HTML donde un rastreador la lee, en lugar de aparecer solo después de que corre un script. Los títulos de página se escriben con la búsqueda primero, para que las palabras que la persona de verdad escribió queden al frente del resultado y no detrás de un nombre de marca. Un arreglo poco glamoroso que vale la pena nombrar, porque es tan común: el sitemap venía estampando cada página con la fecha actual en cada despliegue, lo que le dice a un buscador que las veintitrés páginas cambian cada vez que se publica cualquier cosa. Esa es una afirmación que un rastreador aprende a ignorar. Ahora las fechas son reales.

Cada página de este sitio tiene un dibujo arquitectónico a lápiz detrás de su encabezado, y el dibujo se dibuja solo. No una ilustración de banco de imágenes, no un archivo Lottie, no una fotografía con un filtro encima. Veintitrés películas separadas, una por página, producidas por un motor de dibujo que construí para este proyecto. El motor trabaja como trabaja un dibujante. Las escenas ubicadas en el mundo construido (una esquina en Rockwall, una terraza junto al lago en Heath, un pórtico victoriano envolvente en Greenville, un plano de techo, una línea de cerca que se aleja) se dibujan a través de una cámara real de perspectiva de dos puntos: el mundo se describe en pies, la cámara está a nivel para que las líneas verticales se queden verticales, y los puntos de fuga son correctos por construcción y no a ojo. Las escenas que un dibujante honestamente dibujaría planas, como el alzado de una cocina, una sección de escalera o un catálogo de puertas, se quedan ortográficas a propósito. Fingir perspectiva en un tipo de dibujo que nunca se dibuja en perspectiva es exactamente el detalle que hace que una ilustración se lea como decoración. La animación se sostiene en treses, la cadencia que de verdad usa la animación dibujada a mano. Una versión anterior tenía un hervor de línea por cuadro, y se leía como temblor y no como dibujo, así que se cortó. El sombreado es achurado diagonal a lápiz recortado a la forma que rellena. Las líneas estructurales llevan un eco de sobretrazo, el borde doblado que aparece cuando un dibujante redibuja una línea a la que ya se comprometió. Todo es tinta en escala de grises sobre papel, detrás de un lavado azul marino, para que nunca compita con las palabras que tiene enfrente. Bajo una preferencia de movimiento reducido la película nunca arranca y el boceto totalmente dibujado se queda como imagen fija, que es el respaldo honesto: el dibujo es el punto, el movimiento es el adorno.

Brian trajo su propio emblema: una insignia circular con borde de cuerda, una casa, herramientas cruzadas, estrellas y un listón en rojo, blanco y azul marino. Era suyo, estaba en paleta, y lo correcto era conservarlo en lugar de convencer a un cliente de soltar una marca que le gusta. Lo que necesitaba era trabajo de producción. Limpié el arte hasta un fondo transparente de verdad, lo recorté y lo centré en un lienzo cuadrado, y construí una versión animada para los momentos que la merecen. La animación tomó dos intentos. El primero rotaba el trenzado de la cuerda, lo que era invisible, porque una cuerda simétrica se ve idéntica mientras gira. La versión que se publicó orbita una pequeña cuenta de luz dorada alrededor de la banda de estrellas azul oscuro, donde el dorado tiene contraste para leerse, con un resplandor de estela detrás y un brillo metálico lento cruzando la cara. Corre cuando el escudo entra en vista y se detiene por completo bajo una preferencia de movimiento reducido. El favicon es una marca aparte, y eso es una decisión deliberada y no una inconsistencia. El escudo completo tiene suficiente detalle como para volverse una mancha a dieciséis pixeles; lo probé y así pasa. Así que la pestaña del navegador, y cualquier otro contexto de dieciséis pixeles, recibe una marca circular simplificada de casa dibujada desde la misma geometría, que se mantiene nítida. El escudo completo se usa en todos los lugares donde tiene espacio para ser él mismo.

No hay una sola fotografía de banco de imágenes en este sitio. Cada imagen es un trabajo que Brian de verdad hizo. El material de origen fueron sus propias redes sociales, que es donde el trabajo se había documentado y donde se iba a quedar a menos que alguien hiciera algo con él. Bajé el archivo completo, quité los duplicados y las tomas en proceso, curé hasta el trabajo terminado, y luego optimicé a los sobrevivientes para la web. Treinta fotografías cargan hoy el sitio. No están confinadas a una página de galería, que es donde las fotos de portafolio suelen ir a que las ignoren. Corren como una cinta de trabajo reciente que se desplaza en la parte alta de la página de inicio, como un carrusel destacado más abajo, como el fondo detrás de la portada bajo un lavado azul marino intenso que mantiene el texto nítido, dentro de la historia de la página de quiénes somos, y una por grupo de servicio en la página de servicios en una distribución alternada tipo revista. La página de trabajo organiza el resto en tres carruseles por categoría. Cada una lleva texto alternativo específico y honesto que describe qué hay de verdad en el cuadro. Las imágenes puramente atmosféricas están marcadas como decorativas para que un lector de pantalla las salte en lugar de narrar una textura.

Lighthouse, corrido contra el sitio en vivo y no contra una compilación local: accesibilidad, buenas prácticas y SEO todos puntúan 100, tanto en escritorio como en móvil. El movimiento acumulado de diseño es cero en los dos, que es el número que un visitante de verdad siente, porque significa que nada de la página se mueve bajo su pulgar mientras carga. El tiempo total de bloqueo es prácticamente cero. El rendimiento en escritorio queda en los noventa altos con un largest contentful paint de alrededor de un segundo y medio. El rendimiento en móvil es el único puntaje que no llevé hasta arriba. Queda a mitad de los ochenta, y vale la pena ser directo sobre por qué en lugar de omitirlo calladamente. El elemento más grande en un teléfono es la película dibujada a mano del encabezado, y esa película es lo que mantiene el número abajo. El camino a un puntaje más alto estaba disponible y sé exactamente cuál es, porque lo medí: servirle a los teléfonos una imagen fija o una película mucho más corta. Confirmé que el arreglo funciona y elegí no publicarlo. En un dispositivo real sobre una conexión real la página es rápida; el déficit aparece bajo una red lenta simulada que castiga precisamente al elemento que hace que este sitio no se parezca a nada más en el corredor. Esa es una decisión de criterio, no un límite técnico, y lo útil de decir en voz alta es que el puntaje es un sustituto y la experiencia es la cosa. Con gusto me sujeto a los dos, que es por lo que el número está escrito aquí en lugar de redondeado hasta desaparecer.

La ficha de Google ahora tiene a dónde mandar a la gente. Veintitrés páginas, cada una apuntada a una búsqueda específica que un propietario de este corredor de verdad hace, cada una con datos estructurados que le dicen a un rastreador qué hace el negocio y dónde lo hace. Una herramienta de admisión con las fotos primero que le deja a una persona empezar una conversación a las nueve de la noche sin llamarle a un desconocido, y le deja a Brian juzgar desde su teléfono qué trabajos valen el viaje y qué llevar cuando vaya. Dos correos en los sesenta segundos posteriores al envío, uno para tranquilizar al cliente y otro para armar al contratista. Y un sitio que no se parece a los otros sitios de contratista del corredor, porque veintitrés dibujos arquitectónicos originales y una versión limpia de su propio escudo no son cosas que reparta una plantilla. La reputación ya era real. Esta es la superficie que por fin la iguala.