Gene Lu's Portfolio

Nike Gear Up

Nike Gear Up is an e-commerce solution that recommends a set of products to consumers based on their answers to a series of questions. Last summer, Nike briefed us on improving the existing Gear Up experience along with a future vision deck outlining possible features down the road. This project was a major milestone for me at R/GA because we were working with a new client on Nike’s side and it was my first (major) project at R/GA only after a few months after my first day.

Ecosystem Diagram
In order to help our team and client better understand where our opportunities were within the Gear Up experience, I broke the system down based on the following groups, e.g. retail, 3rd party, social, inspiration, mobile, and apps. Our goal was to evolve Gear Up users from being unaware (browsing the site) to being proactive (creating their own collections) using the Gear Up platform.

Gear Up Ecosystem Diagram Sketch

Gear Up Ecosystem Diagram Sketch

Gear Up Ecosystem Diagram

Gear Up Ecosystem Diagram

Interactive Wireframes
As mentioned, I was new at R/GA, this was my first project, and we were working with a new client on Nike’s side. I saw this as an opportunity to improve on R/GA’s traditional process of showing static wireframes via PDF decks. Instead of cranking out wireframes in InDesign, I stuck with Adobe Fireworks, which was specifically made for web prototyping.

After presenting the first set of clickable wireframes to our new client, they were on board with our process. Over the next couple of months, we went through multiple iterations of clickable wireframes. Because of this change in process, our clients had a better understanding of what was being presented, which made the conversations between us and the client a lot more efficient. On the internal side, the prototypes helped to manage expectations between creatives and developers. What would have been a yearlong project turned into a project that launched several months laterĀ  in late October.

The following set of wireframes was the last set presented to the client before moving into visual design.

Gear Up Interactive Wireframes

Gear Up Interactive Wireframes

More Prototypes
After we moved into visuals, I helped the creatives better convey their visual story by creating small, simple prototypes using javascript and HTML. Again, these prototypes helped to build up the relationship between us and our client.

The following prototype briefly demonstrates a simple interaction between the item tray to the right and the content in the middle.

Gear Up Mini-Prototype

Gear Up Mini-Prototype

Wrapping It Up

Nike Gear Up Running

Nike Gear Up Running

Gear Up went live October 21, 2011 across Nike’s multiple channels. Sites that are currently active are as follows:

Team
Copywriter: Devin Heatley
Visual Designers: Rasmus Wangelin, Mariola Bruszewska
Interaction Designers: Ryan Scott Tandy, Gene Lu
Producers: Charles Lano, Jessica Cheung

Comments are closed.

Information

  • 11 Mar 2012

Filed Under

Recent Articles

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