Responses by Büro

Background: Kopke is the oldest port wine house, crafting wine experiences since 1638. It takes time to make Port wine, so time was a key element behind the website reasoning. Additionally, the website had a leading role in Kopke’s sales strategy, so each product needed to have a landing page of its own for sales and promotion efficiency.

Highlights: The website is an immersive experience that explores the company’s history and juxtaposes it with the sold products. The transitions and content scroll are smooth and aim to get the users’ attention without hammering them with bells and whistles, creating an impactful and memorable experience for all Port wine lovers.

Challenges: The performance on mobile and desktop. With demanding multimedia elements served across browsers, and a flawless store, good performance was key so that users stayed on the website as much as possible. Also the content took a big part of the available resources.

Favorite details: The website storytelling and the product photography. We know that users don’t have a lot of time, so we used other tools to catch their attention: videos with special attention to details that would tell the story, music that would transmit an unmistakably Portuguese flavor into the blend and a nice voice giving the key elements of the brand positioning and context across each section.

Navigational structure: Kopke’s website demanded a clear segmentation between the brand positioning and the store, so we decided to make a horizontal scroll for the first and a natural vertical scroll for the second. This gave us a clear language distinction for the sections.

Technical features: To make interactions smooth, we used countless elements that compose the UI using the GSAP animation framework timeline. All the elements had to be in sync with the music and voice audio interactions. Pizzicato.js gave us the juice we needed. In addition, Mapbox came to the rescue for the terroir section, as we needed a custom UI based on the geographic information. MapboxStudio also helped us create the layers/styles and geographic data.

Anything new: We learned that audio design is something that often gets neglected in website experiences. Working with patient musicians that can provide us the audio separations as we go through the process was key.