I led a team of 50 to redesign and rebuild much of vw.com.

The goal was to create the best brochure site ever — to help people really fall in love with the cars. I worked with the brand, brochure, and social teams to design a truly integrated approach to content creation for every channel.

We rebuilt the new sections of the site on AEM, which allowed for a lot of flexibility and customization throughout. We designed a modular system that could allow VW to create new pages almost instantly, or even re-order sections of a page based on the model.

VW_MBP_Brochure_Pres_21916-09AP.004

VW_MBP_Brochure_Pres_21916-09AP.013

We redesigned the models pages (there were 13), the model landing page, and created magazine-like news hub, but my favorite part of the project was re-inventing how a 360º walkaround works — which is one of the key features to really sell consumers on a car when they are shopping online.

VW_MBP_Brochure_Pres_21916-09AP.005

Custom 360º video is costly, especially given it’d be a recurring cost when it came to update the site every year when models are updated, so we needed to come up with an affordable and lightweight solution that worked great on mobile.

🌊🌊 I was inspired by theatre sets of ocean waves. You know the ones where two cutouts of waves move back and forth to create a parallax of ocean currents? 🌊🌊

Well, my thinking was if we created a background that moved one way, and was seamless on each end, and the ground moved the other way while each view of the car — there are 29 — spun in place sort of pinned to the ground, the viewer would feel as if they were walking around the vehicle. And it worked! Check it out on the site to get a feel for it yourself.

vw360-small

Above is a screen record of what went live. Below is an initial comp to explain my concept to the dev team.

VW-360

The biggest change from concept to build was how the ground is handled. To give the perception of depth, and to avoid it looking like the car was gliding across the pavement, the dev team came up with a way to tilt an image of pavement in 3D space, then tile it. This meant we could create several types of ground, including pavement, gravel, even snow, and change it per model like the flick of a switch. They even added a vignette overlay to let us change the hex color so the ground could feel like part of the background plate. All this customization made for a long-lasting solution to a critical part of the car shopping experience.

Kudos to my dev team for making this one happen. As a result, VW can easily update the background photo with the same photo taken for the brochure cover.

Below is a video walk-though of one of the pages: