Saltar al contenido
Caso de estudioProyecto de cliente

The Star Auto Service

Una reconstrucción digital completa para un taller de reparación automotriz familiar, con técnicos certificados ASE, que atiende Richardson, Texas desde 1998. Veintiocho años de confianza de boca en boca, por fin igualados por un sitio que convierte en cada dispositivo y refleja la calidad del trabajo que el taller de verdad entrega. Nueve páginas de zona de servicio, doce páginas de servicio, quince guías de formato largo, un espejo completo en español, un botón de llamada de escritorio arreglado tras años de prospectos perdidos en silencio, una imagen en cada página sin que ninguna cargue desde un tercero, y una entrada de portada cinematográfica que se lee como una declaración de marca y no como una plantilla. Accesibilidad, Buenas Prácticas y SEO puntúan 100 en escritorio y en un teléfono de gama media limitado; el rendimiento es 99 en escritorio y 86 en ese teléfono.

100Accesibilidad
100Buenas Prácticas
100SEO
Nueve zonas de servicio, cada una con su propia página para las búsquedas que sus conductores hacen todos los días. Doce servicios, una página para cada uno de los problemas que sus clientes buscan en Google antes de llamar. Un número de teléfono que por fin timbra en cada dispositivo. Accesibilidad, Buenas Prácticas y SEO todos en 100.
Capítulo01/ 12

El cliente

Miguel Ibarra dirige The Star Auto Service en Richardson, Texas. Técnicos certificados ASE, NAPA Auto Care Center, servicio bilingüe, veintiocho años en la esquina de Belt Line Road. Una calificación de 4.5 estrellas en Google sobre ciento treinta y seis reseñas, construida cliente por cliente. La reputación del taller en persona era intachable. La reputación del taller en línea no existía.

Capítulo02/ 12

El problema de visibilidad

Cada vecino de Richardson, Garland, Plano, Allen, Murphy y las zonas metropolitanas alrededor busca todos los días "state inspection near me", "auto repair Richardson", "brake shop Plano" y otras cien variaciones. Ninguna de esas búsquedas encontraba el taller de Miguel. El sitio anterior no tenía arquitectura de SEO local: ninguna página de zona de servicio ligada a los lugares a los que el equipo de verdad conduce, ninguna página de aterrizaje por servicio ligada a los problemas que los clientes de verdad tienen, ningún dato estructurado que le dijera a Google qué es el negocio o dónde opera. El Perfil de Negocio de Google estaba aislado, sin conectarse al sitio por ninguna señal que Google pudiera leer. Años de tráfico de búsqueda que debieron aterrizar en el sitio del taller aterrizaron en la competencia.

Capítulo03/ 12

El teléfono que no timbraba

Peor que una posición faltante en búsqueda: el enlace del teléfono del sitio anterior fallaba en silencio en los navegadores de escritorio. Cada visitante en una laptop que veía el titular, pasaba las señales de confianza y hacía clic en "Call (972) 231-2886" se topaba con un diálogo de protocolo tel sin manejar, o con nada. El teléfono es el canal principal de conversión de un taller local. Cada clic de escritorio que no marcaba era un cliente que ya había hecho el trabajo de encontrar el taller, ya había decidido llamar, y el propio sitio lo mandaba a un callejón sin salida. No queda instrumento para medir cuántos años de prospectos se perdieron por ese solo enlace roto, pero la cuenta es dura.

Capítulo04/ 12

La base

Reconstruí el sitio desde cero sobre Next.js 16 con TypeScript estricto de punta a punta, Tailwind CSS para la distribución y Vercel para el despliegue. Móvil primero desde el primer pixel. Un tiempo total de bloqueo de 10 milisegundos y cero movimiento acumulado de diseño en móvil, con Accesibilidad, Buenas Prácticas y SEO todos en 100. La base técnica es lo que hace posible todo lo que sigue: cuando el rastreador de Google llega al sitio, cada señal que necesita leer se dibuja limpia en HTML, en JSON-LD, en el lugar correcto de la página, cada vez.

Capítulo05/ 12

La red de zonas de servicio

Nueve páginas dedicadas de zona de servicio, una por cada lugar que el taller de verdad atiende: Richardson, Garland, Plano, Dallas, Lake Highlands, Allen, Murphy, Sachse y Wylie. Cada página abre con una foto real de la zona, nombra los barrios específicos de donde vienen los clientes (Canyon Creek, Heights, J.J. Pearce, Cottonwood Heights para Richardson; sus equivalentes para el resto), publica el tiempo y la distancia de manejo desde el taller, lista los servicios principales para los conductores de esa zona, e incrusta un mapa de Google que referencia la entidad de negocio verificada. Cada página de zona lleva JSON-LD completo de LocalBusiness con coordenadas geográficas, código NAICS, areaServed y openingHoursSpecification. Esta es la arquitectura que le dice a Google "este taller atiende esta zona" en términos legibles por máquina, en una página indexada para las palabras que esa zona busca todos los días.

