Skygate: Brisbane Airport Retail Directory

2017
Laptop
Skygate: Brisbane Airport Retail Directory

Technologies

Drupal 8
jQuery
Pathauto
Google Tag Manager

Skygate is the retail, dining, and business precinct at Brisbane Airport. CimpleO built the Drupal 8 site for Brisbane Airport Corporation (BAC), hosted on Acquia alongside the main airport site, bne.com.au.

The Challenge

The brief called for a store and dining directory visitors could actually filter, not just a flat list, with content editors able to assign filter attributes to each store themselves through checkboxes in the CMS: no developer required for a new listing. Designs came from BAC’s InVision files; the build had to match them pixel-for-pixel across three responsive breakpoints, with a hamburger nav on mobile.

The site also had to fit into an existing ecosystem rather than stand alone: the subscription form needed to embed an iframe from BAC’s existing e-marketing platform, the site search had to follow the pattern already live on bne.com.au, and even a store’s URL had to resolve the same way: bargain-mania, not Bargain%20Mania, matching the parent airport site’s convention. Consistency with bne.com.au mattered more than a from-scratch design.

What We Built

Store and dine directory

A filterable listing view where a store can carry multiple filter attributes at once (cuisine type, precinct location, amenity), all assignable per-store from the CMS via checkboxes, sorted alphabetically regardless of which filter is active. Store and dining detail pages carry their own banner image per listing, with a fixed set of social icons (Facebook, Instagram, YouTube, Twitter) an editor picks from rather than typing link text.

Curated home page

Four anchor retailers (DFO, Woolworths, Novotel, and Dan Murphy’s) sit pinned to fixed positions on the home page instead of sorting alphabetically with everyone else; the rest of the tenants scroll through a carousel built on Drupal’s “promoted to front page” flag, so an editor curates the rotation by flagging a store, not by touching a template. The home page content type also carries an editable icon grid (trading hours, getting here, stores, dining) and header/footer navigation reworked for three breakpoints, with a hamburger menu carrying primary and secondary nav on mobile.

Subscription and analytics

A subscribe form embedded in header and footer as an iframe pointed at BAC’s existing e-newsletter platform, and a Google Tag Manager container wired into the page head and body per BAC’s tracking spec.

SEO plumbing

Pathauto-driven URLs (page titles instead of node/141, hyphenated to match bne.com.au’s own slug format), an XML sitemap, and a Drupal 8 site search modeled on bne.com.au’s results page, so the two properties behaved consistently for a visitor moving between them.

Image handling

Retailer logos got standardized to a 298×194px spec after pixelation complaints on the store landing page, and tile images that were shipping at ~2.4MB and 3000×2000px got compressed down. Nobody had noticed the weight until the directory page was slow to paint. Focal-point cropping went on banner images so a text overlay stayed legible regardless of which part of the photo a given breakpoint cropped to.

Cross-device hardening

A long tail of fixes, verified against a real device matrix: Samsung Galaxy S6, iPhone 5s/6/6+, iPad Air 2, plus BrowserStack runs for iPad Pro and iPad 5th-gen. Hamburger menu hidden behind the trading-hours bar on Android Chrome and iPhone 6, horizontal scroll and a squashed trading-hours widget on iPad, carousel arrows drifting on hover, transitions that ran too fast, store tiles rendering 10px wider in every third column, and layout breaks specific to Safari 11.

Delivery

The build ran from late September to mid-December 2017, covering everything from the initial content types through the final round of device-specific polish before go-live.