Zdrinks

2026

  • web
  • uxui
  • branding
Zdrinks
Home de Z Drinks: hero «Toda la energía en un bote por 0,57 € la toma», categorías (Fresh Break, Energía, Batidos, Hidratación, Descanso) y carrusel de más vendidos
Colección Z Drinks Energy: filtros por sabor, perfil y precio, grilla de packs con valoraciones y descuento, y banner del quiz «¿No sabes cuál es el tuyo?»
Ficha de producto en mobile: formatos (tubo, 10 muestras, 1 muestra), pestañas por línea, «Tu pack» con los sabores añadidos y grilla de sabores con botón Añadir
Carrito lateral «Tu cesta»: barra de progreso hacia envío gratis, shaker y regalo, producto con descuento, sugerencias y botón de pago seguro
Ficha de producto en desktop con armado de pack: selector de formato y sabores, barra de descuento por cantidad (-5%, -10%, -15%), compra única o suscripción y botón Añadir al carrito
Inicio del quiz «Encuentra tu match»: barra de progreso, seis preguntas rápidas, 10% en la primera compra y botón Empezar
Resultado del quiz «Tu match es…»: producto recomendado con compra única o suscripción, cantidad, frecuencia y otros packs que podrían gustarte
Inicio del quiz «Encuentra tu match» en mobile, con barra de progreso, botón Empezar y reseñas de la marca

Z Drinks es una marca española de bebidas energéticas en polvo, fundada en 2020, con más de 15 sabores, 0 g de azúcar, 200 mg de cafeína y 13 vitaminas. En este proyecto el foco fue que comprar sea claro: elegir el formato, sumar sabores y ver cuánto se ahorra en cada paso.

El centro de la tienda es el armado de pack. Se eligen los sabores por línea (Energy, Cream, Hydrize e Ignition), se ve lo que se va sumando y una barra de progreso muestra el descuento por cantidad (5%, 10% y 15%) con un aviso de cuánto falta para el próximo tramo. Se puede comprar una sola vez o suscribirse, con envío gratis y descuentos que suben en cada pedido.

Para quien no sabe por dónde empezar, diseñé un quiz, «Encuentra tu match». Responde unas preguntas rápidas y la tienda le recomienda su bebida, con la opción de comprar una vez o suscribirse y un 10% en la primera compra. Tiene su propio recorrido en desktop y mobile, con el menú del header para poder salir en cualquier momento.

En lo visual, la tienda toma el lenguaje de la marca: base blanca y negra, verde lima en los botones de compra, magenta para los descuentos y tarjetas con borde negro y sombra dura. Todo diseñado sobre un sistema basado en Tailwind, con Inter y Prompt.

Proyecto realizado en colaboración con la agencia EMPACT

  • figma
  • photoshop

Empecemos tu proyecto

Contactar ahora