Alitalia

It's been a long time and I stop working on this material.

Alitalia – Società Aerea Italiana (Alitalia – Italian Air Company), operating as Alitalia), is the flag carrier of Italy. The company has its head office in Fiumicino, Rome, Italy. Its main hub is Leonardo da Vinci-Fiumicino Airport, Rome, and a secondary is Linate Airport, Milan.

Other focus airports are Catania-Fontanarossa Airport, Milan-Malpensa Airport, Palermo Airport and Naples Airport. In 2018, it was the twelfth-largest airline in Europe. The name Alitalia is an Italian portmanteau of the words ali (wings), and Italia (Italy).

After having participated in the creation of the mobile website between 2009 and 2010, Alitalia commissioned its reconstruction again in 2014. In fact, the rapid technological evolution in the mobile sector, in just three years, saw the need for the website to be revised according to the new device on the market. First, I produced screens for Blackberry; next in the second decade of the new millennium, it was necessary to look at iOS, the growing Android and Windows Phone. A few years earlier, in 2012, Alitalia launched a promo landing page to be granted within a certain date time. Design and development accomplished this goal with a code-animated countdown

Produced the new Alitalia mobile web services into the form of an interaction model, planning and executing user flows and wireframes

Wireframing

The design involved the Wireframing phase in parallel to study the newbor UX Design techniques. It is the so-called wire drawing for the exclusive purpose of laying the necessary foundations for the design of the Alitalia website, before following the User Interface Design iteration. A similar design was possible thanks to the Wireflow Library that I personally developed with the result of breaking down the interactive patterns to the smallest detail and thus visible in a visual map.

Canvas
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

User Interface Design

Following the analysis that emerged during the Wireframe phase, I worked along with my colleague Designer during the Ui production phase in order to obtain these visual mockups of the entire Alitalia mobile site

Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup

Produced the design process through skecthing the service into wireframe concepts, then created the User Interface (UI) layouts and relatives assets. Next developed and managed the front-end in order to create the promotion landing-page based on a stylish dynamic countdown

Wireframing

The Design production began with a preliminary phase by wireframe, in order to understand the need and the objectives to be set. The result of the processing ended up with a single page holding a content form to be filled in upon expiry of the time limit. In this sense, the idea of the countdown was proposed

Wireframe
Wireframe
Wireframe

User Interface Design

The Ui production was aimed at the construction of a layout that would allow to fulfill the Wireframe analysis and at the same time to get in tune with the Alitalia style of those years

Mockup
Mockup
Mockup
Mockup

Front End Development

In the passage from the Design to the Front End code I had to create a dynamic countdown. Not least, it was necessary to decline the page in many languages from all over the world, as the promotion extended to all possible Alitalia customers.

Check out the demo version

Screenshoot
Coding
Coding
Coding
Coding
Coding
Coding

Motion Design

Ahead of its time, the promotional site featured animations that would be seen later in the next years such as Google guidelines Material Design. The components choreography, in fact, is today a crucial aspect for understanding the user interface