<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=489234024577527&amp;ev=PageView&amp;noscript=1">

Expansive design, meticulously documented

We distilled our creative approach into a comprehensive digital design system for Amadeus

1

Components

1

Templates

1

Icons

1

Sites

Context

Supporting Amadeus’ updated infrastructure with user-centric design

In 2017-2018, we helped travel technology giant Amadeus redefine their digital presence as part of the Amadeus Digital Ecosystem project, including a full-scale renewal of their digital design system.

In support of this ambitious goal, we created the Amadeus Digital Design System. This web-based resource enables Amadeus teams and partners to familiarise themselves with and apply the key principles and techniques that define the new design system.

Amadeus design system layout page design
Amadeus digital guidelines homepage mobile view

Documenting our creative approach

The Amadeus Design System is freely accessible to Amadeus account holders, encapsulating our approach to user-focused web design. The System outlines our methods for creating clean, intuitive and accessible digital experiences – and its fully optimised for mobile.


Scope

Defining and codifying our design system

The Ecosystem project required a complete design overhaul, including the introduction of new iconographic and typographic systems. The new design hinges on space and simplicity, with a lot of attention given to creating a clean and user-centric digital experience. That said, the design system like the design itself had to be simple, intuitive and easy to navigate.

The resource is freely accessible to Amadeus teams and provides in-depth information on every aspect of the Amadeus visual identity. Users can explore pages of educational content dedicated to individual UI elements, best practices and powerful design concepts.

Amadeus hotel icon with grid
Amadeus card anatomy explanation
Design elements

Creators and Developers

Great design relies on great development to be fully realised. As such, the Design System includes an interactive code snippet, and detailed information on the behaviours of 50+ components.

Code Snippet

The Design System features a code snippet that allows developers to copyhtml code, CSS code, JS code, and SCSS. All UI elements are defined within the System and mapped to Boostrap variables.

Homepage design for Amadeus design system
design-system-button-principles
design-system-color-accessibility
Amadeus design system colors page design
Amadeus design system iconography grid page design
Amadeus design system components page design and illustrations

Value

Ensuring design consistency now and in the future

Our content and design teams created the design system to give a simple introduction to high-level aspects of modern web design. It is a ‘living’ resource, built to support the addition of more content in the future.

Over the course of the Digital Ecosystem project, our design team crafted a consistent, user-centric digital experience. The Amadeus Design System encapsulates every piece of this puzzle, giving users the knowledge needed to replicate and master the design principles that define the refreshed Amadeus digital identity.

Amadeus design system tablet and mobile view
Why Luxus

Expert UI Design

The Amadeus Ecosystem demanded quality design and our in-house creatives were more than capable of providing it. The Design System is testament to their knowledge and skill.

User-focused approach

We always place user expectation and needs at the heart of our decision-making. The Design System is as intuitive and simple to use as the modern visual identity it documents.

Attention to detail

Our designers, content editors and developers obsess over the small details of their work. The Design System showcases this commitment at every level of its presentation.

Next project

Amadeus - Digitising the future of travel