Knockout H2O – Lanzamiento de tienda Shopify con diseño de IA
Knockout H2O es una nueva marca de hidratación de Arizona fundada por expertos de toda la vida en el mundo del boxeo. Tenía una idea sólida, un logotipo de estilo tatuaje y una lata de aluminio negro mate, pero no tenía tienda ni apenas recursos de marca. Creamos su tienda Shopify en torno a una identidad negra y turquesa con letras góticas, utilizando imágenes y renders de vídeo generados con IA para los elementos visuales, de modo que el sitio web refleje la cultura de los combates de donde proviene la marca. La tienda aún está en desarrollo de cara a su lanzamiento en 2027, por lo que este artículo describe un trabajo en curso.
Resumen del proyecto
Knockout H2O fue fundada por Billy Sumrall y Ray Frye, quienes cuentan con más de 30 años de experiencia en el mundo de los combates. Su producto es agua ultrapura y repleta de electrolitos, enlatada en latas de aluminio negro mate de 16 oz con tapa de rosca, diseñadas para mantenerse helada desde el gimnasio hasta la noche de la pelea, tanto para luchadores como para entusiastas del fitness. Su misión, en sus propias palabras, es alimentar a luchadores y aficionados con una hidratación que pega más fuerte que cualquier cosa en una botella de plástico.
Llegaron a nosotros con un punto de vista claro y sin presencia digital: sin tienda en línea, con fotografía de producto limitada y pocos recursos de marca, en un mercado lleno de marcas de bebidas consolidadas. El único recurso sólido era el logotipo, una marca tipográfica turquesa inspirada en los tatuajes, que se convirtió en el punto de partida para todo lo demás. El encargo consistía en darle a la marca una tienda y una identidad visual que evocaran la cultura del boxeo y los tatuajes, en lugar de parecer una marca de agua genérica.
Objetivos
- Construir la tienda Una tienda Shopify con un tema Horizon personalizado, con una estructura sencilla (Inicio, Tienda, Acerca de, Contacto) y pensando en el rendimiento y la experiencia móvil.
- Crear un sistema de marca distintivo Una paleta de colores negra y turquesa, tipografía gótica y detalles inspirados en los tatuajes que reflejen la cultura de los combates.
- Producir los elementos visuales Imágenes de estilo de vida, renders de productos y vídeos creados con herramientas de IA para dotar a la tienda de los elementos visuales que le faltaban.
- Simplificar la compra Productos y tamaños de paquete claros, con un recorrido breve desde la llegada a la página hasta el carrito.
El diseño
Un escenario oscuro para un logotipo brillante
El logotipo es turquesa sobre una lata oscura, por lo que hicimos que toda la tienda fuera oscura. Los fondos casi negros permiten que el turquesa y el blanco lleven la página, y los encabezados utilizan un suave resplandor en el turquesa de la marca, con la segunda mitad de cada titular en blanco. Se lee como luces en una arena, y los mismos dos colores se repiten en botones, etiquetas e iconos para que la tienda siempre luzca como una sola marca.
La página de inicio
La página de inicio se abre con un banner principal a pantalla completa: la lata bajo un foco, el logotipo resplandeciendo a su lado, una acción principal (Tienda) y una secundaria (Acerca de). Debajo, bandas de marquesina deslizantes repiten los lemas de la marca ("Knockout, Dominate, Repeat"), seguidos de una sección de la marca y el área de productos.
Productos presentados como una alineación
El área de productos, "Hydration Arsenal", muestra las cuatro formas de comprar uno al lado de la otra: la botella individual, un paquete de 6, un paquete de 12 y una caja. Cada tarjeta muestra el render del paquete, su nombre y precio, con el precio de oferta junto al precio regular en los paquetes, y un botón brillante de "Comprar ahora" para que siempre haya una ruta corta hacia el proceso de pago. El trabajo sobre la página de producto y el sistema de suscripción para estos productos se cubre en un artículo aparte.
La página de colección
La colección de hidratación se abre con un banner de un ring de boxeo de fondo y dos botones que alternan entre hidratación y ropa. Debajo se encuentran los controles de filtro y ordenación y una cuadrícula de tarjetas de producto en el mismo estilo oscuro, con un interruptor entre una cuadrícula más grande y una más densa.
La página Acerca de: contar la historia
Una marca con una historia de fundador necesita un lugar para contarla. La página Acerca de se abre con un ring de boxeo bajo luces de escenario y luego cuenta la historia de Knockout: quiénes son los fundadores, para qué está diseñada la lata y los valores que representa la marca (rendimiento, poder, comunidad y excelencia), con los luchadores que la marca apoya.
En un teléfono
En móvil, el banner principal apila el logotipo, los dos botones y el eslogan en una sola columna, la navegación se colapsa en un menú con iconos de búsqueda, cuenta y carrito, y las tarjetas de producto se muestran dos por fila con el icono de añadir al carrito en cada imagen.
Cómo trabajamos
Descubrimiento y estrategia
Analizamos el mercado del boxeo y el fitness y las marcas de bebidas de la competencia, luego definimos el posicionamiento: una marca de estilo de vida deportivo premium con un aspecto gótico, en lugar de otra marca de agua limpia y clínica.
Sistema de diseño
Creamos el sistema de diseño en torno al logotipo: la paleta de colores negra y turquesa, los detalles góticos e inspirados en los tatuajes, los encabezados resplandecientes y los estilos de botones utilizados en todas las páginas.
Contenido y recursos
Debido a que la marca tenía poca fotografía, creamos imágenes de estilo de vida, renders de paquetes y vídeo con herramientas de IA, dirigidos a luchadores y entusiastas del fitness. Estos son los elementos visuales que se ven en el banner principal, las tarjetas de producto y los banners.
Desarrollo y optimización
Construimos la tienda sobre un tema Horizon personalizado con un diseño móvil primero, pensando en el rendimiento y con un recorrido claro hacia la compra. Todo el trabajo se realiza en una copia del tema, fuera de la tienda principal, y no se publica nada hasta que el cliente lo aprueba.
Resultado
Knockout H2O ahora tiene una tienda y un sistema de marca coherente, desde la paleta de colores negra y turquesa hasta los elementos visuales de estilo de vida, para una marca que comenzó sin presencia digital. La tienda aún se está terminando y no es pública todavía, por lo que no hay resultados que informar. El lanzamiento está previsto para 2027, y el trabajo de conversión en las páginas de producto continúa en el artículo relacionado.
