Gene Lu's Portfolio

Nike 1thology

Overview
In 2007, R/GA created an interactive Flash site that cataloged hundreds of unique Nike Air Force 1s around the world. After a little over a year, the site was no longer being updated due to the fact that it required a lot of time and money to maintain it.

In 2012, Nike is celebrating the AF1′s 30th anniversary by rolling out new AF1s throughout the year. In order to create social buzz around these shoes, we were tasked with recreating the past AF1 experience within the context of Facebook.

Site Audit
Before diving into ideation, system diagrams, and interactive wireframes (prototypes), I inventoried the content and features that were available on the site. This gave me a better understanding as to how Nike perceived the AF1s and the shoe’s role within the sneakerhead community.  The site audit also helped set expectations for us in what we were going to deliver to the client.

Nike AF1 Site Audit - PDF

Nike AF1 Site Audit – PDF

Ideation / Sketches
The following sketches show some of the previous functionality through the lens of Facebook. They also include new features such as a countdown for individual shoe releases and different methods of navigating the genealogy of a shoe.

AF1 Countdown

Countdown to releases build anticipation among sneakerheads

AF1 Shoe Grid

A direct translation from previous site with some minor additions to the filters

AF1 Genealogy

Creating an engaging way of navigating the genealogy of a specific Nike AF1

What’s not present in the sketches was a concept sparked by one of our teammate’s visit to Sneaker Con 2011. Thanks Evinn Quinn! During our conversation, we talked about the behaviors exhibited at the event. What I discovered was that not only were people buying shoes from the vendors, they were also buying and trading shoes with each other. This opened up new doors and got us thinking about how the Facebook AF1 app could connect people in their quest to find the AF1s they were looking for within a trusted shoe community.

Trading and selling via http://www.freshnessmag.com/2011/12/11/sneaker-con-nyc-12-10-2011-event-recap/

In order to build an AF1 explorer and trading platform, we broke the design down into phases. The first phase involved creating and integrating custom Facebook actions relevant to the shoes. Instead of “liking” a shoe, users can either “want” or “have” a shoe. These two custom actions also feed into some of the features that were being transferred over from the previous site such as “Most Popular” (based on Wants) and “Most Exclusive” (Wants/Haves).

User Flow/Ecosystem Diagram
Since custom actions on Facebook weren’t officially rolled out to the public at the time, it was our responsibility to educate the client about what we were recommending. I created a visual one pager of a user flow through the different touchpoints within the Nike AF1 app experience. I also included a second version that was a bit more in-depth. And yes, you are reading that correctly. Eggosystem.

AF1 User Flow and Ecosystem Diagram

AF1 User Flow and Ecosystem Diagram

Wireframes. Interactive Wireframes.
After we got approval from our client, I put together the initial set of wireframes. I spent some time going through all the pages and once I got them to a good place, I quickly linked them together to create a more interactive experience. At R/GA, these interactive wireframes (prototypes) have been proven to create better conversations both internally and with clients. They also help me as an experience designer to think through problems in a more thoughtful manner.

AF1 Wireframe/Prototype V1.0

AF1 Wireframe/Prototype V1.0

You may have also noticed that we moved away from the genealogy focus (as mentioned in the ideation section) in favor of keeping the interaction lightweight while maintaining an engaging experience.

With feedback from both the internal team and with our client, I went through a couple of more iterations and ended up with the following set of wireframes. I also included an additional set of wires containing annotations relevant to the major interactions on each page.

AF1 Wireframes V2.0

AF1 Wireframes V2.0

Besides the wireframes themselves, I also experimented with some of the smaller interactions that happen along the way. Using Keynote and assets generated from the wireframes, I created the following video that demonstrates a potential interaction when navigating the huge shoe grid.

AF1 Interaction Demo

AF1 Interaction Demo

Conclusion
We started the project based on a set of assumptions gathered from our client. By fully understanding what had to be done, we were able to diverge and converge on ideas and responded to the client with solutions that surpassed expectations. We were also able to better sell the idea via diagrams and interactive prototypes.

As of today, March 8th, the site is currently being designed by the visual team and this post will be updated once the site goes live.

4 Comments

  1. Stevie P
    July 24, 2012

    Dude, quickie – your vid ain’t liking my clicking…

    • genelu
      July 24, 2012

      Good catch Steve! I accidentally archived my prototype files into a different folder a while back. It should be working now. Cheers!

  2. Gabriel
    July 24, 2012

    Nice methodology. Thanks for sharing.

    • genelu
      July 24, 2012

      You bet Gab. :)

Information

  • 23 Jul 2012

Filed Under

Recent Articles

Lead UX Designer on Nike+ Running at R/GA.