GlucoUp! – Rediseño web y optimización

Caso de estudio

La web original de GlucoUp! estaba desarrollada en WordPress, pero tras varios años en activo, arrastraba una estructura con demasiado código a medida. Aunque en su día buscaba ofrecer una web visualmente potente, con el tiempo se convirtió en un sistema rígido, excesivamente complejo y muy difícil de actualizar o mantener para el cliente.

El desafío:

El desafío consistió en rehacer la web desde cero utilizando WordPress + Avada, buscando un equilibrio perfecto: mantener el impacto visual, limpiar el ecosistema técnico, replicar al milímetro las secciones que funcionaban y rediseñar los puntos críticos bajo una premisa fundamental: crear un sitio modular, limpio y sumamente fácil de actualizar.

El proceso:

Fase 1: Auditoría técnica y limpieza

Se realizó una auditoría profunda del sitio web preexistente. Se analizaron uno a uno todos los plugins para determinar si eran prescindibles, si generaban conflictos de rendimiento o si se podían optimizar con alternativas más ligeras. Esto nos permitió eliminar código obsoleto y liberar al servidor de cargas innecesarias.

Fase 2: Análisis de UX/UI y puntos críticos

Identificamos los principales puntos de fricción que afectaban directamente a las ventas y a la navegación del usuario:

  • ⚠️ Página de inicio sobrecargada, con exceso de estímulos simultáneos.
  • ⚠️ Un menú de navegación confuso y con problemas de accesibilidad.
  • ⚠️ Un proceso de carrito y checkout mal estructurados y con demasiados pasos manuales.
  • ⚠️ Un sistema de filtrado poco escalable que ocupa demasiado espacio útil en el catálogo.

Fase 3: Desarrollo desde cero (WordPress + Avada)

Se levantó una instalación limpia de WordPress y se desarrolló el sitio desde cero utilizando el constructor modular Avada. Las páginas corporativas y de catálogo que funcionaban se rehicieron respetando su diseño original, pero estructuradas de forma limpia para que el cliente pueda editarlas en el futuro sin tocar una sola línea de código.

Fase 4: Implementación de nuevas funcionalidades y CRO

Con la base técnica estabilizada, nos enfocamos en el rediseño estratégico de los componentes clave de conversión y experiencia de usuario.

Página de inicio

Realizamos un diseño de narrativa vertical estratégica estructurada bajo patrones de diseño UX de alta conversión.

Implementamos un corte visual en el banner de portada para incentivar el scroll. A partir de ahí, la información se dosifica estratégicamente: introduciendo primero elementos de social proof y confianza, continuando con secciones de productos de Novedades y Best Sellers intercaladas con información sobre beneficios y fidelización (como la comunidad Up! Club).

Optimización de la cabecera

Sustituimos el antiguo menú lateral de tres iconos con transparencia que provocaba errores de pulsación (miss-clicks), por una cabecera fija que acompaña al usuario al hacer scroll, permitiendo un acceso rápido a las secciones principales de la tienda.
Así evitamos que el usuario se pierda en la web y mejoramos el flujo de compra inmediato desde cualquier pantalla.

Catálogo inteligente con filtros avanzados

El sistema antiguo colapsaba la pantalla con desplegables horizontales masivos. Se rediseñó por completo moviéndolos a una barra lateral y añadiendo el filtro por sabores (la mayor demanda de los usuarios debido al amplio catálogo), además de optimizar los existentes (formatos y cantidad exacta de glucosa/HC).

Enfoque Mobile-First

Toda la interfaz se adaptó para pantallas táctiles. El caótico sistema de filtros se condensó en un intuitivo botón flotante de Filtros que abre un menú limpio y optimizado, permitiendo una navegación cómoda, rápida y adaptada al uso con una sola mano.

Carrito

En ordenador se implementó una estructura compacta a doble columna que maximiza el espacio y evita el scroll. En móviles se priorizó la accesibilidad táctil, manteniendo el desglose de costes y el botón de Finalizar compra fijos abajo para asegurar una conversión inmediata.

Gamificación del envío gratis

En lugar de un banner de texto plano, se integró una barra de progreso visual interactiva en el carrito que muestra dinámicamente cuánto le falta al usuario para alcanzar los 50€ y obtener el envío gratuito, incentivando de forma visual el aumento del ticket medio (AOV).

Finalizar compra

En ordenador se concentró todo el proceso en una única página fluida dividida en bloques, manteniendo el resumen del pedido siempre visible a la derecha. En dispositivos móviles se optimizó la jerarquía visual condensando el resumen del pedido en un desplegable superior para limpiar la interfaz y facilitar el rellenado rápido de los datos.

Autocompletado de dirección

Para minimizar la fricción en el momento más crítico de la compra, se implementó el relleno automático de dirección. Esto reduce drásticamente el tiempo que el usuario pasa rellenando el formulario y evita errores de entrega, mejorando la tasa de conversión global del checkout.

Modelo de suscripción

Se integró una funcionalidad para automatizar compras recurrentes mensuales con descuento, impulsando la retención de clientes.

Páginas explicativas dedicadas

Para apoyar estos lanzamientos, se crearon landings específicas, muy visuales y didácticas, que explican paso a paso el funcionamiento del sistema de puntos (Up Club) y el proceso de la suscripción mensual (Suscríbete y ahorra).

Up! Club
Suscríbete y ahorra

El resultado:

Al reconstruir la web sobre un ecosistema estandarizado y optimizar los puntos calientes del embudo, el cliente obtuvo:

  • Una web 100% autogestionable y fácil de actualizar sin riesgo de romper el diseño.
  • Una infraestructura ligera, limpia de plugins redundantes y optimizada en rendimiento.
  • Una experiencia de usuario (UX) fluida que fomenta la compra recurrente y aumenta el valor de cada carrito.