Iberia - Flight Experience
Creación de un Sistema de Diseño unificado para el ecosistema digital de Iberia (Web/App), implementando una arquitectura de Design Tokens y una Librería de Componentes escalable para eliminar la fragmentación visual entre plataformas. Trabajo transversal con múltiples squads para garantizar la adopción del sistema a escala.
Sobre el proyecto
El núcleo de este proyecto fue la creación de un Sistema de Diseño unificado para el ecosistema digital de Iberia. Implementé una arquitectura de Design Tokens y una Librería de Componentes escalable, eliminando la fragmentación visual entre la Web y la App para optimizar tanto la experiencia de usuario como la Eficiencia en Desarrollo.
El ecosistema digital de una aerolínea opera sobre múltiples plataformas con equipos independientes. Sin una fuente de verdad compartida, cada equipo tomaba decisiones visuales de forma aislada: colores ligeramente distintos, espaciados inconsistentes y componentes duplicados. La Arquitectura de Información debía unificarse bajo un sistema coherente que garantizara la Consistencia Multiplataforma en cada punto de contacto digital.
El objetivo: diseñar un sistema basado en Átomos y Moléculas que permitiera escalar el producto digital sin perder coherencia visual, con Design Tokens como única fuente de verdad y una Librería de Componentes reactivos y accesibles.
El ecosistema digital existente presentaba fragmentación visual severa entre Web y App. Los Design Tokens no existían como concepto unificado: cada plataforma mantenía sus propios valores de color, tipografía y spacing. La Librería de Componentes estaba duplicada con variantes inconsistentes, lo que generaba deuda de diseño y ralentizaba la Eficiencia en Desarrollo. La Arquitectura de Información difería entre canales, creando una experiencia desconectada para el usuario.
- Sin una fuente de verdad compartida: Web y App mantenían estilos, componentes y tokens independientes
- Un botón primario tenía 4 variantes distintas entre plataformas — ninguna era la "correcta"
- La deuda de diseño acumulada ralentizaba el desarrollo de nuevas features un 35%
Solución propuesta
Se diseñó un sistema de Design Tokens como única fuente de verdad para Color (Rojo Iberia, Neutros), Spacing y Tipografía. Se construyó una Librería de Componentes basada en Átomos y Moléculas, garantizando la Consistencia Multiplataforma entre Web y App. La Arquitectura de Información se redefinió para unificar flujos digitales, y se documentó todo el sistema para maximizar la Eficiencia en Desarrollo en la implementación.
01. El Problema: Fragmentación Digital
Un ecosistema digital fragmentado
Partíamos de un ecosistema digital fragmentado, con una deuda técnica y visual considerable. La falta de un sistema centralizado generaba una experiencia de usuario incoherente y aumentaba los costes de mantenimiento. La web y la app de Iberia habían evolucionado de forma independiente durante años: equipos distintos, decisiones de diseño aisladas y sin una fuente de verdad compartida. El resultado era una experiencia rota donde un mismo usuario encontraba botones, colores, tipografías y flujos diferentes según la plataforma que utilizara.
Insight Clave: Cada plataforma mantenía sus propios valores de color, tipografía y spacing. Un botón primario tenía 4 variantes distintas entre Web y App — ninguna era la "correcta" porque no existía una referencia centralizada.
02. Proceso Metodológico
Stepper vertical de producto - 6 fases técnicas
El proyecto siguió una metodología rigurosa de Digital Product Design, donde cada fase construye sobre la anterior para garantizar la Consistencia Multiplataforma del ecosistema:
Auditoría UI
Mapeo exhaustivo de inconsistencias entre plataformas. Se documentaron todas las variantes de color, tipografía, spacing y componentes existentes en Web y App para identificar la fragmentación visual y establecer el alcance del sistema de Design Tokens.
Definición de Tokens
Establecimiento de la "Single Source of Truth" para estilos. Se definieron Design Tokens para Color (Rojo Iberia #E62232, Neutros), Spacing (escala de 4px) y Tipografía, permitiendo que cualquier cambio global se aplique instantáneamente a todo el producto.
Construcción de Librería
Desarrollo de la Librería de Componentes basada en Átomos y Moléculas. Cada componente fue diseñado como reactivo y accesible, desde botones y selectores hasta listas y cards, garantizando su reutilización en ambas plataformas.
Mejora de Flujos Online
Optimización del Check-in digital y servicios adicionales (Ancillaries) utilizando los nuevos componentes del sistema. La Arquitectura de Información se rediseñó para priorizar las acciones críticas en cada paso del flujo.
Prototipado Sistémico
Validación de interacciones usando la nueva Librería de Componentes. Cada prototipo se construyó exclusivamente con componentes del sistema para verificar la Consistencia Multiplataforma y la Eficiencia en Desarrollo.
Documentación Handoff
Guías claras para asegurar una implementación fiel en código. Documentación de cada Design Token, especificaciones de componentes y reglas de uso para maximizar la Eficiencia en Desarrollo del equipo.
03. Foundations del Sistema
Iconografía - Lenguaje visual unificado
Se definió una librería de iconografía completa como parte de las Foundations del sistema. Cada icono sigue las mismas reglas de construcción: grid de 24px, trazo consistente y alineación pixel-perfect. La librería cubre todos los casos de uso del ecosistema digital — desde navegación y acciones hasta estados e información contextual.
Insight Clave: Una librería de iconos unificada garantiza que cualquier equipo — Web o App — utilice exactamente el mismo lenguaje visual, eliminando las inconsistencias entre plataformas.
04. Átomos del Sistema
Botones - El componente más crítico
Los botones son el átomo más utilizado del ecosistema. Se definieron todas las variantes (primario, secundario, ghost, disabled) con sus estados (default, hover, active, focus) consumiendo directamente los Design Tokens de color y tipografía. Cada variante está documentada con sus reglas de uso.
Controles de formulario y navegación
Cada control de formulario fue diseñado como átomo independiente con todos sus estados. Los selectores de fecha, radio buttons, toggles, tabs y controles de navegación consumen Design Tokens directamente, garantizando coherencia visual en cualquier contexto.
Tabs y autenticación social
Los componentes de navegación por tabs y los botones de autenticación social se diseñaron como átomos reutilizables. Los tabs soportan configuraciones de 2, 3 y 4 elementos, mientras que los botones sociales mantienen la identidad de cada plataforma respetando el sistema de spacing y tipografía de Iberia.
05. Moléculas del Sistema
Cards de contenido y servicios
Las cards son las moléculas más versátiles del sistema. Se diseñaron múltiples tipologías — cards de destino, de servicio, de información y de valor — cada una combinando átomos (iconos, botones, tipografía) siguiendo patrones predefinidos de layout y spacing.
Banners, tarjetas de fidelización y datos de pasajero
Los componentes más complejos del sistema combinan múltiples átomos para crear experiencias ricas. Los hero banners, las tarjetas Iberia Plus y las cards de pasajero son moléculas que mantienen la Consistencia Multiplataforma en los puntos de contacto más visibles del ecosistema.
Tarjetas de fidelización y selección de vuelo
Las tarjetas del programa de fidelización y la fila de selección de vuelo son moléculas críticas del ecosistema. Se diseñaron múltiples variantes responsive para adaptarse a diferentes contextos — desde la home hasta el flujo de reserva.
Insight Clave: Los componentes de listas, botones y selectores se diseñaron como Átomos y Moléculas reutilizables. Cada componente incluye todas sus variantes (estados, tamaños, temas) documentadas para maximizar la Eficiencia en Desarrollo.
06. Organismos del Sistema
Header y Footer - Estructura global
El header y el footer son los organismos que enmarcan toda la experiencia digital de Iberia. Se diseñaron variantes responsive del header (desktop completo, tablet y móvil) y un footer con toda la información institucional, accesibilidad y enlaces legales.
07. Resultado Final
Pantallas Web - Flujos de reserva y pago
Las pantallas finales demuestran cómo todos los componentes del sistema trabajan juntos en flujos reales. Cada pantalla está construida exclusivamente con Átomos y Moléculas de la librería, validando que el sistema soporta los flujos más complejos del ecosistema — desde la selección de vuelo hasta el pago.
Pantallas Mobile - Experiencia nativa
La versión móvil demuestra la Consistencia Multiplataforma del sistema. Los mismos componentes se adaptan de forma nativa a iOS, manteniendo la identidad visual de Iberia mientras respetan los patrones de interacción de cada plataforma.
