REDISEÑO WEB DE AUTOESCOLA CANYELLES

La única autoescuela con todos los permisos, y una web que lo escondía

Autoescola Canyelles enseña coche, toda la gama de moto de AM a A, camión, autobús y el certificado profesional CAP en tres centros de Barcelona. Ningún competidor de la ciudad puede decir eso. La web anterior era un WordPress de 2019 con un copyright congelado, un blog parado desde 2023 y un calendario de exámenes con fechas a las que les faltaba el año.

El encargo era un rediseño. El trabajo real era convertir información que ya existía, pero estaba mal servida, en un sistema que responde a las tres preguntas que realmente tiene un visitante comparando autoescuelas en cinco pestañas: cuánto cuesta, dónde está, y puedo fiarme.

• Alcance: auditoría competitiva y legal, propuesta de valor, sistema de diseño, 6 páginas en 2 idiomas, un catálogo de 14 permisos y cumplimiento RGPD
• Aportación del cliente: datos de precios, fotos de los pósters de precios y feedback en cada iteración

No era un problema de estética: formato, canal y cumplimiento

Para el usuario, los precios existían pero como imágenes PNG: no se podían buscar, no se leían bien en el móvil, no eran indexables. Nada en el sitio respondía una pregunta sin un clic.

Para el negocio, lo único que ningún competidor podía reclamar estaba enterrado en 16 pestañas idénticas, y el titular era "la autoescuela de referencia en Barcelona", que es lo que dicen todas.

Para el cumplimiento normativo, el banner de cookies usaba la fórmula "si sigues navegando aceptas", prohibida por la Agencia Española de Protección de Datos desde 2020. La política citaba el acuerdo Safe Harbor, invalidado en 2015. No había aviso legal ni política de privacidad.

Qué lo hizo difícil

Yo era el único perfil de producto y front-end. Decidí la propuesta de valor, la arquitectura de información, el sistema de diseño, la estrategia de conversión, la estructura legal, el stack y toda la implementación. El catálogo final, la terminología, la intensidad de las fotos del hero y la disposición de las tarjetas se acordaron con el cliente.

• Confianza sin métricas. Sin analítica útil ni historial de leads. La única evidencia era la auditoría competitiva y lo que el negocio sabía de sus propios alumnos.
• El precio como arma de doble filo. El pack de 199 € del permiso B atrae; enseñar que el total realista con diez clases y tasas ronda los 768 € puede asustar. Cuánta verdad mostrar, y cómo, fue una decisión de diseño.
• Sin backend. Hosting compartido sin servidor, sin base de datos y sin formulario que envíe correo. Eso condicionó cómo podía existir siquiera un formulario de contacto.
• Dos idiomas, un equipo. Castellano y catalán no son intercambiables en Barcelona. La traducción tenía que ser idiomática, y la arquitectura tenía que hacer imposible que una versión se quedara atrás respecto a la otra.
• Datos del cliente con errores. Al pasar los precios de PNG a una tabla salieron a la luz dos tasas dudosas: 28,87 € para el permiso A frente a la tasa oficial vigente de 94,05 €, y 94,05 € para AM frente a los 44,58 € oficiales. También señalé un descuento de carnet joven que ya no existe y una normativa CAP derogada en 2021. Todo se escaló por escrito; corregirlo es decisión del cliente.

Tres hallazgos que cambiaron el enfoque

Puntué a los competidores en claridad, calidad visual, confianza, UX móvil y fuerza de conversión. Ninguno superó un 8 sobre 10 en nada. Todos usaban la misma retórica, "n.º 1", "los mejores", y todos escondían los precios. El hueco no era ser más bonitos. Era ser los únicos que decían algo concreto y comprobable.

• Nadie en Barcelona reclama "todos los permisos". El titular se convirtió en "Todos los permisos, una sola autoescuela": seis palabras, verificables contra la tabla de permisos justo debajo.
• Los precios ya eran públicos, solo que mal servidos. El negocio no tenía resistencia a mostrarlos; el problema era el formato. Quince pósters se convirtieron en una única estructura de datos tipada con desglose completo. La transparencia dejó de ser una decisión de negocio y pasó a ser una decisión de formato.
• El canal real ya era WhatsApp. El equipo respondía todo por ahí, viniera de donde viniera. Un formulario que envía correos añadiría un paso que de todas formas se traduce en WhatsApp.

