UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

I couldn’t find my shoes online, so I redesigned Nike’s website — a UX case study

This past weekend I was visiting Nike’s website to order a gorgeous pair of White Air Force SF High Top Winter Camo shoes I had been saving up for.

White Air Force SF High Top Winter Camo. So haut, much wow.

After ten minutes of scanning Nike’s website, I discovered the shoe I wanted was no longer in production. Ahhh oh no.

But I wasn’t totally distraught, I kept navigating through the site to see if anything else peaked my interest. While I was meandering the site I noticed the navigation was not ideal and I kept getting lost.

Rather than do nothing. I cleared the rest of my rainy Saturday schedule and began redesigning the Nike website.

Note from Designer: I am a classically trained healthcare UI designer, I haven’t really designed an e-commerce site. But I don’t have to worry about killing patients in e-commerce land, so why not, it’ll be fun!

So be critical, roast my design choices, and clap if you feel compelled lol!

Nike Homepage

I began with the navigation and overall architecture since that is where I was struggling the most. Nike has multiple brands (Hurley, Jordan, Converse) and corresponding sites so I started by reviewing each of the child sites.

Hurley Navigation

Hurley had a horizontal and vertical navigation. The horizontal navigation was superfluous and didn't really get me any closer to the products. The vertical navigation on the other-hand was the actual way I was getting to the product.

Converse Navigation

Converse had one horizontal navigation with five categories and sub categories. This navigation then switched to a vertical nav after selecting your category or sub category. I found this switch from horizontal to vertical rather jarring.

Jordan Navigation

The Jordan brand was similar to Converse but with only seven categories and no subcategories. The vertical nav was weird and switched to gender and neglected the previous pages categories (shoes, clothing gear, women, etc). I found this inconsistency odd, with the exception of the (Air Jordan Collection and the AIR Jordan Blog).

Nike Navigation

Nike was the parent navigation that remains the same through all the brands, this navigation would often times be redundant in the vertical navigations that appear once you drill down to the products.

By comparing the sites side by side I saw how the architectures vary by brand.

Top navigation from the three Nike Brands.

After viewing all of the sites together I took some notes on what I wanted to redesign or enhance.

  • Enhance backward navigation through all brands.
  • Create a consistent navigation between all brands.
  • Call out the search feature for ad hoc inquiries.

Brand Toggle

I started by creating a toggle for the various brands. This would make the filtering for the sub categories more niche and not as lengthy. I added some affordance that I thought was missing from the original site as well in order to guide end users. (End User? Consumers? humans who visit this site, whatever).

Original Site
My New Brand Toggle

The default brand would be Nike since it has the most products, categories and most common workflow.

Brand Toggle (color redacted for gif resolution)

Main Navigation Hover

For the main navigation I kept the information in a hover state selection menu, but only included the information that wasn’t inside an existing category. This would remove some of the redundancies that were occurring while still only being a click or hover away.

Original Nike Navigation
Nike Home Screen (Full Color)

I also thought it would be nice if the navigation remembered my preferences. Since I was logged in, I would be taken directly to the men’s section of each brand. Progressive disclosure is the name of the game with accordion menus and striking the right balance of too much and too little information is always tough, but I think I did it.

Hover State

This hover information would vary based on category (Men, Women, Kids, Nike by You) but remain the same between brands.

Non-Hover State

Accordion Structure

I modified the accordion menu to each of the brands with four main parents (Men, Women, Kids and Nike by You). This makes navigating back much easier and is a more elegant solution than just frantically hitting the browser’s back arrow.

With my design you can move your way down the vertical navigation and get more and more specific results. Brand, Gender, Product, and Product Filter.

Converse Accordion Menu (color redacted)
Jordan Accordion Navigation (color redacted)
Nike Accordion Navigation (color redacted)

Bring Out That Search Feature

Some people don’t know what they want or they are like me and know exactly what they want. Like a size ‘11.5 White Air Force SF High Top Winter Camo’. So I wanted to highlight the search feature to meet both of these extremes.

Search

Search would begin a new modality. With my layout the products could fill the screen from the floor to the rafters. Woop Woop! Or maybe nothing will appear like in my case, in which I could just close out of the modality and begin my life again.

Filtering

I noticed that some products had secondary filters (style of shoe). I really liked this feature and wanted to keep it. So I threw the filters up in the top, so when the search feature is enabled the filters would disappear. This seemed like a meaningful way to show the relationship between filters and search.

Secondary filtering (color redacted)

Sticky Feet(er)

For the footer, I wanted the content more readily available, rather than scrolling to the bottom the page. So I stuck the footer to the bottom of the page and incorporated a pop-up checkout workflow that I thought was missing from my shopping experience.

Checkout Footer (color redacted)
Checkout Footer Pop Up (color redacted)

Hover Preview

Since I had some time to kill, I reworked the preview hover as well. The previous hover would cover up the other products. I did not like this, so I created one that highlighted the product without overlapping the other products.

Original Hover Preview
Hover Preview (Color Redacted)

Microinteractions

Here are a few of the micro-interactions I created as well. I thought that a ‘clear filter’ button would be handy and it could fill up as the filters are added.

Navigation micro-interaction animations

Add Some Pizazz

With a uniform architecture the art direction and branding will become more important to orient Nike’s consumers. So those designers better workkkk. I created this one in after effects I call it rainbow swirl.

Rainbow swirl landing page animation

Conclusion

Anyway, that was my weekend of redesigning the Nike website. Overall, it was pretty fun. Coming from a healthcare design background it was refreshing to design in the e-commerce space.

As always, I would appreciate feedback of any kind to help improve my design skills and thanks for reading this far! Now to get back to finding my shoes, I guess I’ll try Amazon or Ebay next.

Photography by: Alexander Redl & Paul Volkmer

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (2)

Write a response