Swiss: Responsive Flight Picker

Responsive airline site: The Swiss flight picker

Airline responsive design in action: Swiss flight picker

Swiss, currently the only member of Lufthansa Group to have gone responsive, shows that responsive airline sites need not require large downloads. Clocking in just under 1 MB for the initial download, and with smooth transitions between screens, the responsive app feels reasonably performant.

Yet on this Android 5 smartphone, the app uses the screen real estate quite inefficiently:

  • An Android certificate warning – a usability issue in itself – prevents the location bar from hiding and costs 8% of screen height
  • Header and steps navigation are reasonably sized (15% of screen height). But numbering – not labeling – checkout steps leaves prospective travelers guessing what’s next.
  • Quite large padding under the headline costs another 5% of screen height.
  • Ultimately, without scrolling, the site only shows fares for one flight fully – the cabin class selector simply takes too much space. This makes it harder to get an overview of all the flights Swiss has to offer for a given travel need.

These are smartphone-only issues: on tablet and desktop, these usability problems do not arise. Mobile-first design can help avoid such smartphone problems. But ultimately, with a responsive airline site or any other technology, what matters is continuously testing and improving usability on the different form factors.

NB Screenshot appears in our post on airline responsive sites