Caso de Estudio Landing Page · Web Design · Vanilla JS
Knockout Training Center

Knockout Training Center

Propuesta de plataforma digital para un gimnasio de artes marciales afiliado a WAKO con campeones activos. HTML5, CSS3 y Vanilla JS puros, con IA como herramienta de diseño y desarrollo.

HTML5 · CSS3 Vanilla JS Web Design No-framework

Rol

Web Designer & Dev

Tipo

Landing Page

Stack

HTML · CSS · JS

Desafío

Campeones sin visibilidad global

Knockout tiene campeones avalados por WAKO y más de ocho disciplinas activas. Pero toda su comunicación vivía en redes sociales. Sin presencia web propia, esos campeones eran invisibles para promotores internacionales y medios de otros países.

Mi Rol

Web Designer & Developer

Investigación de marca, dirección de arte, diseño de interfaces y arquitectura de información. Diseño web end-to-end orientado a la conversión.

Resultado

Sitio live en producción

Landing page deployada en Netlify con dominio personalizado, fully responsive, con efectos visuales que reflejan fielmente el ADN del gym.

Resumen del Proyecto

Knockout Training Center es un gimnasio de artes marciales ubicado en Santa Cruz de la Sierra, Bolivia, que ofrece disciplinas como Muay Thai, Boxing, MMA y más. El reto fue construir una landing page de una sola página que capturara la identidad visual agresiva y cinematográfica del gym, usando exclusivamente HTML5, CSS3 y JavaScript Vanilla — sin frameworks ni dependencias externas — y entregando un sitio completamente responsive, rápido y con efectos visuales de alto impacto.

Investigación de Mercado

¿Cómo se ven los competidores?

Revisé la presencia digital de los principales gimnasios de Santa Cruz de la Sierra para identificar oportunidades de diferenciación.

Nova Team Training Center

59K seguidores · Sin sitio web

El gimnasio de MMA más activo de Santa Cruz en redes sociales. 59K seguidores en Facebook con reels constantes. Sin embargo, no tienen sitio web propio. Toda la información, precios y horarios están dispersos en publicaciones que el usuario tiene que rastrear.

Sin web Sin precios

UFC Gym Bolivia

Web corporativa · Sin precios visibles

Franquicia internacional con presencia en Santa Cruz (Ventura Mall). Tienen sitio web con horarios e instructores, pero los precios no están visibles y requieren contacto previo. El diseño es genérico, sin identidad visual fuerte más allá del branding UFC.

Diseño genérico Precios ocultos

Tiger Muay Thai

Referente internacional · Tailandia

El mayor campo de entrenamiento de Muay Thai y MMA del mundo. Su sitio web es el estándar a superar: pricing transparente, páginas de instructores con bio y trayectoria, galería profesional, multi-idioma y CTAs claros para inscripción internacional.

Referente mundial Multi-idioma

Hallazgo Clave

La oportunidad estaba abierta

Ningún competidor local tenía una landing page con identidad visual fuerte, precios visibles, diseño responsive y contacto directo por WhatsApp. Cubrir esos 4 puntos sería suficiente para destacar claramente en el mercado.

User Persona

¿Para quién diseñamos?

El usuario principal es el potencial nuevo miembro — alguien que evalúa opciones y necesita información clara antes de comprometerse.

Carlos M.

Carlos M.

24 años · Santa Cruz, Bolivia

Mobile-first

"Quiero ver el precio antes de ir, y si me interesa, contactar rápido desde el celular."

Objetivos

  • Ver precios sin tener que llamar

  • Conocer las disciplinas disponibles

  • Contactar rápido si le convence

Frustraciones

  • Sitios que no cargan bien en celular

  • Tener que llamar para saber el precio

  • Sin fotos del lugar ni del ambiente

Estructura del Sitio

Plataforma multi-página · 3 idiomas

Arquitectura pensada para dos audiencias: el visitante local que busca inscribirse, y el promotor internacional que quiere conocer a los campeones. Disponible en español, inglés y portugués.

01

Landing

Hero · Disciplinas · Stats · Precios

02

Campeones

Grid de peleadores WAKO

03

Bio Campeón

Perfil · Récord · Trayectoria

04

Eventos

Próximos · Pasados · Fechas

05

Galería

Fotos reales del gym

06

Contacto

Formulario + WhatsApp flotante

07

ES · EN · PT

Trilingüe · i18n completo

Design System

Identidad Visual

Tipografía

Títulos — Bebas Neue

KNOCKOUT TRAINING CENTER

Bold condensed · Impacto · Estilo de arena de combate

Cuerpo — Inter

Entrena con los mejores. Supera tus límites.

Medium · Legible · Alta densidad de información

Paleta de Colores

#000000

Negro Puro · Fondo principal

#CC0000

Rojo Fuego · CTAs, acento, efectos

#FFFFFF

Blanco · Texto, contraste máximo

Decisiones de Diseño

Diseño con propósito

Cada decisión visual y de experiencia responde a un objetivo concreto del negocio y del usuario.

Identidad visual agresiva

La paleta negro/rojo y la tipografía Bebas Neue no son arbitrarias — transmiten poder, energía y urgencia. Cada decisión visual refuerza el carácter combativo que define al gym y lo diferencia de la competencia.

Arquitectura de conversión

La estructura sigue un flujo persuasivo: impacto visual → oferta → credibilidad → precio → acción. Cada sección tiene un rol específico en el journey del usuario, reduciendo la fricción hasta el contacto.

