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.
