In 2015, Levi’s® commissioned AKQA San Francisco to revamp a few pages on levi.com. The brief focused predominantly on the Product Detail Page, where they asked for some solutions to help it’s overall UI, as it was small and cluttered, with a ton of sizing and color choices. Additionally, Levi’s® wanted a ‘Fit Guide’ added to the page, to help inexperienced jeans shoppers realize that there is a wide variety of jean styles.
For the PDP UI, we solved Levi’s® concerns by containing everything within the background image. We utilized CSS animations, creating smart, minimal drop down menus for sizing and quantity—and larger, collapsing/expanding thumbnails for the many color options. For the Fit Guide, we added a ‘Fit Comparison’ right below the header; so when the user hover options under ‘Fit’ for example, they would see a jean that was either looser or tighter than the one they were currently viewing.