Micro-interacciones con propósito

El slideshow muestra el ambiente real del gym (prueba social visual), los contadores construyen credibilidad, el efecto glitch comunica energía. Cada animación responde a una necesidad UX concreta, no es solo decoración.

Conversión sin fricción móvil

El botón flotante de WhatsApp siempre visible y el menú responsive eliminan las barreras de contacto en dispositivos móviles, donde la mayoría de usuarios del gym llega al sitio.

Resultado Final

El sitio en acción

Cada sección diseñada para cumplir un objetivo específico en el journey del usuario.

Galería del Proyecto

El gym en imágenes

Knockout Training Center
Knockout gym
Knockout gym
Knockout gym
Knockout gym
Knockout gym

Impacto

Resultados reales

El mayor impacto fue transformar un gimnasio sin presencia digital en una marca con identidad sólida y canal directo de conversión.

0 → 4 páginas

De no existir digitalmente a tener landing, página de campeones, perfiles individuales y agenda de eventos.

ES · EN · PT

Trilingüe completo: español para Latinoamérica, inglés para alcance global, portugués para el mercado brasileño de artes marciales.

Eventos

Agenda de combates con fechas, peleadores, lugar y resultado. Pasados y próximos, actualizable por el gym.

"

El cliente pasó de depender exclusivamente del boca a boca a tener una plataforma que comunica su identidad, muestra precios y convierte visitantes en potenciales miembros de forma directa y sin fricción.

— Resultado del proyecto · Knockout Training Center

Mi proceso en Knockout

Cómo trabajé este proyecto

Propuesta presentada · En implementación

Llevo más de cuatro años entrenando aquí. Conozco el lugar, a los entrenadores y a los campeones. Ese contexto cambia todo.

01

El contexto como ventaja

No vine como diseñador externo que llega a "entender el negocio". Llevo más de cuatro años entrenando Kickboxing y MMA en Knockout. Conozco los entrenadores, el ambiente, las disciplinas y a los campeones por su nombre. Eso le da al proyecto algo que ningún brief puede reemplazar: comprensión real del usuario.

02

La propuesta

El gym tiene 8 disciplinas, varios campeones avalados por WAKO y una comunidad activa, pero sin un espacio digital que lo cuente bien. La propuesta incluye secciones para cada disciplina y sus servicios, y lo más importante: páginas individuales para cada campeón con su trayectoria como peleador presentada en línea de tiempo.

03

Alcance internacional

Los campeones de Knockout quieren ser conocidos más allá de Bolivia. Por eso el sitio está planificado con soporte en tres idiomas: español, portugués e inglés. Que un promotor de Brasil o un competidor de Europa pueda ver el perfil de un peleador boliviano en su propio idioma no es un detalle, es parte del objetivo del proyecto.

04

Estado actual

El proyecto está en fase de negociación con el cliente. Lo que existe hoy es el prototipo funcional de la landing page, que ya demuestra la dirección visual y técnica del sitio completo. La versión final incluirá las páginas de campeones, el sistema multilenguaje y la integración de contenido actualizable.

IA como herramienta

Criterio humano, velocidad de IA

Apliqué herramientas de inteligencia artificial de forma deliberada en cada etapa del proyecto. No para reemplazar el criterio de diseño, sino para complementarlo y acelerar resultados con calidad profesional.

Claude

Estructuración del contenido, copy para secciones y arquitectura de información. Iteración rápida de propuestas de texto con dirección editorial propia.

Midjourney

Generación de imágenes de referencia visual para explorar la dirección de arte del sitio antes de trabajar con las fotos reales del gym.

Gemini

Research y análisis de la competencia local: gimnasios de la ciudad, sus sitios web, presencia digital y puntos débiles. Base de datos para las decisiones de diseño.

Figma AI

Exploración de variantes de layout y componentes dentro del entorno de diseño. Aceleración del proceso de ideación sin perder control sobre las decisiones finales.

"La IA no tomó decisiones de diseño. Redujo el tiempo entre intención y prototipo, permitiéndome iterar más rápido y dedicar más energía a lo que importa: la estrategia, la experiencia del usuario y el criterio visual."

Sebastian Delgado · Certified in AI Tools

Aprendizajes

Qué haría diferente

Vender el problema antes del diseño

El mayor obstáculo no fue el diseño, fue convencer a los dueños del gym de que tenían un problema que resolver. Surgió como iniciativa propia, no desde el cliente. Lo que aprendí: antes de diseñar una solución, hay que vender el diagnóstico. Un deck de negocio con datos de alcance hubiera acelerado la decisión.

Las páginas de campeones merecen más

La sección de campeones existe pero es poco ambiciosa. Con lo que sé hoy, la rediseñaría con videos de fondo, líneas de tiempo interactivas de cada trayectoria y extractos de entrevistas reales. Un peleador con perfil propio en la web tiene más chance de ser contactado por promotores internacionales que uno con solo una foto en Instagram.

El multilenguaje, desde el día uno

El soporte trilingüe (ES/EN/PT) está planificado pero no implementado desde el inicio. Si volviera a empezar, lo integraría desde el primer commit. Agregar internacionalización sobre un sitio ya construido siempre cuesta más que diseñarlo desde el principio pensando en múltiples idiomas.

Más proyectos

¿Viste todo lo que puedo hacer?

Regresa al portfolio para ver más proyectos o escríbeme si tienes algo en mente.