Badge of Honor: Calvin Klein’s Denim Fit Guide

Today we’re awarding our coveted Badge of Honor to one very cool feature on the Calvin Klein ecommerce site. Although sites with lots of bells and whistles can often become weighed down and difficult to navigate, sometimes those little extras can make a big difference when they’re done well. With that in mind, it’s time to check out Calvin Klein’s interactive denim fit guide!

calvinklein copy

Upon visiting the denim category on the Calvin Klein site, the user’s eye is immediately grabbed by the denim fit guide at the top of the page…

calvinklein1 copy

When you click the Find Your Fit button, the feature pops out, displaying models wearing each of the different jean cuts. This interactive element is great, because it pulls the user’s attention and invites them to explore. The black and white design is a cool choice, in that it emphasizes the fit of the pants, rather than the color.

calvinklein2 copy

When a shopper clicks on one of the options, that fit is brought to the center of the window. There is a short description of the cut given. What’s really cool is that the still photo comes to life, and the model walks forward and turns, giving the customer a full 360-degree view of the jeans. How awesome!

calvinklein3 copy

If a shopper finds a style they really like, all they have to do is click that Shop button below the description. The denim fit guide closes, and the user is brought back to the denim category page. However, now they will only see the products in this particular fit. This definitely makes the shopping process easy and interactive.

calvinklein4 copy

Now that’s an interactive feature done right. It draws the user’s attention, encourages them to explore the product line, and ultimately helps them to narrow down their search, which will hopefully lead them to a purchase. Well done, Calvin Klein!

 

 

Leave a comment

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*