An alternative approach to product page design

.net magazine recently asked me to design the perfect eCommerce product page as a part of their 'build-off' feature. This is an excerpt from that feature.

Sixteen years after Amazon launched, most eCommerce product pages still look like they have been thrown together from a database of photos and bullet text. The online shopping experience is dry: it’s about facts and prices. That leads to a cycle where customers become obsessed with researching facts until the purchase seems overwhelming and they bail out. Or one where price is the deciding factor and retailers are caught in an endless price war.

Shoppers tell us that emotion pays a huge role in their buying decisions. I wanted to create a product page that would let a shopper fall in love with a product. To do this, I created a fictional high-fashion shoe retailer called Beech & Taylor, which combines the best of eCommerce interaction design with the styling and engagement of a fashion magazine.

Many retailers offer a few paragraphs of ‘blurb’ describing their product. Every product is ‘wonderful’, ‘stunning’ or ‘unique’ which ends up feeling dreary and samey. Beech & Taylor uses this text to paint a picture of a product and give it a personality. The typographic mix will resonate with readers of fashion magazines - elegant yet legible Hoefler and punchy, immediate Alternate Gothic No 3. The colour scheme utilises a smooth monochromatic backbone enlivened with a distinctive signature blue.

There is a lot of content on the page, so I have used white space and an underlying grid to create a sense of order and a clear visual prioritisation. The clearest call to action is the Add to Basket button. And, of course, the product photography takes centre stage.

Key features:

1. One size doesn’t fit all. Bespoke approach to content, presentation and template used to differentiate the product and company, with a unique editorial element accompanying essential product information.
2. Persuasive design. The design employs persuasive techniques to motivate the customer to action, including the concept of scarcity (‘Size 8 - only 6 left in stock’).
3. High quality photography. An oldy-but-a-goody. Research continually emphasises the importance of high quality, good size photography. I’ve carried over to the design of the entire page, not just the product shot.
4. Analytical and emotional benefits. Studies here at cxpartners have shown that emotional factors can play as great a role in the decision-making process as analytical ones, therefore both have been equally catered for.
5. Product focus. Do not sidetrack the customer with information on the background of your company - by all means make the history available elsewhere on the site, but this page should focus on the product, and the product only.
6. Simple pricing. Customers like to see savings as a value and are confused by percentages. Showing the previous price is the quickest way to do this.