Evolution of the Zappos Product Page

We’ve come a long way in how we present products to our customers since the early days of the Internet. Let’s dust off WayBackMachine.org and see what’s changed…

Then

Zappos Product Page — Circa 2003

We’ll focus on Zappos.com circa March 2003 (or thereabouts). One of the things that stands out to me is how, arguably, e-commerce product page design has failed to evolve significantly from the basic template of 2003. Of particular note: the layout of the product images relative to the “buy box” (above and to the left), the next and previous image carousel metaphor, the Add to Cart button placement, and position of product descriptions relative to other elements on the page. Many e-commerce sites remain stuck in this paradigm.

Nostalgically, the screen from 2003 reminds me of the struggles web designers (myself included, albeit in B2B space) had in those days, including:

  • “Maybe a back button on the page will keep people from hitting Back in the browser too easily and leaving the site!”
  • “What if they scroll down and don’t see the Back to Browsing button we added at the top??? Let’s put another one at the bottom!”
  • “Internet Explorer 6.0 only supports standard <select> elements, so we have to design the variant pickers using that!”
  • “Oh, and the Size picker needs to filter the Color picker to ensure availability, so yes the page has to refresh”
  • <table><tr><td>We’re in table-based layout hell</td></tr></table>

Remember thinking this way? I sure do.

Now

Twelve years later the 2015 Zappos.com is aesthetically quite different, though similar in a number of ways.

Zappos.com Product Page in 2015
  • We no longer feel the need to cram everything “above the fold”. While Nielsen’s original usability studies were pivotal in guiding our desktop-centric designs in the past, the user experience community (including Nielsen) has acknowledged that scrolling is here to stay due as much to the shift to mobile as anything else.
  • Calls to Action, in particular the Add to Cart button, are extremely easy to find and target.
  • The new “Tell a Friend” feature is the obligatory social network button bar…and it’s arguably no more effective than the old feature was
  • Brand imagery (see “paul green” logo in each example) is less prominent than the more important elements of Price, Customer Reviews/Rating, and Product Recommendations.
  • Whereas the 2003 example provided tools (e.g. “Search for a Brand”, “Browse More Styles…”) for finding more products, the 2015 is more proactive and uses the now table-stakes recommendation engine approach to proactively suggest similar items.
  • While we have a better handle on the use of white space, we seemingly remain constricted to table- or grid-based layouts.

Summary

While Zappos is just a single entry in the vast library of historical product pages that can be referenced, I think it represents an interesting contrast between the past and present that is common in many e-commerce designs.

What, one wonders, are some other comparisons with the past worth making?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.