Product imagery breaks out of the carousel

Here’s the big change. Look at Nike’s new product photography layout…

nike product page

Compare it with Adidas…

adidas product page

There is simply no comparison between scrolling through six lovely images and seeing the product from every angle, and clicking staccato-like through a series of tiny thumbnails in a left hand side carousel.

The Nike product page above is all about showing off that trainer. Adidas is no disgrace, this thumbnail carousel is pretty much the default for all ecommerce product pages. Nike used to use it, too (check it out here).

Where the new imagery layout really comes into its own is where autoplaying video is part of the image tiling. Here’s an example (I’ve only captured a very short loop of the video, it is actually much longer).

nike product page with video

GDPR-inspired copy change to recommendations?

Let’s continue with something not very noticeable but definitely topical. Nike has changed the copy accompanying its recommendations slider at the bottom of the page.

It used to say “You might also like”…

nike recommendations - old site

Adidas still does something similar – “You may also like” (see it here).

But Nike’s recent product page refresh has seen this copy change. It now reads “These popular products might interest you”.

nike recommendations

Why the change? Well, in using a passive sentence with “popular products” up front and “you” the subject at the end of the sentence, arguably the sentence is less creepy. It suggests the products in the slider are similar to the one you are viewing and are bought most frequently, whereas the old wording perhaps suggested that Nike knew what you the user liked (i.e. that they had some kind of profile of your likes and dislikes).

I’m not suggested that the GDPR (with its referencing to ‘profiling’) is the reason this wording has changed, but the change does make things a little more transparent and puts the emphasis on popular products, which perhaps nudges the user to click and buy.

Sizing breaks out of the dropdown

Back to the bread and butter of product pages now – choosing your size.

On Nike’s old product pages (and indeed on Adidas product pages, to draw a comparison), to pick a size, or to see if my size is in stock (presuming I haven’t already filtered for size), I have to click a dropdown and take a look for the right option.

Here’s an example from Adidas…

adidas size select

But Nike’s new product pages show me all the size options upfront in a chunky table. Those that are out of stock are greyed out. I don’t have to click as much and I don’t have to think as much.

nike size select

This change has the same effect that the imagery layout change does – I can take everything in at first glance.

Reviews demoted

Head back up the page and take a look at that GIF again and you’ll see Nike has removed its product review/rating summary from the top of its product pages, where it used to sit above the product title.

Here is what such a feature looks like on the Adidas website…

adidas reviews

I can see why Nike would remove this – to remove distraction. If somebody wants to find a review, they will.

But also, by removing this summary, Nike may be asserting its design credentials – “we don’t need your reviews”. There’s an interesting debate here – I doubt a luxury site would ever promote reviews at the top of a product page, for example.

Share your look added

Though reviews are less prominent, Nike has added a “share your look” section. This is a smart idea both for a bit of social proof (less judgy than reviews) and for a boost on social media.

nike share your look

This is one section where Adidas arguably trumps Nike, with a bigger spread of user-generated content.

adidas share the look

‘Add to cart’ becomes ‘add to bag’, and grows bigger

Here you can see the old product page, with a fairly small orange ‘add to cart’ button.

nike old product page

And here’s the new page with a much different call to action…

nike add to bag

‘Add to bag’ is arguably more standardised language now, and to my mind is more non-committal language, meaning users may be more comfortable with it. It may be that Nike has tested the two phrases and found ‘add to bag’ converts better.

A bigger button should surely convert better, and it would be a surprise if the change from orange to black hasn’t been tested, too.

One thing perhaps worth noting though is that the ‘add to bag’ button is now below the fold, indicating Nike is confident that users will scroll.

Conclusion

A lot of this is my considered opinion and hinges on design and aesthetic, rather than rigorous usability testing, but with fewer clicks needed to explore a more focused page that presents the product at its best – I’m sold.

One big elephant in the room – mobile. The Nike product pages translate as you would expect on to mobile, with an image swiper/slider the only real change of note. But the Adidas product pages compare more favourably here, with a comparable image slider, though still using a size dropdown.

Adidas uses a sticky ‘add to bag’ button on mobile, which follows you as you scroll – something which Nike doesn’t use. You can debate that one at your leisure.

So, what do you think of the refreshed product pages?

Econsultancy offers UX and web design training. Why not send a member of your team?

ecommerce best practice guide (subscriber only)