With responsive design riding a tidal wave of popularity and common sense, I can’t think of a sector better suited than air travel.
We’ve all been travelling to an airport, needing to check flight times, terminals, parking arrangements, delays etc. We know airport websites have this info, but we aren’t confident in navigating an old desktop site from our phones. Well, it seems Gatwick have smashed it out the park on this one.
This post isn’t going to go into too much detail about why the site is great. I’ll just post some annotated pictures of it, and encourage you to try it out for yourself.
Can airports be sexy? Not really. Here’s one in Bangkok that isn’t - purple seats and modern-toy design.
And here's Barbados airport, in 1962, the last time flight was vaguely cool.
Gatwick Airport has bucked the trend, with its sexy new website. It’s chunky, functional, and colour coordinated. It works very nicely on desktop and mobile, with a consistency and simplicity that every UX bod knows is difficult to get right.
One of the striking things about the website is the cleanness of the design - all too often old websites for airports have a bunch of text links, too much information on the homepage and a poor nav bar. Well, here's what represents success on gatwickairport.com...
You can already see some great features on the home page. I've annotated the pic below, but they include social integration, clear navigation, and the primary need placed plum in the centre of the page.
There's also some big and reassuring imagery that's good for the brand and good for creating space in the design.
And below the fold it does things right, too. Tweets roll along the screen, and you can interact socially from a reply/retweet button. The info panel at the top follows you down the page, as does the reassuring imagery.
There are plenty of links unobtrusively placed in the footer for the confident visitor, and some vouchers and services advertised fairly prominently, but sensibly below the fold and below flight search.
Let's go further into the site.
Checking flight information there’s a handy pin button allowing you to save an arrival or departure at the bottom of your window, to click later. And selecting any sub page refines the info bar at the top of the website.
It's fairly clear, looking at how clean this pages is, and the style of the nav buttons and arrivals/departures buttons, that the website is well-prepared for mobile, and we'll explore that later in the post.
When you book a service e.g. parking, hotel, flight, hire car, all the booking machines are very similar, giving a consistency of experience that really pulls the website together.
All the calls to action are designed with the same yellow box, and each title is backed up with a logo, to make navigation that little bit quicker.
There's also the option to search worldwide for hotels and car hire, rather than simply Gatwick, which is a nice touch that surely helps to drive extra revenue from hotel partners.
The business website is faithful to the passenger site, which is another great touch. It’s full of useful content, and it’s easy to switch back to the passenger view.
Having the business website completely separate allows the passenger website to maintain its clean and unconfusing navigation.
Here’s some of the same features on mobile.
Browsing flights..more info and option to pin flights for later. The refresh buttons are clear, as is the additional 'which terminal?' info.
The menu slides out from the left in a tidy fashion, and again features the same logos from the desktop site, which here take more prominence and are a help for international visitors.
Notice again the option to navigate to the business-flavoured website.
Booking pages are again consistent and look much the same as the desktop versions.
Even the font is pleasing.
So basically, this is a great example of a slick and friendly responsive website. Do check it out, wherever in the world you are.
If you've noticed any new and attractive responsively designed websites, let us know in the comments, just like Matt did.