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. Separating categories from sub-categories with the help of a higher color contrast, information is also presented with 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 accompanied by a button that leads to the specific product on the hero image. This is extremely effective for targeting a specific audience and encouraging conversion.
Winner — Tie
Content Width
When it comes to content width, we observe consistency with Nike and a lot of variation with Adidas.
While varying widths can help in distinguishing sections from one another, it can also be a distraction if done excessively. With the addition of multiple moving images on each page, Adidas’s inconsistent layout could come off as disorienting especially for neurodivergent users.
Winner — Nike
Additional CTAs
Another difference that sticks out between the two websites is Adidas’s additional pop-ups, including promotional banners, a feedback button on the right edge of the page, and a live chat button on the bottom right corner.
While these pop-ups may bring customer service to the forefront by making it more accessible to users, they can also obstruct content during browsing sessions.
Winner — Nike
Search Bar
With a simple click on the search bar, Nike reveals a number of popular search terms that showcase the brand’s current top-sellers. This improves the overall shopping experience by targeting users who are casually browsing on the site without a specific product in mind.
Another great thing about Nike’s search function is that aside from just displaying top suggestions in text as the user types in the search bar, the site lays out five relevant products along with their product images. This can be really helpful for users who need to rely on visuals in their search for their product of choice.
Though Nike sets the bar pretty high in this aspect, Adidas’s search function doesn’t fall far behind. Despite recommendations only appearing after the user begins typing into the search bar, Adidas provides the total number of products available under each suggested item.
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 in size, and may blend in with the product images due to the similar shades and lack of a hover state or outline to distinguish the buttons from the images. However, the choices to hold-and-drag or scroll to view more make up for this.
Adidas, on the other hand, displays 4 and a half cards in a row, squeezing more products in their carousels. This gives users a preview with more variety, but at the cost of images and texts being smaller and less legible.
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. All product filters are listed out vertically on a sidebar, and the best part is — users have the option to hide or show the filters.
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.
On the contrary, Adidas’s product filters are lined up horizontally on 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 implement hover effects on their product listing pages, albeit done differently. While Nike subtly reveals thumbnails of a product’s variations under the main product image, Adidas displays a sharp transition between product images upon hovering.
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. When a user hovers over a product image, they are immediately shown a different image of the product and an expanded card of the product details and variations.
On the plus side for Adidas, it’s much easier to favorite items on Adidas due to the little heart-shaped button on the top right corner of each product image. On Nike’s site, users have to click through to a product before they can add it to favorites.
Winner — Tie
Scrolling and Pagination
Nike enables infinite scrolling for their product listing pages. While this function is great for keeping users on a continuous browsing streak, it can also make backtracking harder, especially if the total number of products under a particular category goes up to the hundreds.
With pagination, Adidas spreads their product listings into chunks of content, making it easier for users to backtrack if needed. Though endless scrolling makes the browsing experience much more effortless, users get more control in navigating with pagination buttons.
Winner — Adidas
Individual Product Pages
Nike showcases individual products with tiled galleries. Their layout is extremely helpful for quick glancing or scanning, but there are a few areas that certainly have room for improvement.
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. Their buttons are also well-sized and made to stand out and encourage conversion.
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.
On Adidas’s shipping information form, inline labels are used for easy reference during form-filling. These labels subtly transition into floating labels once the field is clicked on, which is a great and unobstructive way of guiding users through the process of filling up the form.
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.