A high-flying design system

  • Digital Product
  • Design System
  • Conversion
  • Service

    • Product Design
  • Sector

    • Mobility
  • Year

    • 2016
  • Skills

    • Interaction design
    • Conversion
    • Design system
    • Information architecture
    • Fast prototyping
    • Accessibility

The evolution of a major airline company

At the beginning of 2016, Iberia contacted Secuoyas in order to design their main direct sales channel: www.iberia.com, which was split into two versions, the .com and the .mobi adapted for mobiles.
Given that the bulk of their turnover is income derived from transporting passengers, which reaches 75%, the challenge was knowing and being streamlined and efficient enough to avoid a negative impact on the accounts.
In six month’s time, a multi-device website with AA accessibility had to be ready which would survive the scrutiny which this type of companies find themselves under in the United States.
That was the first challenge, to optimise time and the team in order to land a first-class product within a very tight timeframe, avoiding any possible repercussion on the brand.

“Our pace was marked out by agility and efficiency as well as being conditioned by one key first date: the publishing of the website in the United States.”

Igor Ustarroz

Product Designer

The crew’s check-in

How we focussed the incorporation into a team that was already underway

Before we drew up a work plan and established targets we needed to decide who was going to execute it. We decided to reduce the team to the bare minimum and to work in a very collaborative manner, in the Iberia offices, and to incorporate new profiles as the project developed. This team, on our part, consisted in a duo of UX and UI designers.
We began by interviewing members of Iberia’s team in person in order to find out their points of view, functions and decision weight. We gathered together all of the information relative to the brand image and identity, as well as all of the accessibility work which had been carried out previously, and we conducted an audit of content where we obtained a rough copy of more than 100 static html pages and close to 80 different models. Studying the web analytics we obtained the access figures per device: 75% from desktop, 13% from mobiles and 12% from tablets, with the mobile channel growing at a very healthy pace.
Finally, we held a session to map out the project in order to prioritise, in a consensual manner, the way in which we would tackle each one of the project’s targets.

The design system as flight guidance

The creation of a modular system in order to avoid the degradation of the brand and guarantee scalability

The magnitude of the brand’s requirements led to us opting for a solution which scaled in the right direction. Recreating each element individually would have implied an effort as big as it was ephemeral. We had to provide a more transcendent solution to the client’s needs. The implementation of a design system seemed to be the logical option.
Nowadays, “design systems” go beyond the old style guides or brand identity manual. Their aim is to provide solutions for the representation requirements of a company, on a global scale, especially the digital needs. They tackle the common difficulties in development, with “libraries of centralised modular components” which enable them to evolve, simplify and accelerate the creation of new products, providing cohesiveness and ensuring that the tone and the brand values are kept under constant control.

What we mean by a design system.

The solution for IBERIA.COM

We gathered together all of the preliminary work divided between the different style guides, documents of good online practise and accessibility, and we used them as a starting point in order to achieve a digital, multi-device and accessible system. We took the metrics and modus operandi of each department into account in order to redesign and create a system as a basis for the identification of any future product and therefore guaranteed a consistent and scalable brand identity.
We created a modular library of components with reusable elements adapted to the brand guidelines and with a multi-device liquid behaviour which was friendly in terms of the colour and contrast for low-vision users, which also allowed evolution, with future add-ons and continuous improvement.

A year’s work

We developed the system over one year whilst working in two-week sprints, with very concrete objectives, marked out with the business and development teams. It was enough time to be able to create a coherent system. From thereon our job was to assess them and provide support whenever they needed it.
Towards the middle of the project we managed to fulfil the first challenge which was the release in the United States, so we began to centralise our work on evolving the processes which were critical for users. The objective of this phase focussed on improving the usability of the processes, the conversion in the purchase of tickets and to serve as a model for defining the structure of micro-services which would provide support for the interface.

We abandoned ship, returning to solid ground

We delivered the tool so that Iberia could build itself

Our "design system" is a new language in Iberia's universe, and the project for making the responsive website could be seen as a conversation within said universe. At present, we have proved that the system covers the new requirements of the products and facilitates the solution for Iberia’s future digital projects, helping the brand to continue to grow in the future.