Capítulo06/ 12

Las páginas de servicio

Doce páginas dedicadas de servicio, una por cada servicio común que el taller realiza: frenos, cambio de aceite, transmisión, sistemas eléctricos, verificaciones estatales, calefacción y aire acondicionado, reparación de llantas, sistemas de enfriamiento, inyección de combustible, servicio de batería, reparación de motor y diagnóstico de motor. Cada página abre con una foto real del taller, sigue con una lista de síntomas en el lenguaje que un cliente de verdad usa para describir qué anda mal, explica en qué consiste el servicio, fija expectativas honestas de precio y responde de cuatro a seis preguntas con esquema FAQPage. Cada página está enlazada internamente desde el índice de servicios y desde la página de zona correspondiente. Esta es la arquitectura que le dice a Google "este taller arregla esa cosa" en términos legibles por máquina, en una página que se posiciona para el problema que el cliente de verdad está buscando.

Capítulo07/ 12

El centro de recursos

Quince guías de formato largo que responden lo que los clientes buscan en Google antes de levantar el teléfono: qué se revisa en una verificación estatal de Texas y qué hacer si no pasa, cuidado del auto estación por estación para conductores del norte de Texas, las señales de que necesita frenos nuevos, cada cuándo necesitan de verdad un cambio de aceite los motores modernos, aceite sintético contra convencional, qué significa de verdad la luz de check engine, síntomas de alternador contra batería, por qué se sobrecalienta un auto, alineación contra balanceo, la luz de TPMS, el cambio de banda de tiempo, el costo del compresor de aire y del convertidor catalítico, una lista de revisión previa a la compra, y si conviene la agencia o un mecánico independiente. Cada guía está escrita desde la experiencia de diagnóstico real del taller, cientos de autos al año, los patrones que el equipo ve y que el típico artículo de "diez cosas que debe saber" nunca va a ver. Esta es la arquitectura que le dice a Google "este taller tiene autoridad sobre el tema", no solo "este taller presta el servicio".

Capítulo08/ 12

Bilingüe, garantía y señal de confianza

"Hablamos Español" aparece en la barra de utilidades de todo el sitio, para que un cliente hispanohablante lo vea en cuanto carga la página, sin tener que leer en inglés para enterarse de que el taller habla su idioma. Una página dedicada de garantía explica en lenguaje llano la cobertura NAPA AutoCare de 24 meses o 24,000 millas, con el letrero real de NAPA de la fachada fotografiado y al frente. Un chip de reseñas en el encabezado de todo el sitio muestra la calificación de 4.5 estrellas sobre 136 reseñas de Google y enlaza a una página de reseñas real que muestra reseñas de clientes reales. La señal de confianza vive en cada página, no solo en la de inicio.

Capítulo09/ 12

El teléfono, arreglado

La falla de llamada en escritorio se resuelve con una ventana de llamada a la medida. Cuando cualquier visitante de escritorio hace clic en cualquier número de teléfono en cualquier parte del sitio, se abre una superposición pulida con el número grande y legible, un botón de copiar de un clic y una salida limpia. Los visitantes de móvil siguen marcando directo. La fuga está cerrada. Cada intento de llamada ahora termina en una llamada hecha o en un número copiable en pantalla. Cada envío del formulario de contacto también llega a la bandeja de Miguel en segundos, así que ninguno de los dos canales deja un prospecto sin responder.

Capítulo10/ 12

Una imagen por página, movimiento de verdad

Cuarenta y seis imágenes a lo largo del sitio, con el taller fotografiado de verdad: la fachada sobre Belt Line en hora dorada, el letrero de NAPA montado en el edificio, las bahías en operación. Hay una imagen para cada página de zona, cada página de servicio y cada guía, y cada imagen se sirve desde el propio dominio del sitio; nada carga desde un tercero. La portada abre de forma cinematográfica en aproximadamente un segundo y medio: el antetítulo entra deslizándose desde la izquierda, "Auto repair in Richardson," se levanta con un efecto de desenfoque a nitidez, "done right." entra a toda velocidad desde la derecha dejando una estela dorada que barre bajo la línea y se disuelve (el color de la marca, la metáfora de la marca, un auto llegando con un toque de escape), el subtítulo aparece, los dos llamados a la acción caen en su lugar con un pequeño rebote, y la franja de confianza se resuelve al final. Cada estrella dorada del sitio lleva un pulso sutil y un destello rápido al pasar el cursor, para que la marca se lea viva en cada página. Cada animación respeta prefers-reduced-motion: cualquier visitante con esa preferencia del sistema activada ve el mismo contenido sin movimiento alguno.

