Proyecto de re-diseño y desarrollo. Caso de estudio
Este caso de estudio detalla el proceso y los resultados del rediseño completo de la web de Hiit Club.
¿Qué es HIIT CLUB?
HIIT Club es una cadena de gimnasios en Ecuador especializada en entrenamientos de High-Intensity Interval Training (HIIT), que combina intervalos cortos de alta intensidad con periodos de descanso o baja intensidad. HIIT Club ofrece clases grupales dirigidas por entrenadores profesionales, con rutinas dinámicas que incluyen ejercicios funcionales, cardio y fuerza.
¿Cuál era el objetivo?
El objetivo principal de HIIT Club era ampliar su experiencia y metodología de entrenamiento al mundo digital, creando un gimnasio en línea que permitiera ofrecer planes de entrenamiento personalizados. Aunque HIIT Club ya contaba con un avance significativo en su proyecto (incluyendo wireframes y una base de investigación), mi trabajo se basó en revisar, iterar y mejorar lo existente, para poder comenzar con el desarrollo.
¿Cómo fue el proceso?
I
Revisar y empatizar
Analicé los entregables previos para comprender el contexto, los objetivos del negocio y las necesidades.
II
Redefinir el problema
Ajusté y senté los problemas clave para enfocar el rediseño en optimizar la experiencia del usuario.
III
Idear y mejorar
Generé nuevas propuestas de diseño priorizando la usabilidad, la estética y la alineación con los objetivos de HIIT Club.
IV
Prototipar
Desarrollé prototipos de alta fidelidad basados en lo existente, incorporando las mejoras.
V
Testear y validar
Validé las propuestas con pruebas de usabilidad para validar su efectividad y ajusté el diseño final.
Escenario a rediseñar
Comencé a conocer a los usuarios
Me tomó demasiado tiempo completar el registro, hay demasiados pasos innecesarios.
No encuentro la opción para cambiar mi plan de suscripción.
No me quedó claro qué pasará después de que termine mi período de prueba.
No hay una sección de preguntas frecuentes donde pueda encontrar más información.
Mejorando el diseño con bocetos
Validando con prototipos de media fidelidad
User flows
Desafío de Desarrollo: Integración de Nuvei como método de pago
Una de las principales necesidades de parte de mi cliente era utilizar Nuvei como método de pago. Nuvei es una empresa de tecnología financiera que ofrece soluciones de pago globales para negocios en línea y físicos perimitiendo procesar pagos con múltiples opciones.
Sin embargo, Nuvei no ofrecía soporte para pagos recurrentes, lo que significaba que debía desarrollarlo yo mismo utilizando la API de Nuvei y así poder realizar cobros recurrentes, gestionar suscripciones y garantizar la seguridad y fiabilidad de las transacciones.
Las principales características que había que tener en cuenta eran:
Pagos recurrentes automatizados
Que la solución pudiera gestionar suscripciones y pagos recurrentes, manejar los intentos fallidos, gestionar la expiración tarjetas y enviar notificaciones por correo.
Escalabilidad y flexibilidad
Era crucial que la solución fuera escalable y flexible, permitiendo adaptaciones al crecimiento del negocio y la inclusión de nuevas funcionalidades.
Experiencia de usuario fluida
El proceso debía ser lo más intuitivo posible y sin pasos innecesarios; respetando los estándares y asegurando una experiencia agradable y fluída.
Gestión de impuestos
La pasarela de pagos debía ser capaz de calcular y gestionar automáticamente los impuestos según la ubicación del usuario y la normativa vigente.
Cumplimiento de Normativas
Debía garantizar que se cumplan todas las normativas para proteger a los usuarios y evitar sanciones y problemas legales.
Guardado de datos
Debía asegurarme de no guardar ningún tipo de dato de los usuarios que Nuvei no me proporcionara a través de su API.
Integración con Woocommerce
Debía asegurarme de que la solución pudiera aprovechar todas las funcionalidades de Woocommerce base así y sus extensiones.
Investigación
No era un experto en pasarelas de pago ni en seguridad de datos, así que dediqué tiempo a leer artículos especializados, revisar documentación técnica y consultar con profesionales del sector. Gracias a esto pude entender mejor cómo manejar datos sensibles, los requisitos de PCI DSS, la encriptación de tarjetas y las mejores prácticas para evitar fraudes.
Ideación
Exploré modificar directamente WooCommerce, crear templates personalizados, y evalué la posibilidad de crear una API intermedia. Sin embargo, investigando me di cuenta de que WooCommerce ya tenía casi todas las funcionalidades que necesitaba: procesamiento de pagos, gestión de cobros, lógica de suscripciones y funciones cron para renovar automáticamente los pagos. Esto me llevó a la idea más eficiente: crear un plugin que se integrara perfectamente con WooCommerce, aprovechando su infraestructura.
Comencé a codear las ideas
Para desarrollar esta herramienta utilicé las siguientes tecnologías:
Resultado final: Nuvei payment gateway subscriptions plugin
Impacto
¿Eres de Ecuador y buscabas integrar Nuvei para vender subscripciones? Ahora puedes hacerlo!
Diseño final de HIITCLUB
Sistema de diseño
Componentes
Logotipo
Botones
Paginación
Iconografía
Header
Inputs
Memberships
Training card
Section title
Featured card
Footer
FAQ
Alerts
Llevando la experiencia HIIT Club al mundo digital
El objetivo de HIIT Club era expandir su metodología de entrenamiento al entorno digital, ofreciendo un gimnasio en línea con planes personalizados, asesorías virtuales y contenido exclusivo. A partir de una base ya existente, mi trabajo consistió en revisar, iterar y optimizar cada aspecto para garantizar una experiencia fluida, escalable y alineada con las necesidades de los usuarios.
Si quieres explorar el resultado final, accede al prototipo en Figma.
Te gustó el caso de estudio? Te invito a ver los demás!
Diseño + programación
Humana
Diseño
Corazones peludos
Featured Business Case
Alquiler Argentina
Diseño