The Topography of a Product Detail Page

By , User Experience Director

Picture 066

Anthro is a designer and manufacturer of useful desks and electronics carts, right here in Portland, OR.  They’ve had a successful career making workspaces more organized and ergonomic for many years.

I use a stand-up desk at work, but recently was looking for a convertible desk that I could raise and lower depending on the needs of the day.  I often find that tasks that require high amounts of cognitive activity require “taking a load off” so to speak.  So I went right to the source and started looking around at electric stand-up desks that raise and lower at the press of a button.

 

Anthro_screenshot

 

This is the current product detail page for one of their convertible desks.  Overall, this is a functional page with a few things I really like:

  • They’re telling a story with their images along with captions.  Desks aren’t the most exciting product in the world, so they’re showing the products in use, which lends a notion of scale and size.  They’re also successfully telling the fitness story properly, showing the products used while standing and in tandem with exercise machines.  Very nice.
  • They’ve also laid out the benefits well from a copy/content standpoint.  The top level messages are tight and understandable by just about anyone shopping for a desk.

However, they are missing out on some key opportunities with regard to the overall structure of the page.  There are a lot of things they’re trying to tell the customer all at once, and that’s causing the primary content and call to action to get a little lost in the mix.

  • Overall the page template feels pretty cramped – there are a lot of elements competing for the customer’s attention.
  • The small product detail images are a missed opportunity to leverage the size and quality of the images to help tell that larger story.
  • The primary call to action is nestled within quite a few other boxy touts, which takes the focus away from the main action of the page in favor of informational touts.
  • All of the right rail touts are highlighting the benefits of the product, and could probably be consolidated into a single tout that spawns a modal window which allows the customer to cycle through all the different secondary features they’d like to highlight.
  • All of the pricing and configuration information and options are hidden on the subsequent page.

So what could this look like?  I’d like to show two different rough wireframe ideas, the first of which would be the most minimal in terms of work.  It more or less just redesigns the page within the same footprint we’re currently using.

 

anthro_pdp

 

This design maintains all the essential elements of the existing product detail page, in generally the same existing structure.  Let’s go through it from the top to the bottom:

  • It’s got a much larger and more engaging image panel that integrates both still photos and product videos in the same area.
  • The reviews are elevated and enlarged to get the user’s attention, and clicking on that would focus the customer on the reviews tab down below, with an elegant, eased scroll to get them there.
  • There’s a larger product call to action that pulls the top-level options and pricing information to this page, with a strong, clear call to action to invite the customer to start pricing out and configuring their desk.
  • A single ‘Why buy this product?’ tout that encapsulates all the secondary product feature touts into a single call to action
  • Product feature images are larger and more engaging, with top-level headings that communicate each benefit point.  If customers want to dig in deeper, a touch or a click on each of them spawns an overlay that explains the feature in more detail.
  • We’re still using the tab structure, but the tabs are better integrated into the page.

Overall, I think this is a much more engaging method of getting customers interested in this product.  But what if we want to take it a little further with fewer constraints on the design?

anthro_pdp_-_modern

Now we can see how things can get even better with greater simplification, quality of images, and interaction improvement.

  • The primary image / videos and calls to action / touts / social images are co-existing right at the top of the page as a single cohesive block.
  • Then we reimagine the rest of the page as a long scrolling experience that has anchor links further down the page that auto-scroll when clicked.  Once that anchor link block hits the top of the viewport, it docks there and transforms:
Screen Shot 2015-03-25 at 10.19.31 AM

 

  • Now, when the customer is reading the features, reviews, etc.,  the interface follows along with them and the page content slides underneath the navbar. If they want to quickly scroll up or down to another section, all they need to do is click on the interface and the page will auto-scroll to their destination.
  • The feature content is also improved in this design, with large, immersive images paired with easy-to-read headlines and benefit copy.
  • Nothing is hidden – everything is clear and accessible to the customer.  There’s far less visual noise that can distract the customer from what they need to do: easily learn about, read proof points,  and ultimately purchase the product.

The point of these little exercises, besides the fact that I enjoy redesigning other people’s stuff,  is to always remember there are countless ways to improve your designs.  Show your work to your peers, get their input and push, push, push for the best possible solution within whatever constraints you’re working around.  Okay, that’s enough of my soapbox for today.  See you next time!