Todos los proyectos · Revlon Professional
Web de marca
Una marca global necesita una web a la altura de su posicionamiento premium.
- Cliente
- Revlon Professional
- Año
- 2018 – actualidad
- Sector
- Cosmética / Retail
- Rol
- PM · UX-UI · Desarrollo
- Formato
- Web corporativa B2B
- Audiencia
- Salones y estilistas
Resumen
Rediseñamos y desarrollamos la web corporativa internacional de Revlon Professional, una de las marcas de belleza profesional más reconocidas del mundo. El proyecto consistió en reconstruir por completo su presencia digital: expresión de marca premium, catálogo de producto multimercado y una arquitectura de contenidos que marketing puede gestionar sin depender de ingeniería.
Pantallas
Los datos que aparecen están anonimizados.
Home
Campaña, carrusel de producto, la app Pro Color World, blog, formación y las tres puertas de entrada al catálogo: color, cuidado y styling.
Componentes
Las piezas de la home aisladas: cada una funciona por sí sola y se combina en las plantillas de la web.
Concepto · Encuentra tu salón
Salones certificados con sus especialidades, valoración, horario y cita online, filtrables por ubicación, servicios y certificaciones.
Concepto · Feed de looks
Los trabajos de los salones certificados, en tiempo real: historias, publicaciones con su fórmula y tendencias.
Concepto · Ficha de curso
Nivel, temario por módulos, duración, certificación e inscripción, con los productos Revlon que se usan en el curso.
El problema
Revlon Professional tenía una presencia web que ya no estaba a la altura de la marca que representaba. La plataforma estaba técnicamente obsoleta, era difícil de actualizar y se quedaba corta para los mercados internacionales a los que debía dar servicio.
- Plataforma técnicamente obsoleta, con alto coste de mantenimiento e infraestructura frágil.
- Catálogo de producto gestionado a mano: cada actualización requería la intervención de un desarrollador.
- Sin arquitectura internacional unificada: mercados distintos, experiencias desconectadas.
- Experiencia móvil muy por debajo del estándar premium de la marca.
- Tiempos de carga lentos que perjudicaban el posicionamiento SEO y la conversión en mercados clave.
Objetivo
- Ofrecer una presencia digital premium, coherente con el posicionamiento de marca de Revlon Professional.
- Construir una capa editorial para que marketing gestione el contenido de forma autónoma.
- Diseñar un catálogo de producto multimercado escalable.
- Cumplir los objetivos de Core Web Vitals en todos los mercados internacionales clave.
Enfoque
Una arquitectura con CMS headless: flexibilidad editorial para el equipo de marketing y control del rendimiento para el equipo de ingeniería. Next.js se encarga del renderizado, el CMS del contenido, y la frontera entre ambos es limpia. Sin concesiones en ninguna dirección.
Qué construimos
Sistema de marca y editorial
Sistema visual trasladado con precisión a la web: tipografía, espaciado y patrones de interacción alineados con las guías de marca globales en todos los mercados.
Capa de CMS headless
Control editorial total para marketing: actualizaciones de producto, textos por mercado, contenido promocional, todo sin depender de ingeniería.
Catálogo de producto multimercado
Catálogo estructurado para mercados internacionales, con filtrado, búsqueda y lógica de disponibilidad regional. Escalable a medida que crece la gama.
Capa de rendimiento
Optimización de Core Web Vitals, pipeline de imágenes, caché en el edge y renderizado híbrido SSG/ISR: rápida en todas partes, no solo en la demo.
App Revlon Pro Color World
La web lleva a la app que sustituye a las cartas de color tradicionales en las consultas de coloración del salón.
Plataforma de formación
Cursos con nivel, temario por módulos, duración, certificación y productos relacionados.
Localizador de salones
Salones certificados por ciudad o ubicación, con filtros de servicios y certificaciones, vista de mapa o lista y cita online.
Feed de looks
Los trabajos de los salones certificados en un feed social con historias, tendencias y perfiles a seguir.
Stack
- Next.js
- TypeScript
- Vercel
- Shopify
- WordPress
- PHP
- Laravel
- Headless CMS
- Next.js
- Renderizado del frontend: híbrido SSR/SSG para rendimiento y SEO.
- TypeScript
- Tipado seguro en todo el código y en la integración con el CMS.
- Headless CMS
- Capa editorial para que marketing sea independiente de ingeniería.
- Vercel
- Despliegue, red edge y entornos de preview por rama.
Resultados
Una web corporativa que por fin está a la altura de la marca que representa.
- Presencia digital renovada en los mercados internacionales, con una expresión de marca unificada.
- Autonomía del equipo de marketing para actualizar catálogo y contenido, sin depender de ingeniería.
- Mejora medible del rendimiento en Core Web Vitals respecto a la plataforma anterior.
- Experiencia mobile-first coherente con el estándar premium de la marca.
Las métricas concretas de rendimiento están bajo NDA con el cliente. Los resultados reflejan la comparativa con la plataforma anterior durante los primeros 90 días tras el lanzamiento.
Sistema visual
Blanco y negro editorial con un rojo de firma. El color de cada línea de producto entra solo donde toca.
- Negro#000000
- Blanco#FFFFFF
- Gris fondo#F2F2F2
- Rojo Revlon#D0021B
- Lavanda Nutri Color#8F8FE6
- REVLON
Oswald
Titulares y secciones
- Aa
Montserrat
Texto, menús y botones