Caso de estudio · UX/UI y desarrollo
Rediseño y desarrollo de la plataforma online de HIIT Club
HIIT Club, uno de los gimnasios más grandes de Ecuador, quería un gimnasio online con planes personalizados. Revisé y mejoré la experiencia antes de desarrollarla, y programé los pagos recurrentes con Nuvei: un plugin de WooCommerce que acabó comprando Nuvei.
Mi papel
UX/UI y desarrollo
Dónde
Vaui Design · 2021 — 2024
Tipo
Gimnasio online con membresías
Stack
Figma · WordPress · WooCommerce · PHP · JavaScript
HIIT Club es una cadena de gimnasios de Ecuador especializada en entrenamiento interválico de alta intensidad, con clases dirigidas por entrenadores. Querían extender su metodología a un gimnasio online con planes personalizados.
Ya existían wireframes y una primera investigación. Mi papel fue revisarlos, iterarlos y mejorarlos para que el desarrollo pudiera empezar sobre una base validada.
02 · Punto de partida
La plataforma anterior
Las pantallas de las que partí.
03 · Usuarios
Lo que frenaba a los usuarios
Registro largo
Demasiados pasos innecesarios antes de empezar a entrenar.
Cambiar de plan
No encontraban dónde cambiar su suscripción.
Fin de la prueba
No estaba claro qué pasaba al terminar el periodo de prueba.
Dudas sin respuesta
No había una sección de preguntas frecuentes.
04 · Ideas
Bocetos de la nueva interfaz
05 · Validación
Prototipos de media fidelidad
Validados con pruebas de usabilidad antes del diseño final.
06 · Flujos
Flujos de usuario
Los recorridos principales de la plataforma, revisados antes del desarrollo.
El cliente exigía cobrar con Nuvei, que no ofrecía suscripciones. En lugar de cambiar de pasarela, construí los pagos recurrentes sobre su API como un plugin de WooCommerce, con reintentos, avisos por email e impuestos por ubicación.
La integración llamó la atención de Nuvei y les vendí la herramienta.
08 · Requisitos
Lo que tenía que resolver la integración
Pagos recurrentes
Suscripciones y cobros recurrentes, con reintentos de pagos fallidos, tarjetas caducadas y avisos por email.
Escalable
Preparada para crecer con el negocio y sumar funciones nuevas.
Sin pasos de más
Un proceso de pago intuitivo y sin pasos innecesarios.
Impuestos
Cálculo automático de impuestos según la ubicación del usuario y la normativa.
Normativa
Cumplir la normativa de pagos para proteger a los usuarios.
Datos
No guardar ningún dato del usuario que no devolviera la API de Nuvei.
WooCommerce
Aprovechar WooCommerce y sus extensiones.
No era experto en pasarelas de pago ni en seguridad de datos, así que estudié documentación técnica y artículos especializados, y consulté con profesionales del sector: datos sensibles, requisitos de PCI DSS, cifrado de tarjetas y prevención del fraude.
Valoré modificar WooCommerce, crear plantillas propias o montar una API intermedia. WooCommerce ya tenía casi todo lo necesario —procesamiento de pagos, lógica de suscripciones y tareas cron para renovar los cobros—, así que la opción más eficiente fue un plugin integrado en su infraestructura.
10 · Stack
Tecnologías del plugin
HTML5
CSS3
PHP
JavaScript
GitHub
Git
11 · Resultado
Nuvei payment gateway subscriptions
El código, el checkout, la cuenta del cliente y los ajustes en WooCommerce.
El código del plugin.
WooCommerce: un método de pago más, con soporte de pagos recurrentes.
Ajustes: modo de pruebas y credenciales.
Ajustes de producción, impuestos y email de soporte.
Mi cuenta: el cliente gestiona sus tarjetas para los cobros recurrentes.
Confirmación antes de eliminar una tarjeta.
Checkout: pago con una tarjeta nueva, sin salir de la web.
Checkout: pago con una tarjeta guardada.
12 · Impacto
Lo que aportó el plugin
Nuvei compró la herramienta
La integración llamó la atención de Nuvei y les vendí el plugin.
Cobros automáticos
Las renovaciones se cobran con la tarjeta guardada, sin que el cliente vuelva a escribirla.
Una necesidad real
Muchas tiendas online de Ecuador querían cobrar suscripciones con Nuvei y no tenían cómo.
Menos errores
El panel, el registro de pedidos y los emails personalizados reducen errores y mejoran la comunicación con los clientes.
13 · Diseño final
Diseño final
14 · Sistema de diseño
Sistema de diseño
15 · Componentes
Componentes
Logotipo
Paginación
Botones
Iconografía
Header
Inputs
Membresías
Tarjeta de entrenamiento
Título de sección
Tarjeta destacada
Footer
Preguntas frecuentes
Alertas
16 · Prototipo
El prototipo completo en Figma
Partí de una base existente y la revisé, iteré y optimicé para que el gimnasio online fuera fluido y escalable, con planes personalizados y pagos recurrentes.
Siguiente caso
WPilot Commerce →
Siete módulos para WooCommerce: reservas, depósitos, checkout, emails y partners.