Case Study

Design an on-board touchscreen interface for airline passengers that has screen dimensions of 2048px x 1536px at 264dpi.

Design Process

The example used in this section show the “Flight Status” screen. It is intended to be an additional screen within the interactive maps suite (on long-haul flights).

The screen was designed to provide:

  • Flight summary and the communication of additional flight information, such as when to expect turbulance, how long it’s going to last and how bad it will be. There are many people who experience a fear of flying and the lack of communication during a flight often feeds the fear.
  • More information/fun facts about the key landscapes that can be seen from the aircraft; there are some incredible sights to be seen flying over Greenland!


The project was initiated with the creation of a set of wireframes screen. This ensured a high-quality, optimal design and reduced the need to redesign key components during the mockup and/or coding phase(s).


Once the wireframes were complete and signed off, the wireframe placeholders were replaced with images and text. As images and text were identified, the designs were tweaked to accommodate larger image sizes and text descriptions.

Design Elements

The online interface must use the airline’s visual branding and logo.

Colour Scheme

The primary colour palette is made up of the two colours used within the British Airways logo and white for general text.



#(26, 64, 114)


(227, 37, 64)


(255, 255, 255)

Font Styles

To provide a plain, easy to read interface only body copy text will be used throughout the interface. The only exception to this is the “Welcome” title on the home page.

  • Headings: Airways
  • Body Copy Text: Verdana


The buttons on the home page were designed to look like tail fins on an aircraft. The use of white icons was used so that the icons would standout more for tired travelers on long-haul, night-time flights.