Responses by Fenna de Wilde, developer; and Julian Mollema, lead designer, Build in Amsterdam.

Background: “The Expedition Baikal shoppable expedition is created for anyone interested in outdoor activities,” says Julian Mollema. “It highlights Eiger Extreme, the collection by Mammut Sports Group for extreme mountain sports. On the platform, the visitor follows Mammut Pro Team athlete Dani Arnold on an extreme expedition to the heart of Siberia, braving roaring winds, snow and ice. The platform showcases the use of Gore-Tex Pro and goes into detail about the creation of the Eiger Extreme collection.”

Larger picture: “The site went live together with the release of a documentary on Arnold,” says Mollema.

Design core: “One of the main features is the combination of experience and shopping,” says Mollema. “The user can decide to see which gear Arnold wears on his climb. Key products are highlighted to showcase the gear’s benefits during a critical moment of the expedition. For example, Dani goes through a subzero windstorm wearing the Eigerjoch Pro, which gives him enough protection to stay warm.

“We designed the UI style to help users navigate through the experience,” Mollema continues. “This UI is based on shapes that relate to the Eiger Extreme collection. Helvetica Now was used as the main font to tie the design to Mammut’s Swiss roots, and a minimalist, infographic style hints at vintage Swiss poster design, which uses a lot of simple rectangular lines.”

Favorite details: “We got really excited when we received the awesome content show by Mammut,” says Mollema. “They captured a real expedition with real weather conditions and a real climber.”

Challenges: “Besides the expedition content, there was no concept to showcase the products,” Mollema notes. “Therefore, we created a shoppable experience where it feels like you’re exploring an interactive outdoor magazine article while products are being highlighted.”

Navigation structure: “The website is one big scroll,” says Mollema. “We created four chapters that separately highlight certain aspects of the collection: the first chapter is the expedition, the second chapter is the use of Gore-Tex Pro Technology, the third is about Mammut’s 25,000 hours of development for its apparel and the last chapter shows the full documentary. Visitors simply scroll downwards to explore the entire site. Every page has a Netflix-type loader that takes you to the next page after a countdown.”

Technology: “We mainly use Next.js as the programming language for our projects,” says Fenna de Wilde. “We chose Next.js because it has a lot of built-in features, such as hybrid static and server rendering of React. With static site generation, the page is built once during deployment. This is a lot faster because the page does not have to be built on each request, only retrieving data once during deployment. For this project, static site generation was a good option because the data would not be changed after launch. Mammut Eiger Extreme is a hybrid website that uses both static generation and server-side rendering, as the website is multilingual. To get users to their preferred language, we have to request this on the server and redirect to the correct locale. After users are redirected, all pages are served statically.

“We use Vercel to deploy and host our websites,” de Wilde continues. “You can import your projects from git. When you push, a deployment is done automatically. Each deployment generates a unique link that you can view anytime. This is super handy for debugging or showing prototypes to the customer. In addition to Vercel, we use Contentful for our CMS. Contentful is a cloud-based web service that uses an API to retrieve data. We connected Contentful to Vercel through a webhook, so when there are changes in the CMS, a new deployment is done automatically.”

Special features: “Per each photo, you can zoom in to enter the gallery,” says Mollema. “If you click on the bag in the top right corner, it transforms into a shopping gallery, where products are highlighted per photo. We believe this way of browsing works perfectly for the Eiger Extreme collection, because viewers can immediately see what features the product has.”