12 innovative features to make your product pages come alive

Being able to bring products to life on a two-dimensional screen has been a difficult issue for e-commerce UX teams. How do you translate the physical interaction between a person and a product they interact with in-person to the online world? 

Buying clothes online always felt like a risky venture. It’s only thanks to an overly generous returns policy that some online retailers have maintained trust between them and their customers. What about bigger, more expensive stuff? Have you ever bought an oven online without seeing it in the real world? How about a car? A shed? 

The thing is: People don’t want to waste their time joylessly ambling around shops, with all the disappointments, frustrations and lines that shopping in the real world brings. The internet is much nicer, quieter and quicker.

However the internet still has to catch up with the real-life experience of endlessly pulling open drawers in IKEA.

The following examples bring potentially difficult to describe, expensive to buy or overly feature-packed products to life beyond the standard text-based description or paginated product shots.

We’re not saying these are necessarily suitable for your own product pages—your audience will have different needs and expectations. These are for inspiration—to help you think about how you can bring your own product pages to life.

Pop Chart Lab

The "infographics for your own home" retailer has a simple solution to show off its "100 novels you must read" checklist poster in a simple way: gifs.

Cards Against Humanity

Whether you think it’s brilliant and hilarious, or an easy way to get a cheap laugh, Cards Against Humanity has an elegant way to visualize how to play the game in the header of its homepage. 

Apple store

If you’d like to learn more about the features of the new iPhone, you could watch the 119 minute keynote featured on the Apple store or—if you’ve already wasted your life enough this week— jump straight to the customization page. Here you can catch a glimpse of how the front will look when hovering over your preferred color. 

Bellroy

The wallet company that exclusively generates all of its awareness from web design round-ups like these, helpfully visualizes exactly what you can fit in the wallet down to the last coin and expired loyalty card.

Also for bonus points, you can click on any of the available color options and every image view will change to that color. With just a little bit of extra photography work, you can cater to any view your visitor may want of their desired configuration. 

Schuh

Schuh work their boots off trying to translate the real-life shoe buying experience to the online world. Product pages are filled with images, customer reviews, sizing comparisons and live-chat. 

Palace

Sure, most e-commerce stores have a hover-zoom function, but this one zooms right into the very fibers of the top. You’ll come to Palace for the laughs, but stay for the quality stitching.

Piccadilly Records

Although this may seem like a no-brainer, few online record stores do it. Instant playback of featured tracks on the webpage itself. Sure you can fire up your preferred music streaming provider and research that way, but that’s an extra few steps and if the record is obscure, there’s no guarantee you’ll be able to hear it any other way. Plus it means you no longer have to brave asking the record store clerk to have a listen on the shop decks and embarrass yourself because you don’t know the right speed to play it on.

Hotel Chocolat

Hotel Chocolat takes you on a deep dive into its chocolate boxes.

Each individual chocolate is visualized below the box.

And each chocolate has a "quick view" that lets you explore the flavors and ingredients in greater detail.

Wow, I feel like a child web developer in a candy store that has been designed quite well.

AO.com

Large white goods – are you really going to buy big expensive items without first seeing them in a showroom? Well, judging by the success of AO.com – Yes. But success doesn’t come easy, AO has piled a ton of thought into how to replicate the showroom in your front room. Mainly through using loads of video explainers and walkthroughs.

Although the above is clearly a branded video, AO also offer plenty of their own independent guidance. Here’s how to cook the perfect chicken. 

Adidas

User generated content on product pages is interesting. Trainers suspended in negative space may be the norm, but what do those same trainers look like in the real world?*

Brickfielder

Belazu

Selling food on the internet is a tough one to bring to life. But Belazu have at least provided a practical and appealing way to demonstrate its ingredients by providing lots of lovely recipes. 

The above product page scrolls down to a number of options. 

And you’re then treated to this video, that accurately depicts the steps in the written recipe itself.