Todos los proyectos · Shakira Perfumes / Puig
Shakira Perfumes
Más de diez años, tres versiones, una marca que no puede perder su carácter.
- Cliente
- Shakira Perfumes / Puig
- Año
- 2015 – actualidad
- Sector
- Perfumería / Lujo
- Rol
- PM · UX-UI · Desarrollo
- Versiones
- 3 sites
- Formato
- Web de marca · E-commerce
Contexto
Durante casi una década, Cyberdelia acompañó la evolución digital de Shakira Perfumes — una línea de fragancias con presencia global que necesitaba una experiencia digital a la altura de su marca.
El reto no era solo rediseñar un site. Era mantener la coherencia de una identidad visual muy fuerte a través de tres generaciones de tecnología web, adaptándose a nuevos comportamientos de consumo, nuevos mercados y nuevas colecciones — sin perder el carácter de la marca.
Pantallas
Los datos que aparecen están anonimizados.
Home
Campaña a pantalla completa, perfumes destacados en carrusel y la voz de Shakira como cita.
Página de colección · Dance
Cada línea alterna una imagen de ambiente con un bloque de color que la explica y, debajo, sus fragancias con etiquetas de novedad o edición limitada.
Minis
La colección en formato de 30 ml, con un hero de producto y la parrilla de las seis fragancias.
¿Cuál es tu perfume?
El test pasa de una fila de círculos numerados a una experiencia a pantalla completa: barra de progreso, imagen de campaña fija a la izquierda y opciones visuales con selección clara.
Familias olfativas
Floral, frutal, oriental o gourmand: se eligen hasta dos.
Resultado
La fragancia recomendada con su afinidad, la pirámide olfativa y alternativas.
Home en móvil
La campaña y los destacados, pensados para el pulgar.
Menú
Colecciones en lista, tienda y test como accesos destacados, y las redes al pie.
Componentes
Las piezas que se repiten en todo el site: card de producto en reposo y hover, card de mini, bloque de colección, botones y newsletter.
Qué construimos
Colecciones
Cada línea alterna una imagen de ambiente con un bloque de color que la explica, y debajo sus fragancias con etiquetas de novedad o edición limitada.
Carrusel de producto
Los perfumes destacados en un carrusel con compra directa y acceso a la ficha.
Vídeo de campaña a sangre
El hero de cada campaña ocupa toda la pantalla, como en un spot.
Test «¿Cuál es tu perfume?»
Seis preguntas a pantalla completa con barra de progreso, opciones visuales y un resultado con afinidad, pirámide olfativa y alternativas.
Localizador de tiendas
Encontrar el punto de venta más cercano en cada mercado.
2015 — primera presencia digital
Primera versión
El punto de partida
La primera versión llegó cuando la marca necesitaba una presencia online coherente con la imagen global que ya tenía offline.
Catálogo de producto accesible, identidad visual sólida y una experiencia que funcionara en los mercados principales. Desktop-first, con una arquitectura de contenidos sencilla pero muy cuidada en el detalle visual.
- Stack
- HTML5 / CSS3 / jQuery
- Mercados
- ES, UK, FR, IT
- Enfoque
- Desktop-first
- Productos
- Línea inicial (4 fragancias)
2019 — nueva arquitectura, nuevo lenguaje visual
Rediseño mobile-first
El cambio
En 2019 el móvil ya superaba al desktop en los mercados clave. No bastaba un parche responsive: había que repensar la experiencia desde cero.
La nueva versión introdujo un sistema de diseño propio, animaciones de scroll, fichas de producto con más profundidad editorial y soporte para varias colecciones activas a la vez, con localización completa para 8 mercados.
Sistema de diseño
Componentes reutilizables, tipografía sistemática y tokens para adaptar la estética a cada campaña sin romper la coherencia.
Localización × 8
Precios, moneda, textos y assets visuales adaptados por región.
Performance
Carga inicial bajo 2s. Lazy-loading, CSS crítico inline y caché agresiva de estáticos.
2023 — rebuild completo en stack moderno
Versión actual
El reto
Nuevas colecciones, una identidad visual evolucionada y la experiencia inmersiva convertida en estándar del sector beauty.
Rebuild completo sobre Laravel y JavaScript vanilla, sin frameworks de frontend: hero cinematográfico con vídeo y transiciones de scroll, y fichas de producto más ricas — notas olfativas, ingredientes, historias de campaña. Con gestión de contenidos para que marketing tenga autonomía total.
- Stack
- PHP Laravel · JavaScript vanilla
- Mercados
- 12 con localización completa
- Performance
- Core Web Vitals en verde · LCP < 1.8s · CLS 0
- SEO
- Metadata por producto, sitemap, rich snippets y datos estructurados
Stack
- PHP
- Laravel
- JavaScript
Aprendizajes
Más de diez años y tres versiones enseñan más sobre producto digital que muchos proyectos desde cero. Mantener una marca fuerte mientras la tecnología cambia a tu alrededor exige decisiones de arquitectura que pocas veces se documentan bien.
La clave en cada iteración fue no asumir que lo que funcionaba antes seguía siendo válido. Cada rediseño partió de datos reales de comportamiento — qué visitaban, dónde abandonaban, qué buscaban — y no de suposiciones estéticas.
Hoy el site soporta el tráfico de campañas globales, el equipo de marca opera con total autonomía y la coherencia visual sigue intacta desde el principio.
Sistema visual
Blanco de galería, negro de lujo y el color lo pone el frasco. Un color por línea: burdeos para Midnight, rosa para Dance, oro para Classics.
- Negro#000000
- Blanco#FFFFFF
- Rosa regalo#F3D6CF
- Oro#D8B24C
- Arena pie#D9D3CC
- Shakira
Cormorant
Logotipo y citas
- DANCE
Montserrat
Títulos espaciados y texto