Strukt has an important message to share.

Strukt Portfolio: Graphic Design & Animation

Visionair

Interface- and user experience design

Interactive Data Visualization to monitor the processes of Vienna International Airport in real-time

The Vienna International Airport (VIA) hired us to design an application, displaying the current situation in and around the airport. The software we call ‘visionair’ provides real-time information on several touchscreens to the airport personnel.

Visionair Logo visionair interface

In 2011 the Vienna International Airport (VIA) handled 21.106.292 passengers. Many people cannot picture the complex logistics behind this achievement. Also the professionals at the airport need special software to collect and analyze all necessary data to guarantee maximum efficiency for all groups involved in the process. For this purpose the VIA runs over 300 different software applications, 400 servers running over 700 interfaces. So far this system collected over 70 terabyte of data. The resulting every-day-amount of single reports that are created for meetings is actually not countable.

Airport Data Lists
Samples of report systems in use

A New and “visionairy” Approach

With the touch-based software visionair, which draws all its data from existing systems, VIA strengthens the awareness of all ongoing processes. It was essential to integrate complex process data, to provide an up to date situation of the airport and to alarm the user in case of critical process events.

Another very important goal of visionair is to connect the different departments with their professional knowledge. It is critical that all departments can take part in this process without a long period of learning a new tool. Therefor visionair offers a simple and intuitive user interface, sets a focus on the airport’s core processes and showcases valuable index data in real time. As a result all departments gain a better understanding of all crucial events at the airport and their processes can be streamlined.

We started working on visionair in 2009. A first success was the completion of a working proof of concept realized in Adobe Flash featuring a custom built user interaction and interface design. The prototype connected to the servers of VIA using PHP and MS-SQL. Based on the gained experience the in-house software development department at the VIA created the full version of visionair using MS Silverlight. From this time on Strukt supplied the project team with interaction concepts and user interface design. As a result of the first prototype and the ongoing requests of different airport departments to the visionair product three different but interfacing applications were created by the end of 2012. These three applications offer a real-time analysis of the entire airport, as well as a terminal-focused and a process-focused view.

Airport View

Showcasing the core processes at the airport the first application, deriving from the prototype, is based on the map of the entire airport area. All relevant data of airplanes and vehicles, as well as important structures were included into this view. The main focus of this application is to visually picture the necessary turnaround tasks of all parties involved.

Airport View
  • Airport View Close Up 1
  • Airport View Close Up 2
  • Airport View Close Up 3

A returning informational element is the so called “info flag”, which shows all relevant data for the object in a compact form. We designed this element to be adaptable for all data-displaying purposes throughout the different applications. Each “info flag” is connected to its data-source with the “connector”, a dynamic line that helps to keep a clean overview of elements.

Airplane Info Banner

The image above shows the “info flag” for an airplane. All relevant turnaround tasks can show three different states in real-time: open, in progress and done. Also the flag offers information for identification as well as alerts in case of delays.

 

Terminal View

For the VIA the processes on the runway are not the only elements of interest. Data and events in the various terminals are equally important to improve efficiency. To picture important data from inside the terminals we designed info flags for the check-in counters, passport- and security-checks as well as the different gates. This application also uses forecast data that allows personnel to be prepared for rush hours at neuralgic spots.

Terminal View
  • Terminal View Close-Up
  • Terminal View Close-Up
  • Terminal View Close-Up
  • Terminal View Close-Up

The terminal view offered a challenge in terms of the consistency of the map design. Already proven to be very useful in the airport view the top-down view of the terminal had to be designed in a way that the various layers of the terminal buildings are still identifiable. The solution was the use of subtle shading and a strict grid for the gate-layout. After testing this design the users found it to be a very handy approach.

Terminal View - Gate Info Banner

The analysis of the gates and their data is an important part for all processes at the terminal. We designed the info flag for the gates to show very important information on (transfer) passengers and delays at security checks.

 

CDM View

The CDM (“Collaborative Decision Making”) protocol is an international standard allowing airports around the world to streamline their processes. The CDM process consists of 16 milestones that help airports to plan their resources. For the CDM View we designed the interface differently, skipping the established top-down view of the airport. This was necessary to display the complexity of the CDM process that already starts when airplanes leave their origin. Also the CDM process needs a non-chronological view of events, since airplanes can check milestones in random order and are relevant to the airport in several timely matters (before taking off at the origin, before touch down at the destination and during turnaround on the ground). In every phase milestones can effect the processes at the airport.

CDM View

The interface of CDM view sports two “now” points. This unconventional timeline is necessary because due to quick turnarounds on the ground a landing and takeoff can be imminent within a short period of time. Therefore on single airplane can be displayed shortly before landing and on the ground since it’s imminent presence is already relevant to ground-staff. The visual grouping of airplanes in the upper area of the interface is dynamic and adopts to the amount of airplanes. The arrangement of groups is loosely based on the world map which helps identifying origins and destinations of planes very quickly.

  • CDM View Close-Up 1
  • CDM View Close-Up 2
  • CDM View Close-Up 3

In case of a big amount of airplanes to be displayed in one group the system automatically creates sub-groups that expand on a single touch. Also this view sports the info flags for every airplane, showing the milestones and their state.

CDM View Filter

The CDM View’s filters are there to narrow down displayed information. At the same time their ring-chart design allows them to be also a display of data.

 

Long-Term Project with Long-Term Effects

The project time-span of visionair was about three years. Strukt needed to gain detailed knowledge of airport processes at first before starting working on the prototype. Intensive workshops with members of the Department of Information Systems at Vienna Airport were crucial to the success. Many different concepts were created throughout the years but only the most relevant and urgently requested features were realized. During the project period we were able to help out the client with smaller interface projects that all were loosely connected to visionair. All projects were based on a detailed design style guide we created for a consistent use of grids, colors, icons and typography.

visionair Style Guide Styleguide Detail

Screen Capture (Work in Progress)

Credits

  • Client Flughafen Wien SB-I
  • Client Project Manager Claudia Schrammel, Yuyun Yao
  • Project Manager Gregor Hofbauer
  • Creative Director Andreas Koller
  • Graphic Designers Christian Gross, Niko Knappe, Philipp Lehmann, Asaad El Salawi, Iris Wieder
  • Prototyping Robi Hammerle, Barbara Saga