Category Page & PRODUCT CARDS UPDATE
WIREFRAMES:
PROBLEM / GOAL: The product cards on the category pages of crocs.com were not fully responsive and needed to be updated. The challenge was that many of crocs products have up to 24 color options. Crocs is a promotional brand. I had to find a way to show a lot of color options, indicate if a promotion was available, and still keep the UI friendly for iPhone 5 users.
ROLE: UX Lead, Designer & Director. This work was completed both by myself and in collaboration with my team.
FUnCTIONAL NOTES:
Critical Requirement: The product cards had to be responsive and flexible to show as many products as possible on any screen width.
We redesigned location of the filters. Shortened menus, minimized vertical height and made them easy to find.
Designed an easy way to indicate if an item was on sale to meet the global merchandising requirement. This location is familiar to consumers, can accommodate multiple languages, and does not interfere with the product images.
To account for the potential of 30 product colors, a plus sign was added. This takes the consumer directly to the product detail page. The development team dynamically added the number of available colors above the plus so a consumer can quickly identify how many options are available.
A clear indication of a sale price was a must have for the merchandising team.
Crocs is a heavily promotional brand and often times the promotions are complex and difficult to understand. Short promotional text was added to the category pages to clearly communicate if particular was included in a promotion.