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.
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.
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.
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.
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.
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.
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.
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.
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.