Nike website design analysis

Creating an ecommerce website means considering the website’s overall design, from the aesthetics to navigation and accessibility. These aspects are crucial for providing a seamless shopping experience.

We find a lot of time being wasted (to the tune of months) on trying to get an e-commerce website design inspired by a big brand to come up with a website that looks like a worse copy of the original inspiration. What gets lost in this e-commerce store design project is the need to understand not just how a website looks but also how it works.

Nike.com is known for its strong brand identity and well-designed website, getting ~60 million visitors monthly, as estimated by Ahrefs. We analyze the Nike website to find website design tactics that businesses can use to build a high-converting website.

Nike's website user flow
Nike's website app flow

Intuitive Navigation

Easy to navigate nav bar

A well-designed website typically has intuitive navigation, making it easy for users to find what they're looking for. Clear menus, search functionality, and well-structured categories can help users navigate the site efficiently.

Nike's Typography & Color scheme

Nike has been using Helvetica Neue since its inception in 1957. The company uses the same font across the Nike website for all their marketing materials.

Nike's website, Typography

Their website mainly consists of black and grey tones, with a focus on emphasizing products while browsing through it.

Nike's website color palette

Minimalistic Layout

Clean and minimalistic layouts can help focus attention on the products and content. Effective use of white space, clear navigation menus, and organized content can enhance the overall user experience. Also note how Nike uses a light grey figure background color to make sure the products pop out well.

Nike's minimalistic website layout

Responsive Design

Nike's website on various screen sizes

Mobile UI

With the increasing use of mobile devices, it's crucial to have a responsive design that adapts to different screen sizes. This ensures that the website functions well on various devices, providing a seamless experience for users.

Nike's Mobile UI

Nike product photographs

One such tactic that caught our eye are the product photographs. For example, let's have a look at this Air Jordan 1 Low 's product photograph. Like any other product photo across the entire website, this shoe's listing too has the shoe in focus due to the light grey background.

Products on the Nike website have a light grey background.

Not just art but also science

This is not just a pleasant aesthetic, but also has a scientific basis. According to a 2016 paper  titled - Visual Complexity and Figure-Background Color Contrast of E-Commerce Websites : Effects on Consumers' Emotional Response,  people prefer simple interfaces. Simplicity can significantly influence consumer attitude, consumer attention, and purchase intention and lighter backgrounds with products being featured have a positive impact on conversion rates. 

Nike Figure-Background Color

In case you would like to use the Nike figure-background color for product photos on your online store, here is the color code

HEX : #f6f6f6RGB : 246, 246, 246CMYK: 0, 0, 0, 4LAB: 97, 0, 0HSL : 0, 0, 96XYZ: 88, 92, 100LUV: 97, 0, 0HWB: 0, 96, 4

Find a Store

Nike provides a store locator tool that enables users to find nearby Nike retail stores. Users can search based on their location and get information on store hours, contact details, and directions. This fits in well with an omnichannel commerce strategy for brands selling both offline and online, like Nike.

Nike sale collection

When you think of "How to increase revenue?" as a seller, the first thing that comes to mind is likely running a storewide sale. And yes, that is indeed a good tactic to implement. However, how can you differentiate your online store from the hundreds and thousands of others? See what Nike does:

In addition to offering sales with attractive discounts, Nike also groups discounted items together on a dedicated sales collection page on their website. A sale collection improves the browsing experience for customers, especially bargain hunters, as it makes discounted products more visible. This, combined with the discounts, is an effective way to convert initial attention into a long-lasting buying habit among customers who are looking for an easy way to buy discounted apparel.

Nike compare at price tactic

To unload goods that are either now out of season or simply slow-moving and shift to the appropriate holiday selection, Nike promotes sales by adding discounts.

For instance, notice how sports shoes such as the Nike Pegasus with multiple series and variations often have attractive discounts on the older model or less popular colours? That is Nike clearing their deadstocks!

In addition to displaying 'compare at' prices, Nike also utilizes the power of percentages by showing the percentage discount in green on product listings. It is a powerful tool to help convey perceived value.

Power of Percentage

Customers prefer to see the amount they save in percentage terms rather than in dollar terms. Put yourself in their shoes; doesn't the phrase "41% off $58" communicate much more value than "$24 off"? The discount is the same, but the language used to communicate its value makes all the difference.

Exit-intent popups

The right exit-intent popup can help you keep visitors on your site for longer periods of time when visitors decide to bounce, but it can come across as annoying if not done well. When they’re used at the right time, exit intent popups are an effective strategy for increasing conversions.

As seen in the video, Nike waits for a certain period of time after a visitor has browsed their website before showing the exit intent pop up. There are only three things to fill out, and they’ve limited the choices so that visitors can complete it faster with minimal effort.

Frequently Asked Questions

The Nike swoosh logo was designed by Carolyn Davidson, a graphic design student at Portland State University. Pressed by a tight deadline, Davidson came up with several concepts; in the end, the company chose the “Swoosh” as Nike’s logo.

The Nike swoosh logo is shaped as a wing of the Greek goddess of victory, Nike. So, the designer had the wing shape in mind because of the goddess. By borrowing the shape and other design elements from mythical, cultural, and historical sources, you can engage people with the design.

The original Nike ‘Swoosh’ logo wasn’t black as we see it today. For a very long time, Nike used red and white color palette on its logo. The company motive behind the color scheme was that red stood for energy, passion and joy and white expressed nobility, purity and charm of the brand. Later, the company changed the color scheme of its ‘Swoosh’ logo to make it sleek and classy.

Helvetica Neue. Nike uses the same font across the Nike website for all their marketing materials.

Their website mainly consists of black and grey tones


Be first to comment

Leave a reply