The Patagonia Kit Builder
Product sets driven by the users' interests
Patagonia Kit Builder
Browse kit products and colors in one interface
Patagonia Kit Builder
Useful data ratings help in choosing products
Patagonia Kit Builder
Patagonia Kit Builder
Patagonia Kit Builder
  • 1
  • 2
  • 3

We had the good fortune to team up with long-time partner, Patagonia, on a landmark project – their new online ‘Kit Builder’ tool. Leveraging the technical concept of 'layering' for different outdoor sports, we designed and developed a product configurator to help users build and purchase custom layering systems to meet their personal needs.

View the live Patagonia Kit Builder here.

Compel users to interact and have fun with the tool

Optimized for iPads and touch devices

We knew going in to the project how important it would be to get people to use the tool and play with it right away. It had to be ‘inviting’ enough to dig in. Secondly, being able to surf through products in the context of a complete layering kit forced our team to think outside the box of typical product interfaces and come up with something new and different. “Giving users a multi-product sandbox simply hadn’t existed anywhere,” commented Pete Thomas, ZaneRay’s design lead on the project. “Really, we’re just trying to mimic how customers normally shop and piece items together; both on a technical and aesthetic level.’ Once users dial in their product selections, they can add the kits items directly to their cart from the configurator, providing a smooth purchase path.

This hot rod has data under the hood

At first glance, the highlight of the Kit Builder to many might be the ability to view all the products of a kit, together, and be able to make color choices and slight tweaks to personalize it. But to the gearhead, the real-time display of how their choices stack up for the criteria of outdoor temperature, conditions (wet vs dry) and exertion’ levels – for both product-specific and average kit ratings – gets them going.

Data-driven product ratings

As needed, products are chosen based on the rating and adjusted one layer at a time. And for the weight conscious alpinists, products and kits are displayed to the gram!

Optimized for tablets and touch devices

Today’s web surfing and shopping mentality has moved away from the desktop and more toward the more practical tablets and touch devices, so we built the tool to be completely touch friendly and specifically designed the interface for this type of user. This also meant developing with advanced CSS and HTML5 techniques in lieu of Flash.

As mentioned by Bill Boland, Digital Creative Director at Patagonia:

"There are gear finders and outfitter tools in the e-commerce space, but none like the Patagonia Kit Builder. Optimized for touch devices, the interface is built in HTML5 and employs advanced CSS methods to deliver a unique shopping experience for the Patagonia customer."

Socially conscious

Being such a unique tool, it made perfect sense to leverage what we could with social media sharing. Linking directly to specific kits, users can show off their perfectly matched ensembles and spread the good word about proper layering. As shown here, it's no surprise that the Patagonia Kit Builder is socially making waves, educating customers on proper layering for the outdoors and driving sales.

Word on the Street

Rave reviews on twitter for the Patagonia Kit Builder