Alitalia

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

Official App

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).

I have been involved with Alitalia since 2009, when it was necessary to manage flights for the first time on the move, and later until 2016, through all the native mobile platforms Blackberry, WindowsPhone, iOS and Android. Alitalia, like other applications, was one of the projects that has seen a lasting design over the years and which therefore has favored the opportunity to study, experiment and innovate techniques and methods in the field of User Interface Design ahead of its time. Conceived and produced the official application concerning the exclusive services that the national flag carrier reserves to flyers. Came up with new techniques and improved the whole UxDesign process throughout Info Architecture and Information Design steps. Also conceived and produced the official iMessage application concerning the exclusive services that the national flag carrier reserves to flyers. Share your flights and check special offers right away, while chatting with your friends!

iOS

User Interface Design

The Ui iteration of the first app has produced a series of screens that make the Alitalia service usable in the form of a smartphone and tablet and targeting the first generation of iPhone and iPad devices. The interface style was renewed on the basis of a visual study and a shared Style Guide. Back then, Alitalia did anticipate the newborn field of smartphones applications ahead of its time and thus it positioned itself as the very first client in making an innovative flight experience possible, from purchase to boarding.

Canvas
Canvas
Canvas
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Canvas
Canvas
Canvas
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup

Windows

Wireframing

The design of the application envisaged the adoption of the wireframe technique in order to study the structure, in harmony with the Windows international guidelines. This phase was also a strategy to deepen the nature of the Alitalia service for mobile use along with the technologies at the gates of the new industrial revolution. For example, the selection of the seat during the check-in phase, the production of the boarding pass by means of a QR Code and much more were displayed

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Styleguide

Over the years, Alitalia has been trained and educated to the mobile world through the correct execution of the mobile guidelines and thus finding a wide range of innovation in a Style Guide that adapted in line with the times. Between 2009 and 2012, new concepts were introduced linked to an increasingly solid and performing UI structure to meet end users and offering the possibility to search, select, approve, pay for tickets for any plane flight. wanted on the globe, from your smartphone or tablet

Styleguide
Styleguide
Styleguide

User Interface Design

Thanks to Ui production, Alitalia included the WindowsPhone 7 version, which offered excellent ideas for creating an innovative and at the same time usable application. The Style Guide was a useful reference point for the style; for example the background change according to the time of day and graphic illustrations with a touch of futuristic effect

The stylistic effect was an idea that was inspired by my graduation texts at the Academy of Fine Arts Kepher

Canvas
Mockup
Mockup
Mockup
Mockup

Blackberry 7 & 10

Wireframing

Alitalia's request to pass the application also on BlackBerry 7 platforms, and later also version 10, led to a review of the services to meet the needs of these devices and thus make the experience usable as well.

Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB7
Wireframe BB10
Wireframe BB10
Wireframe BB10
Wireframe BB10
Wireframe BB10

Style Guide

Not least the style has been revised to meet the guidelines of the BlackBerry parent company.

Styleguide BB10
Styleguide BB7
Styleguide BB10

User Interface Design

The Ui production was based on the previous studies of wireframing and Style Guide to give the new face of Alitalia in BlackBerry devices version 7 and then to follow the maintenance and visual translations up to 12. A lot of innovation ahead of its time

Canvas
Mockup BB7
Mockup BB7
Mockup BB7
Mockup BB7
Mockup BB7
Mockup BB7
Mockup BB7
Mockup BB10
Mockup BB10
Mockup BB10
Mockup BB10

iOS & Android

Wireframing

Goal fo the project was restyling the old app my ex-coworkers designed long time ago. All of my Ui knowledge and expertise is gathered at this entry level. The more you plan carefully, the better what's next. The design involved the Wireframing phase for both platforms, iOS and Android. It is the so-called wire drawing for the exclusive purpose of laying the necessary foundations for the design of the renewed services of the Alitalia app, before following the User Interface Design iteration. For example, the native iMessage chat features designed to facilitate the usability of the service on the go. A similar design was possible thanks to the Wireflow Library that I personally developed with the result of calibrating the interactive shot down to the smallest detail and thus visible in a visual map.

Canvas
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe iMessage
Wireframe iMessage
Wireframe iMessage

iOS

Style Guide

A hard-working step that must be considered as a crucial approach to the next level. Easy to manage when app needs reviews. After several years Alitalia the Style Guide continued to adapt in step with the times. So in 2015 new concepts were introduced linked to an increasingly solid and performing Ui structure; for example Alitalia was educated in the innovative concept of Card (even before Google published it in its Material Design)

Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide

Use Interface Design

Now it's about time to keep it cool and pixel perfect aligned, once you're done a lot of concepts properly. The first version designed in 2009 for newborn iOS devices has been revisited, thus meeting various changes and additions. In fact, such an intervention came from the need to adapt in step with the advancement of technology and also according to the renewed guidelines of the parent company Apple. For example, the native iMessage chat features designed to facilitate the usability of the service on the go

Canvas
Mockup
Mockup
Mockup
Mockup iMessage
Mockup iMessage

Android

Use Interface Design

The design for the Android platforms was commissioned for the first time in 2014 on the same level as the previous iOS version. In this sense, the Style Guide was a support for a common and vertical visual line on the different platforms. At the same time, studies and experiments were undertaken in accordance with Google guidelines to offer the best interactive experience

Canvas
Canvas
Canvas
Mockup
Mockup
Mockup
Mockup

Motion Design

In the design phase, the first animation techniques on components were tested. In this sense, the iterative Ui process specialized, ahead of its time, in Motion Design. In fact a few years later, I could tell by reading new guidelines, such as Google's Material Design.