Un sistema de diseño de altos vuelos

Ayudamos a Iberia a unificar y diseñar su canal de venta directa que estaba dividido en dos versiones, web y móvil. El desafío era consolidar ambas versiones en poco tiempo sin afectar la marca. Trabajamos en optimizar recursos para entregar un producto inicial dentro de un apretado cronograma.
  • Cliente

    • Iberia
  • Industria

    • Transporte
  • Competencias

    • Diseño visual
    • Sistemas de diseño
  • Equipo

    • 2x Product Designer
  • Fecha

    • 2016

La evolución de una gran empresa aérea

A comienzos de 2016, Iberia contactó a Secuoyas para llevar a cabo el diseño de su principal canal de venta directa: www.iberia.com, que estaba fragmentado en dos versiones, la .com y la .mobi adaptada a móvil.

Dado que el grueso de la facturación son los ingresos por transporte de pasajeros, que llegan al 75%, el reto consistió en saber en ser ágiles y eficaces para evitar un impacto negativo en las cuentas.

Seis meses después, debía estar preparada una web multidispositivo con accesibilidad AA que superase la auditoría que debe hacerse a este tipo de empresas en Estados Unidos.

Ése fue el principal reto, optimizar tiempo y equipo para aterrizar un primer producto con un calendario muy ajustado, evitando cualquier posible repercusión en marca.

Nuestro ritmo estuvo marcado por la agilidad y la eficacia a la par que condicionado por una primera fecha clave: la salida de la web en Estados Unidos

Igor Ustarroz, Product Designer
Sistema de diseño Iberia Secuoyas

El check-in de la tripulación

Cómo enfocamos la incorporación a un equipo ya en marcha

Antes de configurar un plan de trabajo y establecer hitos, era necesario decidir quién lo iba a ejecutar. Optamos por la reducción del equipo al mínimo indispensable y realizar un trabajo muy colaborativo, dentro de las oficinas de Iberia, e ir incorporando nuevos perfiles según se desarrollase el proyecto. Este equipo, por nuestra parte, consistió en una dupla UX e UI.

Comenzamos realizando entrevistas personales a los miembros del equipo de Iberia, para conocer sus puntos de vista, funciones y peso de decisión. Recopilamos toda la información relativa a imagen de marca e identidad, así como todo el trabajo de accesibilidad que se había realizado de manera previa, y llevamos a cabo una auditoría de contenidos donde obtuvimos un bruto de más de 100 páginas estáticas html y cerca de 80 módulos diferentes. Estudiando la analítica web obtuvimos las cifras de accesos por dispositivos: un 75% de escritorio, un 13% en móvil y un 12% de tablet, con el canal móvil creciendo a muy buen ritmo.

Finalmente, realizamos una sesión de mapa de proyecto para priorizar de manera consensuada la manera en que abordaríamos cada uno de los hitos del proyecto.

El sistema de diseño como guía de vuelo

La creación de un sistema modular para evitar la degradación de la marca y garantizar la escalabilidad

La envergadura de las necesidades de la marca nos llevó a apostar por una solución que escalase correctamente. Recrear cada elemento individualmente habría sido un esfuerzo tan grande como efímero. Debíamos aportar una solución más trascendental a las necesidades del cliente. La instauración de un sistema de diseño se impuso como la opción lógica.

Actualmente, los “sistemas de diseño” van más allá de las antiguas guías de estilo o manuales de marca. Tienen como objetivo solucionar de forma global las necesidades de representación de una compañía, sobre todo las digitales. Atajan las habituales dificultades de desarrollo, con “librerías de componentes modulares centralizados” que permiten evolucionar, simplificar y acelerar la creación de nuevos productos, aportando cohesividad, y manteniendo el tono y los valores de la marca siempre bajo control.


La solución para IBERIA.COM

Recopilamos todo el trabajo previo dividido entre las diferentes guías de estilo, documentos de buenas prácticas online y accesibilidad, y los tomamos como punto de partida para conseguir un sistema digital, multidispositivo y accesible. Tuvimos en cuenta las métricas y el modus operandi de cada departamento para rediseñar y crear un sistema como base en la definición de cualquier producto futuro y así garantizar una identidad de marca consistente y escalable.

Creamos una librería modular de componentes con elementos reutilizables adaptados a los guidelines de la marca y con un comportamiento líquido multidispositivo que fuese amigable en términos de color y contraste con personas de visión reducida, que además permitiese una evolución, con añadidos futuros y mejora continua.

Sistema diseño Iberia

Un año de trabajo

Ampliamos el sistema a lo largo de un año mientras trabajando en sprints de dos semanas, con objetivos muy concretos, marcados con los equipos de negocio y desarrollo. Fue tiempo suficiente para poder crear un sistema coherente. A partir de ahí nuestra labor fue asesorarlos y darles soporte a cualquier necesidad que tuviesen.

Hacia la mitad del proyecto conseguimos cumplir el primer reto de la salida a Estados Unidos, por lo que empezamos a centrar nuestra labor en evolucionar los procesos críticos para los usuarios. El objetivo de está fase se centró en mejorar la usabilidad de los procesos, la conversión en la compra de billetes, y servir de modelo para redefinir la estructura de microservicios que darán soporte al interfaz.

Abandonamos la aeronave, volvemos a tierra

Entregamos la herramienta para que Iberia se construya a sí misma

Nuestro "sistema de diseño" es un lenguaje nuevo dentro del universo Iberia, y el proyecto de realizar la web responsive podría verse como una conversación dentro de él. A día de hoy, hemos comprobado que el sistema cubre nuevas necesidades de los productos, y facilita la solución de necesidades futuras de proyectos digitales de Iberia, ayudando a la marca a seguir creciendo en el futuro.


La evolución digital de la marca Repsol

El universo Carrefour en una única app

¿Charlamos?

En una agenda apretada siempre

hay tiempo para un café.

Agenda un café