When we put two of the biggest sportswear brands’ websites side by side, who trumps the other at user experience? With the help of our design team, we carried out a UI/UX audit to find out.
What this is about: User experience is all about usability, which the ISO 9241-11 standard defines as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”. This definition is the center of focus in this audit. What this means is that in every aspect of inspection, we seek to answer the question — How usable, effective, efficient and satisfying is this?
How we’re doing it: For each of the 13 selected web design categories, if not tied, one winner is allocated — Nike or Adidas. At the end of the analysis, the brand with the most points wins.
Let’s see how they do.
Top Menu
Due to a tighter layout, Nike has a more scannable top menu. Increasing the color contrast between categories and sub-categories presents information in a clearer hierarchy.
Adidas’s top menu may not be as scannable, but the larger spaces between columns help distinguish the categories from one another. Adidas appears to do better in this area.
The vertical line and added space between the Featured menu and the product categories give their Featured menu a more prominent distinction compared to Nike’s. Aside from that, the bolded typefaces used for the main categories also work great at setting apart the three main categories (Men, Women, and Kids) from the other minor ones (Sports, Brands, Release Dates).
Winner — Tie
Hero Images
Both Nike and Adidas display single, large and impactful images of a specific and selected product, using both models and product-only shots.
The only notable difference is that Adidas’s homepage hero images take up the full width of the screen, while Nike leaves some white space around their hero images.
There isn’t a right and wrong here, because both creative choices create different effects — images that flood the screen tend to be more impactful, while white space soothes and gives users space to breathe.
On both sites, the hero images are next to buttons that take you to the product shown in the hero image. This is a great way to target a specific audience and get people to convert.
Winner — Tie
Content Width
When it comes to content width, we observe consistency with Nike and a lot of variation with Adidas.
Having sections with different widths can help you tell them apart, but too much of it can be distracting. With multiple moving images on each page, Adidas’s layout could be confusing, especially for people with neurodivergent traits.
Winner — Nike
Additional CTAs
Adidas’s website has more pop-ups, such as promotional banners, a feedback button on the right side of the page, and a live chat button in the bottom right corner.
Pop-ups may bring customer service to the forefront by making it easier for users to reach, but they can also get in the way of content while users are browsing.
Winner — Nike
Search Bar
When you click on the search bar, Nike shows you a list of popular search terms that show the brand’s best-selling items right now. This makes shopping on the site better overall by focusing on people who are just looking around without a specific product in mind.
Another great thing about Nike’s search function is that as the user types in the search bar, the site shows five relevant products along with images of the products. This can be very helpful for users who need to use pictures to find the product they want.
Nike sets a pretty high standard in this area, but Adidas’s search function isn’t too far behind. Adidas shows how many products are available under each suggestion, even though suggestions don’t show up until the user starts typing in the search bar.
Winner — Nike
Card Carousels
Nike’s card carousel displays 3 images and a hint for overflow, with a single-line indicator beneath it. Users can either click on the Next arrow button or hold and drag to view more products.
Their Next and Previous arrow buttons are pretty small, and the same colours and lack of a hover state or outline may make them hard to tell apart from the product images. But you can hold and drag or scroll to see more, which makes up for this.
Adidas, on the other hand, puts 4 and a half cards in a row, so they can show more products. This gives users a more varied preview, but it also makes images and text smaller and harder to read.
There is no hold-and-drag function with Adidas’s carousels, but the Next and Previous buttons being larger, outlined, and having a contrasting hover state makes up for the interaction and clicking experience.
Winner — Tie
Product Listing Filters
Nike’s filters are economical with space and action. A sidebar lists out all product filters vertically, and users can choose to hide or show the filters, which is the best part.
The great thing about all filters being lined up in a single sidebar is that it doesn’t require many clicks to get to them. All it takes is a couple scrolls to view all the filters.
In contrast, Adidas has their product filters arranged horizontally at the top of the page. Though they don’t take up a lot of space either, users need to click on each one of the filters to view their variables. This is much more time-consuming than scrolling and may lead to quicker browsing fatigue.
Winner — Nike
Product Listing Visuals
Both Nike and Adidas use hover effects on the pages that list their products, but they do it in different ways. Under the main image of a product on Nike, there are thumbnails of the different versions of the product. When you hover over a product on Adidas, the images change quickly.
Nike’s hover effect keeps their design simple and minimal by hiding unnecessary details to make way for the thumbnails of the product’s variations. To prevent clutter, the product series and titles are hidden when hovered over.
Adidas does the opposite with space. Hovering over a product image immediately displays a different image of the product and expands a card showing product details and variations.
On the plus side for Adidas, the little heart-shaped button in the top right corner of each product image makes it much easier to mark items as favourites. Users have to click through to a product on Nike’s site before they can add it to their list of favourites.
Winner — Tie
Scrolling and Pagination
For their product listing pages, Nike allows infinite scrolling. This feature is great for keeping people browsing for a long time, but it can make it harder to go back, especially if there are hundreds of products in a certain category.
With pagination, Adidas divides their lists of products into sections that make it easier for users to go back if they need to. Even though endless scrolling makes browsing much easier, users have more control over how to move around when they use pagination buttons.
Winner — Adidas
Individual Product Pages
Nike uses tiled galleries to display each product. Their layout is great for quickly taking a look or scanning, but there are a few things that could be done better.
Nike’s product details, reviews, as well as the Favorite and Add to Bag buttons aren’t sticky, and this makes it more of a hassle to scroll all the way back to the top when a user is done viewing product images. With this layout, a Back to Top button would help improve the experience.
The stock availability indicator lacks specificity with the message “Just a few left. Order soon.” being much too vague for users to make an informed decision. Aside from that, their size guide link opens in a new tab, which may be disruptive to the browsing session.
Despite all that, Nike’s collapsible accordions for Size & Fit, Free Delivery and Returns, and Reviews work great for their minimal, spacious and clean design.
Adidas gets the sticky part right — their product info and section bars stick to the screen to make navigating easy for users no matter where they are on the page.
The product image viewing experience on Adidas is also great with a click-to-zoom function and a button for full-screen viewing. Their stock availability indicator is also more effective with a specific stock count and a contrasting text color (Not to mention: red is a great color for creating a sense of urgency).
Another win for Adidas is their pop-up size guide, restock subscription, as well as delivery and return information. Without being forced to open new tabs, staying on the site and in the session is made easier.
Winner — Adidas
‘Added to Bag’ Pop-up
Nike’s subtle Added to Bag pop-up on the top right corner is much less disruptive compared to Adidas’s centered pop-up box that needs to be manually closed.
Aside from it being small in size, what’s great about Nike’s pop-up is that it auto-closes after a few seconds, creating minimal movement and minimal distraction.
Winner — Nike
Shopping Bag
Nike’s shopping bag layout has very well accentuated CTAs, which is one of the most crucial features in a good shopping cart experience. At a single glance, it’s clear what the next course of action is — either Guest Checkout or Member Checkout. Other low-importance buttons like Move to Favorites and Remove are muted and smaller in size.
In Adidas’s shopping bag, hierarchy is a little confusing. Multiple elements like PayPal Checkout, Promo Code and the Accepted Payment Methods are highlighted to similar extents, making it difficult to distinguish high-importance from low importance information. The Checkout and PayPal Checkout buttons are also duplicated, which could confuse first-time users.
Winner — Nike
Payment and Checkout
Adidas displays a clear and numbered progress indicator that shows users where they are in the checkout process, from delivery to order confirmation. Users can also login simultaneously as they are placing their order, without having to leave the page and login before they checkout.
Adidas uses inline labels on their shipping information form for easy reference during form-filling. These labels transition into floating labels once the field is clicked, providing a great and unobtrusive way of guiding users through the form-filling process.
On the contrary, Nike uses left-aligned labels which might lead to slower completion times due to the visual distance between the labels and input fields.
Another smart little thing that Adidas does is pre-select the consent checkboxes to make the checkout process quicker. However, this may be helpful in terms of usability but questionable in terms of ethics. It may not be good UX practice for Privacy Policy checkboxes to be pre-checked simply because the purpose of it is to have the user make the choice for themselves.
Winner — Adidas
Who Takes the Crown?
Based on the points we’ve tallied in our analysis, Nike wins with 10 points and Adidas comes close with a 7.
However, it’s worth noting that although there are best practices in user experience design, UX design is still to some extent, subjective. How design is perceived largely comes down to personal preferences, and with that being said, some may prefer Nike’s web design while others may prefer Adidas’s.
After all, their approaches are different. Nike’s design has a generally cleaner and more minimal feel with little movement and distraction, while Adidas maximizes on pop-up advertising, moving elements and dynamic design.
Which is better? Share your thoughts with us.