{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

We were alerted to the Gatwick Airport website redesign by Matt Wilkinson, Senior Ecommerce Manager at Gatwick, in the comments on this responsive design round-up.

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

Desktop

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.

 

Mobile

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.

Ben Davis

Published 19 August, 2013 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

806 more posts from this author

Comments (12)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Mike Hudson

Definitely a great example of how an ASP.NET website can be built using the latest web best practices without horrible code/cruft under the hood. This will be my go-to example of a well-built .NET site for a while.

P.S. Really? Hand-drawn lines and arrows?

about 3 years ago

Avatar-blank-50x50

Dominic Mills

Nice review Ben and thanks Mike! Proud to say that this site was built by Auros (@teamauros) with UX /creative from Merchant Marketing Group.

about 3 years ago

Avatar-blank-50x50

John Abbott

Wow - good looking stuff and seems pretty functional as well.
Great clean looking site - well done Matt !!
Did you enjoy the experience ?

about 3 years ago

Avatar-blank-50x50

Digital agency

Very nice website and pleasant navigation ...Great job Matt !

about 3 years ago

Avatar-blank-50x50

TheDigitalConsultant

Any site that shows me their maps solely as a pdf and says "We've got Google maps coming soon" is not "sexy" in my book.

http://www.gatwickairport.com/at-the-airport/passenger-facilities/airport-maps/

Nice clean UX navigation though.

about 3 years ago

Ben Davis

Ben Davis, Senior Writer at EconsultancyStaff

@TheDigitalConsultant

I did come across the maps and thought that airports would be a good candidate for Google's indoor mapping. See this post: http://goo.gl/I7NdZt

On the website, particularly on mobile, I'm not sure the maps are too important. I guess having a great website casts new light on tired content.

about 3 years ago

Avatar-blank-50x50

Joe

Great looking website and very easy to navigate, but am I right in thinking the only responsive aspect of the desktop version is the images?

So many websites go over-the-top, making every single button and banner unnecessarily responsive. So far from this being a criticism, would people agree Gatwick have got the balance right?

about 3 years ago

Avatar-blank-50x50

Ben Sturt

Thanks Ben for the review, the team here at Merchant Marketing Group are certainly proud of it. Nice to work with a tech build partner (Auros) that respects the designs too!

Next one coming soon!

about 3 years ago

Ben Davis

Ben Davis, Senior Writer at EconsultancyStaff

@Ben

Respect

about 3 years ago

Avatar-blank-50x50

George

This website is called a perfect user-friendly website which user can easily book the flight. Interesting thing is that this website can easily run on desktop as well as mobile platform.

almost 3 years ago

Avatar-blank-50x50

jay yila, Manager at Heathrow Gatwick Transfers

It is not user-friendly at all. Our drivers are using gatwick website 2-3 times a day for flight landing times, its nightmare!
Responsive design is good, but design is not giving us what we need?
Jay Yila
Heathrow Gatwick Transfers

over 2 years ago

Avatar-blank-50x50

Arunas Michael, Costumer at Arunparking Limited

It's really a friendly and faithful website for booking hotels, flight booking and airport parking facility. We can say all types of airport services we can get through this site. There are other websites like arunparking.co.uk are provides advanced services in hotel booking and Parking space booking for vehicle with meet and greet services to us.

about 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.