Caso de estudio · Rediseño WordPress
Un sitio de presión de neumáticos que ya traía visitas desde Google. Lo renovamos por completo con un tema propio y una herramienta interactiva, sin tocar el contenido ni las direcciones que ya estaban posicionadas.
01 · El problema
Conduce Confiado ya tenía lo que más cuesta: cientos de páginas que Google mostraba, con direcciones del tipo /presion-neumaticos/audi/a3/. El problema era la experiencia: no se distinguía de cualquier otro sitio, la presión se leía en una tabla de colores sin ninguna herramienta, y 621 páginas repetían el mismo bloque con 6 compresores de Amazon.
El desafíoDarle una cara nueva sin resignar lo ganado. Cuando un sitio depende de Google, mover direcciones o borrar páginas equivale a arrancar de cero.
02 · Contexto
Trabajamos sobre una copia de seguridad, en una computadora local, sin alterar la base de datos.
03 · Qué hicimos
Revisamos páginas, plugins y datos, y presentamos tres caminos posibles en un prototipo que se podía recorrer.
Un tema hecho a medida, llamado «Instrumento», con sus plantillas, la herramienta interactiva y el neumático en 3D.
Interpretamos las tablas viejas, corregimos errores y publicamos el sitio como archivos estáticos.
04 · Decisiones
Arquitectura
Resolvimos la misma página real de tres maneras distintas para comparar. Ganó el tema propio: permite decidir cada detalle de cada plantilla, carga solo lo que se usa y deja el diseño anterior instalado, por si hace falta volver con un clic.
Descartamos: Retocar el tema que había (la experiencia seguía igual) o usar un tema de bloques de WordPress (menos libertad para la herramienta interactiva).
Datos
El diseño nuevo toma el contenido tal como estaba, tablas viejas incluidas, y de ahí saca motores, medidas y presiones. Ni el contenido ni las direcciones cambian, y todo se puede deshacer.
Descartamos: Pasar las 613 tablas a un formato nuevo: quedaba más ordenado, pero con riesgo y sin ninguna mejora para quien visita el sitio.
Interfaz
El neumático de la portada se dibuja con Three.js, sin modelos ni imágenes, y toma la medida del auto que se busca. Es lo que distingue al sitio, y casi no suma peso.
Descartamos: Bajar un modelo 3D ya hecho: pesa más y se ve genérico.
Contenido
La herramienta «Tu neumático a escala» calcula diámetro, flanco, circunferencia y vueltas por kilómetro a partir de la medida, por ejemplo 225/40 R18. Ninguna de las 613 fichas lo mostraba, y se logró sin escribir contenido nuevo.
Rendimiento
Para buscar entre 607 modelos hacen falta sus datos. En lugar de recorrer las 613 páginas con cada visita, el índice se arma una sola vez y queda guardado 12 horas.
Publicación
El sitio se publicó como HTML: no necesita PHP ni base de datos, se aloja gratis y no requiere mantenimiento.
05 · Proceso
Listado de las 746 páginas, de los plugins y de los datos, más capturas de cómo se veía todo.
La ficha del Audi A3 armada de tres formas distintas. La elegida fue el tema propio.
Primero se probó el neumático 3D con los manómetros, ya con los datos reales de 607 modelos.
Dos columnas en pantallas grandes, sin anuncios ni productos de Amazon.
El 3D se sumó al tema junto con el buscador de 607 modelos y la grilla de 74 marcas.
Cada tipo de página recibió su propio diseño; ninguna quedó genérica.
Fotos, plugins que chocaban entre sí y el encabezado en el celular.
Salida en HTML estático, sin anuncios ni medición de prueba.
06 · Problemas resueltos
Problema
32 páginas mostraban la foto en blanco, como si la imagen estuviera rota.
Solución
Al compararlas con sus originales vimos que las 32 fotos estaban sanas: solo faltaban las versiones chicas. Las volvimos a generar a partir del original, sin subir ningún archivo.
Problema
Dos plugins modificaban todas las imágenes para cargarlas de a poco, y uno anulaba al otro.
Solución
Desactivamos esa opción en ambos. El diseño nuevo ya usa la carga diferida que trae el propio navegador.
Problema
En las 12 reseñas no se veía el producto, porque el plugin que armaba esa tarjeta ya no estaba.
Solución
La información seguía guardada en la página. Un filtro la toma antes de que WordPress muestre la reseña y vuelve a armar la tarjeta.
Problema
En el índice, 3 artículos figuraban como si fueran marcas.
Solución
Ahora solo cuenta como marca una página que tiene modelos adentro. Quedaron las 74 marcas reales, en vez de 78.
Problema
En el celular, la foto de arriba se cortaba y el título quedaba encima del auto.
Solución
La foto pasó a cubrir toda la sección con un degradado por encima, y el texto se lee bien en cualquier pantalla.
07 · Antes y después
Deslizá para comparar y elegí qué página ver.
08 · Resultados
Lighthouse de una ficha de modelo publicada (la misma plantilla de las 613)
09 · Tecnología
Hablemos
Le damos una cara nueva y cuidamos las posiciones que ya ganaste. Te respondemos dentro de las próximas 24 horas.