Foot Korner - sportswear multi brand eCommerce UX case study

Foot Korner, founded in 2008, is a multi-brand ecommerce website that sells mens and kids sportswear from all of the biggest, most well-known brands in the industry, such as Nike, Adidas, Puma, and Reebok, to name a few.

One of main categories features on the website is 'Clubs', i.e., the strips, kits, and jerseys from some of the worlds biggest sports clubs - mostly football (soccer).

The overall storefront design is quite standard, as is almost every aspect of the website (besides some small details), but this is a classic example of products being able to speak for themselves.

Adidas needs no introduction to anyone that doesn't live in an isolated tribe, Nike and Reeboks quality is globally recognized, Manchester United is one of the most popular sports clubs in the world.

Why go to extraordinary lengths to customize your storefront if it's not necessary? As long as it looks good, appears trustworthy to users, and has good performance, you shouldn't have any trouble making sales if there is pre-established market demand for the products you're selling.

That's it for the intro, so let's take a look!

{{blog-card}}

Navigation

Foot Korner is an example of mobile-first website design which can be seen from the fact it has the same UI on both mobile and desktop - the elements, for the most part, simply scale and space out depending on the device.

The nav bar features a simple, but effective, hamburger menu that functions the same way regardless of device. Users can shop by product category, brand, and also by sport club.

Homepage

As we’ve seen before, the main banner of the homepage advertises the current sale and links to a PLP containing products included in the sale.

Promotional banners always serve as an effective way to encourage users to take more action on the website, as people are always curious to see what discounts are available, whether they end up purchasing sale items or full-price goods.

Foot Korner also included a promotional video below the sale banner for one of their latest collections.

Below we see three different carousels, each with different image styles and formats. 

Firstly, there is a category carousel with lifestyle images that has a nice feature allowing the user to select ‘Man’ or ‘Child’, which updates the presented categories accordingly.

This is followed by a more straightforward carousel with brand logos, each linking to a PLP containing that brand's products, and another banner that coincides with the promotional video.

Finally, a carousel containing new arrivals and products from a highlighted collection. Notice the add to wishlist feature on each product tile.

Footer

The footer is where we see the first big difference between desktop and mobile. The black bar that concisely illustrates their shipping policy, returns policy, secure payments, and customer service completely vanishes on mobile, likely for UI/UX reasons.

Given their target market is likely made of men from younger generations, they definitely had to make sure to include links to all of their social media accounts, as well as their WhatsApp.

Brand Listing Page

Brand pages on Foot Korner feature a brief description of each brand, with four brand-specific product categories presented just below, which takes the form of a slider on mobile.

Each product tile features user ratings below the image and, on desktop, the image changes whilst hovering over it.

It’s worth pointing out that the sales items both clearly display the discount price and the discount percentage in the form of a sticker on the top left-hand corner of the product photo.

‍

Another feature to note is the orange ‘sort and filter’ button that brings up a very mobile-friendly UI for users to refine their search.

Product Page 

On the PDP, there is a noticeable difference in page structure as certain elements get stacked on top of one another instead of being side-by-side.

On mobile, the product images are featured in a slider, whereas on desktop there are tiles to select from.

Again only on mobile, the add to cart button transitions to the bottom of the screen and follows the user as they scroll down.

Cart

The same structure as all of our other examples, with a few interesting features, such as a one-click button to remove an item from the cart, an indicator as to whether or not the product is in stock, and line of text at the top informing the user that they can get free shipping if they reach a certain cart value threshold.

Checkout

After logging in, users are greeted by nice, clean, friendly, and distraction-free checkout - just as it should be.

The cart is styled in-line with Foot Korner's brand and includes four customer-reassuring facts underneath the order summary related to free shipping, returns policy, customer service availability, and secure payments.

{{blog-card}}

Summary & suggestions

Foot Korner has certainly done a good job of stylising their website to appeal the football-crazed, younger generation that make up a large portion of their target audience.

While the design itself is quite simple in terms of the layout, the look and feel is actually quite refined, making good use of their colour palette, fonts, and the inclusion of smaller details and the product listing page, product page, cart, and checkout.

Given the seasonality of the products they offer, users will naturally always be able find to find items in the multiple sale sections. One thing Foot Korner could consider to further unload their old stock would be to introduce product bundles.

A bundle allows a retailer to sell several products together as a fixed or semi-customizable group usually at a price lower than purchasing each set of the products individually. One of the key benefits of product bundles is that it increased average order value.

In this case, since they have a variety of matching items (tracksuits, football kits, etc.), it might make sense for them to bundle these items together to encourage customers who only want one of the items to buy the entire set.

Of course, they could also bundle products that don't come as a pre-defined set by, say, grouping a less popular t-shirt together with last seasons best selling trainers in an effort to get rid of old and/or hard-to-sell stock.

UX deliverables guidelines

When it's time to upgrade your storefront design by using a more custom solution, here a few things to help streamline the process:

• All layouts should be designed mobile-first, desktop-second (but you will need both)
• Using pre-made components shortens the implementation time
• Layouts should be presented following the user journey in an orderly fashion
• All actions and menu or navigation states should be included
• All brand or icon assets should be in SVG format 
• UX design hand-over using Figma.com or a similar service is recommended
• UX questions & answers sessions should be included
• Follow up adjustments or corrections should be anticipated

{{blog-card}}