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.
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
A video product, with playlist. View the live page.
A Book product. View the live page.