The Original Classic

Nike

Taking the Nike Air Force 1's back to Brookyln.

My role

Lead Designer

Team

1 Designer, 2 Engineers

Chapter 1

Think

Project Objectives

Provide a better buying user experience for the product page.
Showcase the product in a more successful way by creating a new concept design.
Combine relevant information and eliminate excessive resources.

Design Concept

Air Force 1’s are the first basketball shoes created by Nike and had a massive effect on the style of gear on and off the basketball courts. I wanted to focus on the cultural revolution happening in the inner cities from 1990-2000 and how hip hop artists, graffiti crews, and local basketball heroes started wearing these as a status symbol on the street.

The Challenge

I wanted to base my designs off the urban environment, the streets, the concrete jungle, and the culture of graffiti that the target audience sees everyday. I used high contrast black and white colors with background images of places that remind the users of the place that they live to reinforce brand loyalty.

Building a case study

I started this project doing a competitive analysis of 13 different websites to see the good, bad, and ugly about buying shoes online. I wanted to see the layout of elements and what was successful. I discovered that the main product shots were relatively the same across the board. The differences of the designs mainly consisted of the information on the right and the location of extra pictures/color choices either on the bottom or left of the main product image.

Adidas

Juventus

Burberry

Colombia

Puma

Reebok

I noticed how bland the majority of the websites were. There didn’t feel like there was any real selling point or reinforcement to stay on the page.

User study

I created a quick 5 question user survey and sent it out to my network to see how people search and interact with buying shoes online. I found that 80.95% of people buy shoes online by brand alone. This helped create my design concept because my target audience were people that bought several pairs of the same shoe model. I asked what was the most important thing about buying shoes online, and on a scale of 1-5, brand again was the largest reason (even beating out price).

I discovered that when buying shoes online, people have their mind made up on exactly what they are looking for. My target audience isn’t looking for any shoe, they are looking for this shoe. I wanted the design to visually reward the user for being brand loyal.

Key user questions:

How do I find my size?
How do I find my favorite color/combination?
What is the price and is it easy to find?
How do I check out?
Are there sales going on?
Who can I reach out to if I have a question?
What other versions of the shoes are available?

Chapter 2

Make

Sketching & Wireframes

After flushing out our goals with the stakeholders and aligning on our deliverables, I began sketching several iterations. Since the product was going to rely heavily on images, I wanted to portray as many different concepts on what that could look like. The inspiration from the competitive analysis became extremely useful here as I could disregard ideas that would be too flashy or impractical.

Mockups

After digitizing and flushing out the better wireframe designs, I decided to focus on two of the more prominent concepts for mobile and desktop. I ran into sizing issues (mainly with the text) on the first pass, so I was fortunate to be able to go back and rework the UI of certain elements without losing too much time. I began adding details and stock images to fill out the interface architecture of the site. After completing this part, I presented to the stakeholders and we went through the strengths and weaknesses of each concept.

Chapter 3