Capítulo11/ 12

Móvil, hasta 360px

La escala tipográfica afinada para que hasta las ventanas de teléfono más angostas dibujen titulares de portada de dos líneas en lugar de pilas de una palabra por renglón. El espaciado de secciones rebalanceado, de estiramientos pensados para escritorio a un espaciado apropiado para móvil que no desperdicia una pantalla entera entre secciones. Llamados a la acción dimensionados para el pulgar. Mapas que cambian de proporción entre móvil y escritorio para que el embebido sea legible en cualquiera de los dos formatos. Cada ruta auditada y afinada desde una ventana de 360px hacia arriba.

Capítulo12/ 12

El resultado

El sitio pasó de ser un marcador de posición digital que Google no podía interpretar y desde el que los visitantes de escritorio no podían llamar, a una presencia local completa. Nueve zonas de servicio, cada una con una página apuntada a las búsquedas que sus conductores hacen todos los días. Doce servicios, una página para cada uno de los problemas que sus clientes buscan en Google antes de llamar. Quince guías que responden las preguntas previas a la llamada. Señal bilingüe en cada página. La garantía NAPA explicada en lenguaje llano. Reseñas reales a un clic desde cualquier menú. Un número de teléfono que por fin timbra en cada dispositivo. Accesibilidad, Buenas Prácticas y SEO todos en 100, en escritorio y en un teléfono de gama media limitado. Los veintiocho años de confianza en persona del taller ahora tienen una superficie digital que los iguala. Lograr que las 102 páginas queden rastreadas e indexadas es el trabajo que continúa; en un dominio de este tamaño eso es un problema de autoridad, no de técnica.

Construido conY por qué

Las decisiones técnicas detrás de esta construcción.

Next.js 16

App Router con generación estática para cargas de página instantáneas, HTML dibujado en el servidor para el rastreo de SEO, y despliegue en Vercel para entrega global en el borde. El sustrato detrás de un puntaje de rendimiento de 99 en escritorio, cero movimiento de diseño y 10 milisegundos de tiempo total de bloqueo en móvil.

TypeScript

Modo estricto de punta a punta, desde los archivos de datos (zonas, servicios, recursos) hasta las propiedades de componente y los manejadores de API. Los errores de tipo detectados en tiempo de compilación significan que Miguel nunca recibe un correo de "esa página está rota".

Tailwind CSS

Estilos utility-first para un diseño preciso y adaptable sin inflar el CSS. Cada punto de quiebre probado en dispositivos reales, cada token de espaciado afinado para móvil hasta una ventana de 360px.

JSON-LD (LocalBusiness, Service, FAQPage)

Datos estructurados en cada página le dicen a Google qué es el negocio, dónde opera, qué servicios presta y qué preguntas responde. Crítico para posicionar en el paquete local y para los resultados enriquecidos en búsqueda.

Google Maps + Google Business Profile

Mapas verificados incrustados en cada página de zona y en contacto, todos referenciando la misma entidad de negocio. Los datos de NAP (nombre, dirección, teléfono) consistentes entre el sitio, el Perfil de Negocio y el esquema. La alineación de entidad es lo que consolida la autoridad de búsqueda en lugar de fragmentarla.

Email infrastructure

API de correo transaccional para el formulario de contacto. Cada consulta llega a la bandeja de Miguel en segundos. Junto con la ventana de llamada de escritorio, ningún prospecto deja el sitio sin respuesta.

Cloudflare DNS

DNS de nivel empresarial con protección contra DDoS, caché de CDN y entrega global en el borde. Infraestructura profesional para un negocio local; el tipo de resiliencia que el cliente nunca tiene que notar.

Tiempos

Construido a lo largo de varios compromisos enfocados: primero de cero al lanzamiento, y luego reconstrucciones iterativas que agregaron las nueve páginas de zona de servicio, las doce páginas de servicio, el centro de quince guías, la capa bilingüe, el arreglo de la llamada en escritorio, el sistema de movimiento cinematográfico y una pasada de optimización móvil en todo el sitio. Cada iteración se publicó en producción sin devolver los puntajes de accesibilidad, buenas prácticas ni SEO.

Constrúyalo de verdad

¿Listo para resultados como estos?