One of the first projects I was assigned when I started working at Bass Pro Shops was to redesign the size guides for apparel. The current guides were outdated and no longer included correct information. Originally, the business users wanted the ability to use our product management system to populate the information as well as host the information on the product page itself, but this was moved to phase 2 as upgrades to the backend had to be completed first. We decided that phase 1 would be the redesign and information update, while creating as much of a template for later integration into other systems as possible.
Bass Pro Shops' desktop site is not responsive, as all mobile device traffic to major areas of the site is served by a separate mobile website maintained by a third-party. As a result, responsive design was not part of the business strategy and was often de-prioritized in favor of faster iterations. In this case, the size guides would have to re-created by the third-party company for inclusion on the mobile site without internal input, so we designed as if mobile devices did not exist.
At the time we created this page, we did not have a way to A/B test so the decision was made to put all the information on a single page. Since these pages are cached on the server side, we decided it was an acceptable trade-off, although if given another opportunity I would love to usability test several different layouts.
Since there was so much information on the page, we needed a way to easily navigate throughout the sections. It was feasible that a user would be searching for sizing information for more than one brand or type of apparel at the same time, so we opted to include jump navigation like you'd see on Wikipedia or other information-heavy sites. We also included a "Return to Top" link for quickly jumping back to the top navigation.
The code includes some HTML5; since we had to support IE8 at the time, we could only support a few of the tags. The second phase was to include more Schema.org microdata.
