NESCAFÉ® Dolce Gusto México

Home, páginas de campaña y páginas de contenido de la tienda en línea de la marca.

Rol: Diseño UX y UI, visuales de campaña
Alcance: Home de la tienda en línea, landings de campaña, páginas de contenido
Año: 2020–2024
Cliente: NESCAFÉ® Dolce Gusto México, a través de Motivus

El problema: La tienda en línea de la marca necesitaba una home, landings de ventas y de temporada, y páginas de contenido, con campañas que rotan sin cambiar el resto de la home.
Mi rol: Diseño UX y UI y visuales de campaña, a través de Motivus, de 2020 a principios de 2024.
Qué decidí: Mantener el carrusel de banners permanente separado de las tarjetas de promociones de temporada.
Dónde está: Todo se lanzó. Dejé la cuenta a principios de 2024 y estas páginas ya no están en vivo con este diseño.

Contexto y mi rol

Cada campaña empezaba con un brief del cliente para una promoción, un lanzamiento o una temporada.

Cómo lo abordé

Yo proponía direcciones visuales, el cliente elegía una y yo diseñaba el resto hasta el handoff a desarrollo. La home empezó como un wireframe. Las fotos de producto y de marca son de Nestlé.

La solución

Alrededor de la home diseñé landings de ventas como Hot Sale 2023, promociones de temporada y páginas de contenido como Coffee Shop at Home y el reciclaje de cápsulas.

Wireframe en escala de grises, en desktop, de la página de inicio de una tienda de café en línea, con bloques etiquetados para un carrusel de banners, tarjetas de promociones de temporada, un video y un carrusel de bebidas. — Wireframe de la home, octubre de 2023: primero la estructura.

Página de inicio de la tienda Dolce Gusto en desktop, con un banner promocional rosa, tres mosaicos de promociones de producto, una sección magenta de Coffee Shop at Home con un video y una fila morada de categorías de bebidas. — La misma home con el diseño visual aplicado.

Landing larga en desktop en naranja y rojo, con una fila de ventas relámpago de cafeteras con descuentos y temporizadores de cuenta regresiva, un banner de niveles de descuento por cápsulas, tarjetas de combos y cuadrículas de producto con botones de agregar al carrito. — Landing de Hot Sale 2023, desktop: ventas relámpago, descuentos por volumen y combos.

Versión móvil de la landing de Hot Sale, que apila el hero, íconos de categorías, tarjetas de ventas relámpago, niveles de descuento y cuadrículas de producto en una sola columna. — La misma landing a 390 px.

Página larga en desktop con un hero que dice «Disfruta tu Coffee Shop en casa», un diagrama circular de beneficios de la máquina, un carrusel de sabores, una fila de cafeteras y una sección numerada con los pasos de preparación. — Coffee Shop at Home, una página de contenido de marca.

Página en desktop con tema verde, con un proceso de reciclaje en tres pasos, una fila de fotos, tarjetas de contenido y un mapa con pestañas de filtro y una lista de puntos de acopio. — Página de reciclaje de cápsulas con un localizador de puntos de acopio.

Entrega y estado

El equipo de desarrollo del cliente construyó las páginas.