VANS.cOM

The Vans RFP was a good one: Combine all 17 of their sites into a single experience – without losing the individuality and eclecticism that makes each sub-brand feel unique.

 

ANIMATIC

 

nAVIGATION

To make it easier for people to get right into the content, we stripped down the navigation and focused it around lifestyles instead of products.

 

HOMEPAGE

This streamlined navigation allowed us to clean up and organize the homepage. So when people got there, they would immediately see the expansiveness and diversity of the Vans world.

 

FILTERING

Vans.com was all about filtering. If someone selected SKATEBOARDING from the nav, all the products, photos, videos, articles, social feeds, music, etc., would rearrange to filter out anything that wasn’t relevant to that sport. This made it easy to surface all kinds of buried content and was a system that could be easily applied to every part of the site.

Once the content was filtered, the design system we developed was flexible enough to still feel like you were on a unique page. So the SKATEBOARDING page felt and looked different then the SURFING page.

 

SHOPPING

Of course Vans needed to move products. So we added a JUST SHOP toggle to the main nav. Once turned on, the site would filter out everything that wasn’t a product you could purchase.

 

PRODUCTS

Outside of the JUST SHOP feature, we always kept products in the context of the lifestyle they were designed for. Meaning you’d never just see a straight up shoe without it being in the context of the Vans skater who wore it, a story about why it was developed, product reviews, and ideas for putting together a head-to-toe hookup.

 

RESPONSIVE

Knowing the Vans customer was always on the move, the site was responsive. Duh.

 

COMPONENTS

There were tons of other bells and whistles we came up with. But I’m not gonna show those so we can repurpose them for another pitch.