When given the opportunity to visit the product detail page, the first thing that we aimed to solve was to reorganize the page to in order to better utilize the available real estate and bring more above the fold for the customer.
Given we were re-architecting the entire page, we were required to evaluate the entire page. Our research methods included collecting survey data from Foresee, conducting a usability audit in partnership with eTailing Group, competitive analysis and reading articles.
Through this we identified patterns in the types of content that customers are most interested in and obtained a better understanding of how customers navigate product pages.
We experimented with various layouts, gaining feedback on likes and dislikes of each in order to narrow the direction on subsequent iterations.
We ultimately went live with a product that focused on 3 primary goals for the customer:
It wasn't long after publishing Version 2 that testing revealed a major design flaw - placing the add to cart button above the fold essentially encouraged users to click on the button before selecting all options, despite the button being gray to indicate it was inactive. Due to our lengthy release schedule, we resorted to Monetate to implement a temporary solution. I setup an experiment that provided tooltip-like alerts when the user needed to select additional options. The experiment proved to be a better user experience and thus was promoted to full-time.
Not long after, Academy initiated the process to upgrade our site framework (WCS) and thus we had the opportunity to revisit every page of our site. Given the challenges we introduced with previous design decisions, we elected to revert back to placing the button below the options, requiring the user to scroll through all options before the button came into view.
Per feedback in Foresee, another major design decision was to increase the size of the default product image. Presumably so the user could "touch and feel" the product digitally.