A high-flying design system

We helped Iberia to unify and design its direct sales channel, which was divided into two versions, web and mobile. The challenge was to consolidate both versions in a short time without affecting the brand. We worked on optimising resources to deliver an initial product within a tight schedule.

Client
- Iberia
Industry
- Transport
Skills
- Design system
- Visual design
Team
- 2x Product Designer
Date
- 2016

Our pace was marked by agility and efficiency but also conditioned by a first key date: the launch of the website in the United States.

@Secuoyas

Crew check-in

How we approach joining an existing team

Before setting up a work plan and establishing milestones, it was necessary to decide who was going to execute it. We opted to reduce the team to the minimum necessary and to work very collaboratively, within the Iberia offices, and to incorporate new profiles as the project developed. This team, for our part, consisted of a dupla UX and UI. We began by conducting personal interviews with members of the Iberia team, to find out their points of view, functions and decision-making weight. We gathered all the information related to brand image and identity, as well as all the accessibility work that had been done previously, and we carried out a content audit where we obtained a gross of more than 100 static html pages and about 80 different modules. Studying the web analytics we obtained the access figures by devices: 75% desktop, 13% mobile and 12% tablet, with the mobile channel growing at a very good pace.

Finally, we held a consensual project mapping session to prioritise how we would approach each of the project milestones.

Six months later, a multi-device website with AA accessibility had to be ready to pass the audit that must be carried out on this type of company in the United States.

That was the main challenge, to optimise time and equipment to land a first product with a very tight schedule, avoiding any possible brand repercussions.

The design system as a flight guide

The creation of a modular system to avoid brand degradation and ensure scalability.

The scale of the brand's needs led us to opt for a solution that would scale correctly. Recreating each element individually would have been an effort as great as it would have been short-lived. We had to provide a more far-reaching solution to the client's needs. The implementation of a design system was the logical choice.

Today, "design systems" go beyond the old style guides or brand manuals. They aim to provide a comprehensive solution to a company's representation needs, especially digital ones. They tackle the usual difficulties of development, with "libraries of centralised modular components" that make it possible to evolve, simplify and accelerate the creation of new products, providing cohesiveness, while keeping the tone and values of the brand under control.

The solution for IBERIA.COM

We compiled all the previous work divided between the different style guides, online best practice and accessibility documents, and took them as a starting point to achieve a digital, multi-device and accessible system. We took into account the metrics and modus operandi of each department to redesign and create a system as a basis for the definition of any future product to ensure a consistent and scalable brand identity. We created a modular library of components with reusable elements adapted to the brand guidelines and with a liquid multi-device behaviour that was friendly in terms of colour and contrast with people with reduced vision, which also allowed for evolution, with future additions and continuous improvement.

A year of work

We scaled up the system over the course of a year while working in two-week sprints, with very specific objectives, set with the business and development teams. That was enough time to create a coherent system. From then on, our job was to advise and support them on any needs they might have. About halfway through the project, we managed to meet the first challenge of going to the United States, so we began to focus our work on evolving the critical processes for the users. The objective of this phase focused on improving the usability of the processes, the conversion in the purchase of tickets, and to serve as a model to redefine the structure of microservices that will support the interface.

We touched ground, We left the aircraft

A tool for Iberia to build itself

Our "design system" is a new language within the Iberia universe, and the responsive web project could be seen as a conversation within it.

To date, we have found that the system covers new product needs, and facilitates the solution of Iberia's future digital project needs, helping the brand to continue to grow in the future.