Back

Heathrow

Park, shop, and find the way in. UI design and design system work across heathrow.com’s parking, retail and transport sections.

Explore the experience
My contribution
UI design & design system
Client
Heathrow
With
Publicis Sapient
Year
2023
The Official Heathrow Parking page: a purple header, a photograph of hands on a steering wheel, and the Get a parking quote form with entry and exit dates, times, passengers and a terminal
The Official Heathrow Parking page on a phone, with the quote form stacked under the title
The purple Get a quote button

Help passengers compare what matters: the terminal, the time and the next step. Parking, retail and transport share a system, with different ways to plan each task.

  • 6official parking products
  • 4terminals on every quote form
  • 3booking steps: search, basket, checkout
  • 6travel categories on one hub

Context.

Every drive to an airport ends with the same question: where does the car go, and for how long? An hour to drop someone at departures is a different errand from two weeks away, and the price of getting it wrong is a long walk with luggage or a bill at the barrier.

The work covers UI design and the design system for parking, retail and transport with Publicis Sapient in 2023. These October 2026 captures show the live site with updated parking names: Terminal Parking and Park & Ride.

Ask when and where before anything else.

The parking pages lead with a quote form, using dates and a terminal to return relevant options.

The parking landing page with the Get a parking quote form under the title
The Get a parking quote form: entry and exit dates and times, passengers, the terminal buttons T2 to T5, Find my terminal and Get a quote
  1. 01

    Entry, exit, terminal.

    Two dates, two hour bands, passengers and one of four terminals. A Find my terminal link helps anyone who only knows their flight.

  2. 02

    Then the options.

    The quote returns a list for those dates: the product, its terminal, the transfer time, a short description and today’s pre-booked price, sorted by price or transit time.

  3. 03

    Short stay, beside the terminal.

    Terminal Parking explains walking access, keeping the keys and on-the-day prices in one place.

  4. 04

    Long stay, by shuttle.

    Park & Ride gives the shuttle frequency, transfer times and bus stops for each terminal.

  5. 05

    Compare on one page.

    Distance, terminals and price for all six products in one table, with the premium options explained underneath for anyone short on time.

Six ways to park.

The October 2026 captures show tabbed summaries comparing proximity, transfers, key handling and terminal availability through photographs and key features.

Terminal Parking

The Heathrow Terminal Parking page: a purple title band with a photograph of a car park, and the quote form beneath it

Walking access and key handling lead the summary.

Park & Ride

The Heathrow Park & Ride page: a photograph of travellers with luggage over the quote form

Shuttle information and terminal coverage lead the summary.

Priority Park & Ride

The Heathrow Priority Park & Ride page with the quote form and a notice about the Terminals 2 & 3 closure

The advertised transfer time distinguishes the priority option.

Meet & Greet

The Heathrow Meet and Greet Parking page with the quote form under its title
The Meet & Greet tab’s photograph: an attendant at the Meet & Greet reception taking a traveller’s keys

The summary highlights handover, terminal access and collection on return.

Pod Parking

The Heathrow Pod Parking at Terminal 5 page with the quote form
The Pod Parking tab’s photograph: a family laughing inside a driverless pod

The pod connection and Terminal 5 destination define the option.

Valet Parking

Let us do the parking for you: the Meet & Greet and Valet cards with their key features

Forecourt handover and return collection lead the summary.

The booking flow keeps the same form.

The map separates search inputs, parking products and booking stages. The following screens show how a result opens into parking and add-on choices.

When and which terminal, first.

Dates and the terminal determine which parking options the quote returns.

Short stay, long stay.

On a phone, product details and price tables stack into one column. Terminal Parking leads with walking access; Park & Ride gives more space to the shuttle information needed to plan the transfer.

  • The Terminal Parking page on a phone

    Terminal Parking on a phone.

  • Terminal Parking pricing guidance on a phone, explaining pre-booking and drive-up prices

    Pricing guidance.

  • The Park & Ride page on a phone

    Park & Ride on a phone.

  • The Park & Ride price table on a phone

    Its prices.

Shop and eat: a directory that knows your terminal.

Shops and restaurants are spread across terminals and both sides of security. The directory opens with the full collection; terminal, area and category filters narrow it to relevant options.

The Shops at Heathrow page: a purple title over a photograph of shoppers, terminal buttons from All to T5, an area selector and category chips
  1. 01

    Shops at Heathrow.

    The directory opens with every shop, A to Z. Terminal buttons and a category row sit above the grid; the Reset link clears both.

  2. 02

    Cards that name their terminals.

    Each card is a logo, its categories, the terminals it trades in, a Browse link to the online shop and a View details link to its page.

  3. 03

    Terminal 5, filtered by category.

    Terminal 5, Beauty and fragrance, and Travel essentials narrow the shop directory.

  4. 04

    The same pattern for food.

    Restaurants reuse the layout with their own categories: casual dining, family favourites, pubs and bars, takeout, coffeehouse and café, dine in style.

  5. 05

    A shop page is a card with hours.

    Boots: logo, terminal tabs, area, a map link, a phone number and opening hours in one strip, then the description and a Browse button.

Plain paragraphs where a decision needs reading.

Rail comparisons use plain paragraphs for routes, journey times and connecting stations. The drop-off page explains the charge and payment deadline before terminal locations, map links and further details.

  • The Travel by train page's Your route to Heathrow from Central London: paragraphs on Heathrow Express, the Elizabeth line and the Piccadilly line, then transfer routes from four London stations

    Three direct railways, then the transfers, in plain text.

  • The Terminal Drop-Off Charge page's four columns: Terminal 2, 3, 4 and 5 drop-off area locations, each with directions and a location button

    Four terminals, four drop-off locations, four map buttons.

One voice across three sections.

The At the airport hub holds the retail section with the rest of the terminal: find your terminal, find your way, free Wi-Fi, then Find it at Heathrow, a block of five doors into shops, food and drink, facilities, services, and lounges, hotels and spa.

Each door is a sentence and a link, in the same yellow-icon pattern as the parking promises and the transport modes. The site keeps one voice across the three sections.

  • Three parking promises, each with a yellow icon: Regular security patrols, Access for all and Free cancellations

    Parking: Why choose Official Heathrow parking?

  • Three doors from Find it at Heathrow, each with a yellow icon: Airport shops, Food and drink and Airport facilities

    At the airport: Find it at Heathrow.

  • Three transport modes, each with a yellow icon: Train, Car and Bus and coach, with Find out more links

    Transport and directions: the modes.

What I take
from it.

A common design system supports three different tasks: comparing parking, narrowing a directory and planning transport. The yellow-icon summaries and terminal labels repeat where useful, while forms, filters and reading sections adapt to the decision at hand.

Ahmed Mowgoud — UI design & design system

Publicis Sapient — agency

Heathrow — client

Let's
have it.

UI/UX, Product Design, Interaction Design, Art Direction.
Let's Play together.