Home
Blog
Tag: user-experience
28 Apr, 2013

Bellroy: An eCommerce Product Detail Page Audit

Introducing the Slim Sleeve Wallet

 

This site sells wallets in different shapes and sizes. Nothing earth shattering... What makes this company stand out from the crowd and charge a pretty penny for their goods? We argue that the investments made in photography, videography, and UX/UI really seals the deal. The site can take a customer who's never heard of your product to seriously considering making a purchase. Thus improving conversion rate and sales. On those merits alone, we should be seriously considering the front end marketing expenses required to pull this off as a wise investment on behalf of your businesses ecommerce strategy.

WireFrame Layout

Notes: If you imagined only looking at the red boxes with no pictures or content in them layout suggests the product value must be best expressed visually. Approximately 70% of the 'Above the Fold' section of the page is reserved for graphically showcasing the product.

The top navigation has 4 categories and only 1 dedicated to directing traffic to product which helps crystallize how the user should use the site. If your product tree is more complicated then this layout won't work for you. These questions should be seriously considered when going through the planning phase when architecting a site design and information architecture.

The functionality chart in the bottom right was a clever addition that we don't normally see but encourage. It helps users quickly and visually self select if this product is right for them based on key feature trade offs. Again, further establishing trust and moving someone through their mental product purchase cycle.

 

Product Description

 

Font Family: Times, Serif; Lato, Sans-Serif

Font Sizes:  20px, 13 px, 10px

Font Color: #333333, #d5753b

Notes: Good use of italics to highlight core utility differences early on in the description. Typical convention for highlighting features guides us to try and state at least 5 +/- 2. 

 Video Merchandising

 

Notes: They used stop motion production method to achieve the frame by frame movement in this piece. This is typically low cost process but requires a healthy dose of patience given its repetitiveness. You can pull this off by using a Canon 5D , solid prime lens, a sturdy camera stand, a controlled ambient lighting environment, and a great post production editor for effects and bringing everything together.

Because of the low cost, you can produce multiple variations of the same template to showcase a product use-case for the consumer. You can see that Bellroy clearly nailed it here and therefor showcase it prominently throughout their site.

Conclusion

Thanks for taking the time to read the article. If you have something to add or have questions on best practices please feel free to add a comment below. 

Blacksmith Digital is a full service digital marketing agency in Chicago, IL. If you'd like your site audited or would like to speak to one of our experts please contact us

Oh and sharing is caring!

Receive special offers and be the first to find out about new
818 - 445 - 1985
12220 Ventura Blvd. Studio City CA 91604