london-city-airport-hero-shot

London City Airport

London City Airport is the only airport within the city limits. Their clientele is made up mostly of business class travellers and private jets.

The London City Airport website was in need of an overhaul. A complete rethink of the way the website works meant designing the from the ground up. We started off with a comprehensive brief from the client, analytics reports of the site’s visitors and the results of a questionnaire given to both travellers in the airport and visitors to the website.

We used this information to come up with four user personas which encompassed the majority of people using the website:

 passengers arriving into to the airport;
 passengers departing the airport;
 people picking up and dropping off passengers;
and people booking flights.

Page ranking

Each page on the site was plotted out and ranked on a sliding scale as to how relevant it is to each type of visitor. These corresponded to a scoring system. If a visitor hits a lot of pages that rank highly on the departing scale we can deduct that they are most likely a departing passenger. This allows the site to display information relevant to the user more accurately.

ranking-pages
The page ranking system.

Snippets

Using the intelligent page categorisation the site builds a live profile of the visitor and this information is then used to tailor website content, strategically targeting the correct customer type. The back end of the site has a complex admin area where ads & notices can be delivered to exactly the kind of people they’ll be most appropriate for and not shown where they have no relevance. For instance parking ads won’t show up for arriving passengers (they will for departing and booking customers), instead information about car hire would be shown as it is more relevant for an arriving passenger.

We called these ‘snippets’ and served them up in the right hand column of the pages. The site can automatically choose snippets relating to the user or they can be overridden manually if the airport has something in particular they’d like to show. This can be done in the admin on a page by page, section by section or site wide basis.

london-city-airport-notebook-03Preliminary sketches working out user types.

The home page

The home page had to be incredibly pragmatic but also engaging to use. The first thing people come across is what we called the ‘portal’. Designed to provide clear navigation and information to the four user groups we are targeting as well as a fifth panel for quick booking parking. It also features a carousel for ads and news stories as well as snippets and a news ticker. Ideally most users can get the information they need directly from the homepage as the information they normally look for the on highest ranking pages in the analytics report is right there.

london-city-airport-notebook-01
As London City isn’t a budget airport the copy used on the site had to sell its benefits. It’s proximity to The City being one of the most important.

london-city-airport-homepage
The final design for the homepage.

Colours

When we first took on the website one of the things we knew we could use to breath life into the site was colour. As we were already classifying users based on their needs, we decided to classify the entire site by colour. The airport’s identity already had an existing secondary colour palatte but these wouldn’t be suitable for use on the web. We took the existing brand secondary palatte and used it as a starting point to create a new eight colour palatte. We have a dark grey for the background, a warm grey for text and six different colours for the different sections on the site. We constantly tested the colours throughout the build to make sure the site was DDA compliant as accessibility was obviously a key priority.

london-city-airport-colours-old-colours
The existing secondary brand palatte.

london-city-airport-colours
The new adjusted palatte of colours for the website.

Mobile

London City Airport already had a mobile site already but it wasn’t working very well. It was clunky to use and didn’t make for a good experience. We designed the mobile version of the site to make it simple and easy for people to find the information they need quickly. The mobile site uses very little imagery to keep load times as low as possible.

london-city-airport-mobile-site

The ski site

The ski site was built alongside the main site and uses the same grid and backend but was launched slightly earlier than the main site giving us a great beta to see how it performed in the real world before the main site went live.

Designed to inspire customers to book their entire ski holiday through London City it incorporates custom maps of ski destinations and pulls in live ski conditions such as weather, snow depth, facilities and ski runs. The ski sub site gave the airport a space to promote their tailored ski packages, ski guides for each destination, ski magazine showing their knowledge and understanding of skiing holidays as well as the ski equipment for sale in the airport.

lcy-ski

lcy-ski-sub

Results

As a direct result of the redesign, revenue from parking booked on the website has increased by 11566% (that’s not a typo). Flight and hotel bookings have increased by 55%. Page visits are up by 21.5% Bounce back rates have decreased by 10%, and dwell time has increased by 5%.

www.londoncityairport.com

Work completed at 3 fish in a tree

Some more projects