← Todos los trabajos
Landing Caso de estudio · 2025

Landing Page TruFragrance Cannes 2025

Landing page promocional personalizada para Cannes Lions 2025 con sistema interactivo de copia de código de descuento y diseño optimizado para códigos QR para asistentes de conferencias.

Ver sitio en vivo ↗
§01 · Resumen
Stack
  • WordPress
  • Gutenberg
  • JavaScript
  • HTML/CSS
Rol
  • Frontend Development
  • UX Design
  • Technical Implementation
Plazo
  • May 2025
Cliente
  • TruFragrance Group
Alcance
  • Construcción de bloque HTML Gutenberg personalizado con funcionalidad interactiva de copia de código de descuento
  • Implementación de diseño mobile-first amigable para códigos QR para distribución en conferencias
  • Creación de enlaces directos a 3 tiendas Shopify de marcas con códigos de descuento auto-aplicados
  • Diseño de página promocional elegante y acorde a la marca, coincidiendo con la estética de TruFragrance
§02 · Detalle

Una landing page promocional construida para la presencia de TruFragrance en el Festival Internacional de Creatividad Cannes Lions 2025. La página sirvió como tarjeta de presentación digital accesible vía códigos QR distribuidos en el evento, ofreciendo a los asistentes un descuento exclusivo del 40% en todas las marcas de TruFragrance.

Resumen del Proyecto

TruFragrance necesitaba una landing page limpia y elegante que pudiera accederse rápidamente en su stand de Cannes vía código QR, permitiendo a los asistentes del festival reclamar una oferta de descuento exclusivo en sus tres marcas de fragancias: Lake & Skye, Le Monde Gourmand (Gourmand Beauty) y Tru Western.

Implementación Técnica

Bloque HTML Gutenberg Personalizado — Construido como un bloque HTML personalizado dentro del editor Gutenberg de WordPress, permitiendo control completo del diseño con estilos inline, sin dependencias ni conflictos de tema, actualizaciones y mantenimiento fáciles, y rendimiento óptimo sin dependencias externas.

Sistema Interactivo de Código de Descuento — Implementación de un mecanismo sofisticado de copia de código con soporte dual de API de portapapeles (la API de Clipboard moderna con un fallback legacy execCommand): copia de código con un clic con retroalimentación visual, fallback automático para navegadores antiguos, interacciones táctiles optimizadas para móvil, y mensajes de éxito animados.

Navegación Multi-Marca — Creación de enlaces directos a la tienda Shopify de cada marca con el código de descuento pre-aplicado en la URL, de modo que el descuento del 40% se aplica automáticamente en el checkout — los usuarios solo hacen clic y compran:

  • Lake & Skye: lakeandskye.com/discount/CANNES40
  • Gourmand Beauty: gourmandbeauty.com/discount/CANNES40
  • Tru Western: truwestern.com/discount/CANNES40

Decisiones de Diseño

Enfoque Mobile-First — Dado el método de distribución por código QR, la página se diseñó mobile-first: tipografía fluida con clamp() para un escalado perfecto, alturas de botón de 60px amigables al tacto, espaciado responsivo usando unidades relativas al viewport, y un layout de columna única optimizado para scroll vertical.

Diseño Visual — Estética limpia y minimal que coincide con la marca sofisticada de TruFragrance, botón CTA de alto contraste para el código de descuento, botones elegantes con borde para la navegación de marcas, y un fondo suave para dar calidez sin distracción.

Características de Accesibilidad — Regiones ARIA live para anuncios de lectores de pantalla, estructura HTML semántica, altos ratios de contraste, soporte de navegación por teclado, y gestión de foco para las interacciones de copia.

Resultados

La landing page sirvió exitosamente como punto de contacto digital de TruFragrance durante Cannes Lions 2025: una primera impresión limpia y profesional para los asistentes del festival, un proceso de redención de descuento sin problemas, cero fricción desde el escaneo del QR hasta la compra, y una página fácil de actualizar para futuros eventos.

Relación Continua

Mantengo una relación de consultoría continua con TruFragrance, brindando soporte constante para nuevas implementaciones, asesoría técnica y ejecución de tareas según sea necesario. Esta landing page es un ejemplo de los proyectos de entrega rápida en los que colaboramos.

¿Tienes un proyecto así?