“Intelligent interactions and gorgeous photography make this lookbook a pleasure to browse.” —juror Ben Hughes
“Taking the paradigm of vertical-scroll web pages and using them to reveal layers of clothing is both elegant and appropriately informative for a technical clothing company. The excellent content and photography make this a class-leading experience.” —juror Nathan Moody
Overview: Winter apparel brand Arc’teryx wanted an online experience that emphasized how it keeps people both warm and fashionable in rural and urban environments alike. This online lookbook, created by Vancouver, British Columbia–based digital creative agency Pound & Grain, highlights adventurous travel stories by showing Arc’teryx’s products in their natural habitats. Instead of the usual lookbook design driven by e-commerce, Pound & Grain designed a scroll-driven experience that places a strong importance on digital storytelling.
•The site features fifteen outfits; each outfit displays one large hero image, seven outfit and story shots, and three photos that show its three layers.
•Visitors can click on products to open pop-ups with more product information and the option to purchase.
•Pound & Grain built the site with the ASP.NET framework and used HTML5, CSS3 and JavaScript for the front-end design.
Comments by Cameron Lee, Graham MacInnes, Jackson Murphy, creative director at Pound & Grain, and Kelsey Westbrook:
What was the most challenging aspect of the project? “Although we had previously worked with Arc’teryx, we had typically focused on product experience. This was the first time we tackled an entire lookbook. The biggest challenge was crafting an experience that would ensure that users were engaged with the journey and could interact with and view the products. We accomplished this by creating seamless transitions, so users don’t have to rely on traditional navigation.”
What was the thinking behind the navigation structure? “The content for this site is defined by two locations: Revelstoke, British Columbia, and Oslo, Norway. Because of this, we wanted to create access to either of these locations at any point in the experience. The location switcher enables this by instantly loading up the other destination in one click. A custom system for fluidly loading content provides a seamless transition between individual pages and the two main locations—content is always loaded dynamically with AJAX. We accomplished this by linking the page’s scroll directly to the navigation. When users reach the bottom of the page, it automatically loads the next activity.”
Describe some special interactive features. “There was a concerted effort to keep the experience clean and the content as the primary focus. We developed custom interactive tools that enable users to explore athletes’ layering systems. We also developed the ability for users to fluidly explore locations and activities through scrolling. We paid close attention to the transitions between pages to develop a motion and transition framework that seamlessly aligns with the brand.”
