I was invited to sit in on usability sessions where 7 users were observed while browsing multiple e-commerce sites, including Calvin Klein. The goal was to evaluate the current calvinklein.com experience, identify areas that would enable customers to more successfully locate, evaluate, and purchase products, uncover any unmet customer needs, and develop a prioritized set of site recommendations.
Usability testing showed no major roadblocks to purchase, but internal brand distinctions created confusion, and layout of key information in product pages gave shoppers pause. Site retention was also poor, with analytics showing that visitors were spending very little time on the site.
I explored different navigation options, type sizes, and alternate placement of logo, but validation testing with designed prototypes showed no marked improvement in navigation with users, so the client elected to stay with their existing top banner.
Shoppers communicated that the product images on the category landing pages were their first consideration for evaluating the products, so I decreased the number of images across the grid from 5 to 4 to accommodate for bigger thumbnails. Product info appeared on rollover on the old website, but that proved to be frustrating to users, as well as visually distracting. I removed rollovers and reorganized product info so that they were listed below. Color swatches are visible instead of accessible by a text link, and name and price are stacked and left aligned.
Image sizes were increased throughout the site, and thumbnails for additional product views under the main image replaced text links. Product information on the old site was right justified and to the left of the main product image, creating little visual distinction from the left navigation to product text. This info was moved to the right of the product image, and product price was moved up to the top right below the product name.
User testers liked the "Shop the Look" feature on the women's landing page when prompted, but never scrolled down to discover it as it was below the fold. Once on the page, the carousel layout of each outfit component confused users who preferred to see a straightforward grid of larger browse images. I changed the layout to a grid design with every component of the outfit clearly laid out and the feature was also moved up and added to the left nav during the redesign.
Along with key designed screens, I delivered a style "cheat sheet" and a comprehensive, detailed 60 page redline document to the internal team at Calvin Klein to assist in buildout for the entirety of the e-commerce site and across all shopping categories.