Six Flags Fright Fest

An annual spook-tacular event that takes place at Six Flags Theme Parks

tickets-chrome

Web Design Goals

  • Responsive
  • Highly image driven, to give each park the power to control their own visual language
  • A multisite experience for all 13 Parks that are involved in Fright Fest
  • A one-page scrolling micro-site to minimize outbound traffic and bounces
  • 6 sections of quick, concise sections
  • Delightful and meaningful interactions
  • A useable, and easy to read pricing table
  • A Fixed Scrollspy Navigation

Front-end Goals

  • Advanced Custom Fields for easy content editing
  • Leverage a CDN for assets and utilize Trellis’ FastCGI Caching
  • AJAX lazy load content on scroll
  • A dead-simple 404
  • A gallery, Slick Slider and an accordion (by yours truly)
  • Use background-blend-mode where IE won’t break everything
  • 5MB bandwidth budget (before the autoplaying YouTube video)

scares-chrome

mazes-chrome

new-chrome

rides-chrome

Fixed Scrollspy Navigation

As a user scrolls, the navigation highlights what section is currently in the viewport.

 

Autoplay Hero Video

Not exactly bandwidth friendly, but luckily it doesn’t autoplay on mobile. The Slider Revolution plugin made this feature super easy to implement.

 

Hero Tile Repeater

The park editors can add as many tiles as necessary (2–6) and a park has an odd amount, the last column defaults to a full-width, so no blank spaces, yay for bitwise operators!

Responsive Accordion

The accordion displays thumbnail windows of artwork that reveals more information when the :hover pseudo-class is activated.

 

A Classic Gallery

A simple gallery, forked from the Magnific Popup Plugin.

 

Hover Cards

I wanted to show information for all the Shows at Fright Fest but it was a lot of copy to take in at once. I figured defaulting the opacity to 0 and reveal on hover would have a more impactful experience. However, all the cards information are visible on mobile.

A Useable Pricing Table

There are a ton of product options for consumers at each park. Like Disney, Thorpe Park, Cedar Fair and many many other theme park companies — Six Flags uses Accesso to manage virtual queueing and attraction ticketing. So we integrated Accesso ticketing into the pricing table call-to-actions on main products and promos.

 

Promo Tiles

Similar to the pricing table, but the hierarchy of space and form separates itself from the main hero pricing table.

 

Slick Carousel

It really is the last carousel you’ll ever need.

Leave a Reply

Your email address will not be published. Required fields are marked *