Sportlife

Cadena de gimnasios

Nueva identidad digital para una cadena de gimnasios, en WordPress solo con widgets y plugins hechos a medida.

Tipo: Sitio web y landings de sede
Estado: En iteración continua
Mi aporte: Diseño, desarrollo e integraciones
Año: 2025
Herramientas: Figma · WordPress · PHP · JavaScript · CRM y marketing

Hero de Sportlife: titular «Comienza hoy y transforma tu vida en Sportlife» sobre fotografía de una clase, con botón «Obtén tu Free Pass». — Fig. 01Sitio implementadoPrimer viewport en desktop.

01Resumen

Sportlife es una cadena de gimnasios grande y reconocida que renovó su identidad visual y necesitaba que su presencia digital la reflejara. El sitio reúne la captación de la prueba gratuita, los planes, la búsqueda de sedes y una landing propia para cada sede, con planes, equipamiento, horarios y contacto.

Vista general de la home completa, dividida en tres columnas. — Fig. 02Sitio implementadoLa home completa, en tres columnas que se leen de izquierda a derecha.

02Mi participación

Rol y alcance: Participé en todo el proceso: diseño UX/UI, desarrollo de widgets y plugins, implementación e integraciones.
Colaboración: Proyecto realizado en Agencia Böll, en iteración continua con el cliente.
Entregables: Diseño del sitio y de las landings de sede
Widgets y plugins a medida en PHP y JavaScript
Formularios integrados a CRM y marketing
Iteraciones de mejora y optimización

03El problema

Llevar una identidad nueva a un sitio con muchas sedes y una conversión principal exigente —la prueba gratuita pide RUT, fecha de nacimiento, sede y fecha de inicio—, sin que el sitio se volviera pesado con cada nueva función.

Seguir en WordPress, pero sin plugins genéricos que sobrecarguen el sitio.

04Decisiones clave

Cada decisión se lee como necesidad → decisión → efecto. «Esperado» indica la intención de diseño, no un resultado medido.

Decisión 01

El Free Pass en tres puntos del recorrido

Necesidad: Que la prueba gratuita esté a mano desde cualquier punto de la home.
Decisión: Llevé la oferta a la barra superior, al botón del hero y a un formulario completo en la home, «Vive la experiencia».
Efecto esperado: No depender de una sola ubicación para llegar a la conversión.

Formulario «Vive la experiencia · Entrena 3 días gratis» con campos de nombre, RUT, fecha de nacimiento, correo, celular, sede y fecha de inicio. — Fig. 03Sitio implementadoFormulario del Free Pass en dos columnas, con aceptación de términos.

Decisión 02

Sedes por región

Necesidad: Mostrar varias sedes sin convertir la home en un listado.
Decisión: Combiné un selector de región con un carrusel de sedes; cada tarjeta muestra fotografía, nombre, dirección y acceso a su landing.
Efecto esperado: Encontrar la sede propia en pocos pasos.

Selector de región y carrusel con las sedes Pie Andino, Los Trapenses, Vitacura y Puente Nuevo. — Fig. 04Sitio implementadoSelector de región y carrusel de sedes.

Decisión 03

Horarios de clases por día en cada sede

Necesidad: Que un socio planifique su semana sin descargar un PDF de horarios.
Decisión: En la landing de sede organicé las clases por día con pestañas; cada tarjeta muestra clase, horario y sala.
Efecto esperado: Consultar el horario del día en un paso.

Sección «Horarios de clases» con pestañas de lunes a sábado y tarjetas de Funcional, Extreme Training, Pilates y Zumba. — Fig. 05Sitio implementadoPestañas por día y tarjetas con horario y sala.

Otros detalles

Hero de la landing de sede: «Lleva tu entrenamiento a otro nivel en Sportlife Purísima». — Fig. 06Sitio implementadoLanding de sede: hero con metros, equipamiento y clases.

Plan anual de sede única con precio mensual, beneficios y marcas de máquinas. — Fig. 07Sitio implementadoPlan de la sede y marcas de equipamiento.

05Del diseño a la implementación

Aunque el sitio está en WordPress, todo lo que se ve está construido con widgets y plugins propios en PHP y JavaScript.

Widgets a medida para cada sección: hero, planes, sedes, horarios, galerías y testimonios.
Formulario Free Pass con validación de RUT y fechas, integrado a CRM y plataformas de marketing.
Landings de sede generadas con los mismos componentes.
Iteraciones constantes de mejora y optimización.

06Resultado y aprendizaje

Entregado: Sitio y landings de sede con la nueva identidad, en evolución continua.
Observado: Cada mejora se suma como componente propio, sin agregar plugins de terceros ni código que el sitio no usa.
Aprendizaje: Un sitio que itera constantemente necesita componentes propios: cuando cada sección es un widget hecho a medida, sumar una sede o cambiar un formulario no rompe nada ni agrega peso. Iterar con el cliente me enseñó a diseñar pensando en la siguiente versión, no solo en la entrega.