NET-A-PORTER.COM brings fashion and commerce to Google TV

By Daniels Lee of the Google TV Developer Relations Team

NET-A-PORTER.COM is a premium online luxury fashion retailer and is the first of its kind to present commerce on Google TV. They developed a 10-foot web app called NET-A-PORTER TV which offers a unique way to view and shop fashion directly from your living room. In this post, I'll briefly describe the user experience followed by some technical points shared by the NET-A-PORTER Labs team.

NET-A-PORTER TV users can watch a variety of videos featuring designer runway shows, interviews, and additional feature clips. Users can also browse their collection of luxury name brand items from premium designers like Phillip Lim, Alexander Wang, Michael Kors, Erdem, and others. When you watch runway videos, a vertical product carousel is displayed showing items matching the runway model's outfit. The product carousel dynamically updates and stays in sync with the video. While browsing, you can select to view more details about any specific item and add it to your shopping cart. When you’re done, you can complete your transaction on the original site.



Contextually matching merchandise items based on video playback is not only compelling to users but also makes online shopping a bit more more interactive and enjoyable. This adds a nice touch which facilitates a low-pressure and casual experience, great for the living room context.

The NET-A-PORTER Labs team split the web app into two major sections, video and user interface. For video, they used a lightweight JavaScript MVC wrapper around a chrome-less Brightcove player. The model fetches video data, the view manages video playback, and the controller ties the two together. For user interface, they relied on jQuery to navigate the DOM and make their app keyboard navigable. The team created a custom event handling system which captures key events and calls handler functions corresponding to a specific set of elements. They also used CSS3 transitions to animate vertical scrolling of the product carousel.



To take a deeper technical dive into the inner workings of NET-A-PORTER TV, be sure to check out their article written by James Christian and Scott Seaward from the NET-A-PORTER Labs team. This article describes everything from the initial concept to interface design and even to video production.

We thank the team at NET-A-PORTER.COM for their continued dedication, support, and persistence in improving their Google TV web app. We look forward to seeing what they come up with next.

Daniels Lee is a longtime Developer Programs Engineer, fostering relations with several developer communities since joining the the team in August 2006. He openly confesses his love for JavaScript and recognizes its profound ability to make the web more interactive.

Posted by Scott Knaster, Editor