Cinco decisiones, cada una con su contrapartida

Cada página refuerza un solo argumento: multi-permiso. No velocidad, no precio, no calidad de enseñanza. Era el único diferenciador demostrable que nadie más ocupaba. Canyelles tiene precios competitivos y podría haber jugado la carta de "barato"; renuncié a ese ángulo en el hero para que el mensaje no se diluyera. El precio aparece en la sexta sección, una vez hay contexto.

Cada página de permiso muestra tres bloques: qué incluye el pack, el precio de clases sueltas y en pack, y las tasas que no están incluidas. Sin letra pequeña, porque no hay nada que esconder en letra pequeña. El número grande sigue siendo el precio del pack; el desglose va debajo. Esa es la concesión al escaneo rápido: el ancla primero, la verdad completa un scroll más abajo.

• Solo WhatsApp, sin backend. El botón flotante, el CTA de cada sección y el formulario terminan todos en el mismo número. El formulario redacta un mensaje con el permiso, el centro preferido y los datos de contacto, y luego abre WhatsApp. Cero backend que mantener, cero spam, cero captcha, y el equipo recibe una consulta estructurada en vez de "hola, quiero información". Contrapartida: no hay base de datos de leads ni forma de medir envíos sin analítica externa. Si el navegador bloquea el popup el mensaje se pierde, así que una pantalla de éxito con un botón "Abrir WhatsApp ahora" actúa como red de seguridad.
• De siete elementos de menú a tres. Inicio, Permisos y Contacto sustituyeron a Inicio, Permisos, Ofertas, Exámenes, Resultados, Blog y Contacto. Exámenes y resultados eran enlaces a la DGT; el blog llevaba tres años muerto, y un blog muerto en el menú principal transmite abandono. La intranet y el aula virtual se quedaron como enlaces secundarios.
• Sitio estático en vez de un CMS. Next.js con exportación estática produce una carpeta de HTML que se sube a cualquier hosting. Más rápido, más seguro, sin actualizaciones de plugins que nadie va a ejecutar. Contrapartida: el cliente no puede editar precios desde un panel, así que cada dato vive en un único archivo tipado con la instrucción "actualizar aquí cuando cambie". Es un cambio de código, pero uno solo, en un solo sitio.

Lo que se entregó

Inicio: nueve bloques en orden de duda. Qué ofrecéis, por qué creeros, qué permiso es el mío, por qué vosotros y no otra, cómo funciona, cuánto cuesta, qué dicen otros, y un cierre de conversión en amarillo de marca con ocho burbujas de chat que reproducen las preguntas reales que recibe la autoescuela.

Catálogo de permisos: catorce tarjetas en seis categorías, cada una con imagen, pack, clases, tasas y un CTA que abre WhatsApp con el permiso ya escrito en el mensaje. Es la página que sustituye a las dieciséis pestañas idénticas del sitio anterior.

Contacto: tres centros con dirección, teléfono y mapa, más un formulario en amarillo, el color reservado para los puntos de decisión, que redacta el mensaje de WhatsApp.

Legal: aviso legal, política de privacidad y política de cookies. La política de privacidad nombra el certificado psicotécnico como dato de categoría especial bajo el artículo 9 del RGPD, porque una autoescuela lo maneja. La política de cookies dice la verdad: el sitio no instala cookies, solo almacenamiento local para el consentimiento.

• Paleta OKLCH (crema, tinta, amarillo de marca), Poppins, un único ancho de contenido de 1200px para todo
• Movimiento entre 150 y 300 ms que respeta prefers-reduced-motion
• Una foto de carretera distinta en cada hero al 50% bajo un degradado que garantiza el contraste

Qué cambió por el camino, incluido mi propio error

