Art Imitates Life

More Art than you should ever need.

Responsive Product Page (Completed 2014)

Responsive Product Page

Design Problem

In order to better serve visitors to our e-commerce sites who are using non-desktop clients more and more, we realized that we had to make our product pages mobile-friendly. Complicating the effort was the combinations of product types, formats and prices for thousands of products.


Using responsive design, we designed and rolled out a product page design to 5 of our most-trafficked e-commerce sites. The sites share a common codebase and features, but each site has a different set of stakeholders. Our agile process served us well in this instance, as we were able to keep the big picture (retooled product page) while rolling out new features and redesigned objects as they were approved by stakeholders.

I started by breaking down the page into objects, and deciding how I could make each object flexible while still working within the overall structure (an example is the Tabs-to-Modified Accordion object, shown here). I build our responsive pages to be completely flexible rather than choosing a few breakpoints catering specifically to Apple devices. So, each flexible object is built to be placed anywhere on the page. We used The Filament Group’s wonderful AppendAround utility to re-arrange these objects on the page at the required breakpoints.

We have several product types, including books, eBooks, videos, and software. Each product type may have multiple pricing tiers and bundled combinations, so the design and placement of the pricing object had to flexible enough to allow it to grow or shrink without blowing up the page. In addition, some of our video products feature sample video clips in place of book covers, so we had to work out a flexible implementation of JWPlayer, our video player solution. We went a step further and checked for javascript, Flash and video element support, loading fallback content if the sample video couldn’t be loaded.

Roles/Skills Used

On this project, I held the roles of UX Manager, IXD, visual designer, and front-end coder (HTML, CSS, and JS).

I initiated and drove this initiative, making the case the the business units by combining Google Analytics with forecasted trends for mobile device usage. I laid out the idea of making the entire product discovery and purchase process mobile-friendly, to enable our users to use any device to find and purchase on whatever device they might have handy. When it was approved, I broke down the project into manageable pieces, wrote the user stories, and worked out the division of labor among the UX team. I designed most of the objects on the page, and directed the design of the entire layout. I wrote and implemented the final production code.

Wireframe vs. Final Design

Responsive Video Product Page

A video product, with playlist. View the live page.

Responsive Video Product Page

A Book product. View the live page.

Leave a Reply

Your email address will not be published. Required fields are marked *