Responses by Adriano Esteves, founder and creative director, Bürocratik.

Background: Hi Fly is Portugal’s biggest private airline company, operating worldwide and specializing in wet lease and charter services. With a fleet of more than 20 aircraft, Hi Fly needed an updated site on the technological vanguard that would memorably position it on the wet-lease market. The new site thoroughly presents each aircraft number plate available among its fleet in every possible detail: photos, videos and full technical specifications so that clients know exactly the condition of each airliner.

Favorite details: The highly interactive final result on good-to-middling devices and an equally interesting fallback version for older devices and mobile platforms. This makes information easily accessible for all, and the ones with time to look for all details get the full experience on a memorable website for an industry that seems to stall a lot when it comes to its digital presence.

Challenges: Development wise, to get the best ratio of textures and models to their impact on the machine’s hardware. The real-life logistics on having an aircraft available for filming was especially hard. This ended up causing several cancellations and a legendary, 41-degree celsius day inside an A380 with more than fifteen people sweating bullets divided across the aircraft’s two floors—on a four-hour sprint—without air conditioning. It’s more than mindblowing the costs of running an aircraft, even on terra firma.

This was a very demanding project both technically and logistically, so we had a clear roadmap ahead of us from the get-go. The development was faster than the photo and video sessions that took place in Lisbon, Beja, Malta—and the next one will be in Istanbul!

New skills: This was the first site of many sites where we used WebGL in the core of the digital experience. It’s always when we do things under pressure that we get to new heights. The final struggle was developing an experience on multiple devices with drastically different specifications. Even knowing the GPU specs wouldn’t tell the site which load it was on, and that would impact its performance. The solution we found involved a small initial test of the current device performance and a quick adjustment of some key features of the WebGL renderer.

This test changes the size of the textures uploaded, the quality of the render and—if for some reason the device wasn’t able to deal with the site—we give the user a fallback experience that is as close as possible, with still renders that have their own animations, which recreate the transitions we made for the 3-D version of the site. In the end, it’s really two websites in one.

Navigation structure: Each aircraft has one-page section with all the necessary details and also has a dedicated page with a clear distribution of specifications, video and photography. The homepage was reserved for the new big kid in town—the Airbus A380—with an obvious, direct way to choose the rest of the fleet. One hover and a click would be equal to a wow; that was our thinking on the design.

Just like a flight, you want the transitions to be as smooth as possible, so we implemented 3-D WebGL aircraft animations that provide seamless transitions between sections. Also, visitors can change the aircraft livery, a service that Hi Fly also offers its customers.

Technology: For the site’s back end, we used WordPress for easy client management. For the front end, we mainly used JavaScript, HTML and CSS. The aircraft are created in Blender and incorporated on the site with three.js—20 aircraft with four textures per model to increase the detail, adding up to around 60 files—and the animations and transitions are done with the help of GSAP.