Responses by Mehran Azma, design director; Avery Bibeau, developer; Kenn Fine, executive creative director; and Josh Kelly, content strategist, FINE.

Background: Designed and built by FINE, the Unofficial Z Collection website plays a key role in a larger strategy to establish a master brand that brings together an eclectic suite of Pebblebrook Hotel Trust’s Z-branded niche hotels. While the site unites the Unofficial Z Collection, each hotel is designed—online and off—with its own rebellious, art-forward spirit and communal intent with inspiration from interiors by Dawson Design Associates. Together, they make a strong statement for something unique and “unofficial” in a sea of similarity: unapologetic, unexpected, raw, playful or inspired. Ultimately, the site elevates the brand not only within the cities each property occupies but as a collective introduction to the global stage and audience.

Larger picture: The website is part of a broader digital campaign promoting the Unofficial Z Collection brand as a whole. It is the central gathering point of a larger digital campaign to introduce the Unofficial Z Collection brand, which also plays out through social media and similar digital marketing platforms.

Design core: The website’s core features are an approachable interactive experience that builds intrigue and entices investigation through elegant, unexpected transitions and sleek animations. The feel and physics of the site go a long way to establishing the desired brand effect.

Favorite details: There are several standout moments throughout the site that help to “show, not tell” the brand intention, including the introduction hero animation and transition style of the video carousel; the bold, yet minimalistic approach to the “Minifesto” page; and open hamburger navigation transition styles and visual cues.

Challenges: The ideation of unique transition styles and site physics, as well as the complexities of developing how they could be executed programmatically, became a central focus and collaboration between design and development. The idea was something that looks and behaves as a truly bespoke feature—a worthwhile challenge.

Navigation structure: We designed it with the intention to usher viewers into a pathway that favored logical orientation and pathways upfront without sacrificing visual appeal or distinction.

New lessons: When development-oriented designers come together with design-oriented developers, the sky is the limit. The overlapping combination and collaboration of talents can lead to a truly distinctive digital experience that site visitors can see and feel. It’s how a website can begin to suggest how much care and collaboration goes into delivering the Unofficial Z Collection experience offline as well.

Technology: The site is built using server-side rendered Vue.js and Ruby, a Rails-based API. The hero experience uses WebGL and GLSL to render special effects.

The design and development teams collaborated extensively and iteratively on the look and feel as we learned more about the content strategy for the homepage and discovered what was even possible on the technical end. We didn’t want the efforts spent building the homepage hero to only be seen on that page, so we found a way to integrate it into the navigation menu with the logo mark’s brushstroke and carried the experience through to the rest of the pages. Our choice of front-end language allowed us to create these seamless and integrated transitions between pages across the site.

Anything else? The waving flag background of the “Minifesto” page, while appearing to be video-driven, is actually code-driven.