El primer hero era a pantalla completa con una foto oscura. Se leía como una landing de startup, lo contrario de una autoescuela de barrio. Se reconstruyó claro y editorial, a dos columnas, con la foto como textura en vez de protagonista. Se probó y descartó un layout tipo bento para las páginas legales: con textos de longitud muy desigual, las celdas cortas dejaban huecos enormes, así que un índice lateral fijo y una columna lineal lo sustituyeron. El texto legal pasó de 14 a 16 px, el mínimo WCAG para lectura larga.

El feedback del cliente cambió el producto. "Sedes" se convirtió en "Autoescuelas" a petición suya; tocaba más de diez sitios, pero los nombres vivían en un único archivo de constantes, así que fue trivial. La foto del hero pasó de 25% a 50% de opacidad porque el cliente quería más presencia visual, lo que obligó a un degradado más fuerte para mantener el contraste del titular.

Un error costó tres commits en siete minutos. El cliente pidió "reorganizar" la tarjeta horizontal del permiso de autobús sin describir el resultado. Construí tres layouts completos y terminé donde había empezado. La lección quedó documentada: cuando la petición es un layout con pocas variantes posibles, un wireframe de texto antes de tocar código sale más barato que iterar a ciegas.

Dos restricciones técnicas reescribieron componentes. La exportación estática no puede leer cabeceras de petición, lo que rompió la detección de idioma e hizo que el footer enlazara a la versión en castellano desde la catalana; los componentes que necesitan el idioma se movieron al cliente. Y Tailwind v4 llegó por defecto con el scaffold y no era compatible con el sistema de tokens, así que se bajó a v3 el primer día, antes de escribir una sola regla. Bajar de versión al principio cuesta minutos. Migrar a medio camino habría costado días.

Qué cambió, de forma verificable

Lighthouse en la build de producción: 97 rendimiento, 92 accesibilidad, 100 SEO, 77 buenas prácticas. Los 23 puntos que faltan son cabeceras HTTP del hosting, no código, y suben con el despliegue. Más allá del sitio, el cliente recibió una auditoría por escrito con ocho acciones concretas sobre sus propios pósters y normativas citadas, algunas con impacto potencial en la facturación.

• Precios: de 15 pósters en PNG con texto incrustado a 14 páginas HTML indexables con pack, clases y tasas no incluidas
• Conversión: de 16 botones de "Más información" que apuntaban al mismo formulario genérico a un CTA por permiso que abre WhatsApp con el mensaje ya escrito
• Legal: de un banner de cookies sancionable y cero páginas legales a tres páginas legales y un consentimiento con una opción de rechazo real y del mismo peso visual
• Navegación: de 7 elementos a 3. SEO: de sin schema ni sitemap a JSON-LD DrivingSchool, un sitemap con hreflang y robots
• Aún no reclamable: datos de conversión, tráfico o leads tras el lanzamiento. El sitio se diseñó para que el KPI principal sea el porcentaje de visitantes que inician un contacto, pero medirlo necesita una analítica que no está instalada por diseño, o un recuento manual de mensajes de WhatsApp por parte del equipo

Una nota honesta, y qué me llevaría

El proyecto se construyó bajo la regla "nada de afirmaciones genéricas". Y aun así el inicio muestra "92% aprueba a la primera" y "+1.200 alumnos formados", cifras que vienen del cliente y que no pude verificar contra ninguna fuente. Son exactamente el tipo de dato que critiqué en los competidores. Aquí son específicas y atribuibles, pero eso no las hace comprobables. Si pudiera hacer una cosa más, sería pedir la fuente de esas dos cifras o sustituirlas por lo que sí está documentado: 34 años, 3 centros, 4,7 en Google con 102 reseñas.

• Separar el problema del usuario, el problema del negocio y el problema de cumplimiento, y luego buscar la causa compartida. Aquí las tres eran información que ya existía pero estaba mal servida.
• Sin analítica, apoyarse en la auditoría competitiva y en cómo opera realmente el equipo, no en suposiciones sobre el usuario.
• Escalar por escrito los propios errores del cliente, incluidos los que afectan a su facturación. Es la parte del trabajo que no pidieron y que recordarán.