Gap, Inc. byline

A lot of people in the Bay Area moonlight, just not a whole lot of them do it at the same place as their day job. Over the course of my time at Gap, my duties have transcended simply being the primary caretaker for Piperlime's daily needs. In May of 2007 I was called into a meeting to discuss the largest usability prototype the company had ever needed. The plan was to tie Banana Republic, Old Navy, Gap and Piperlime into one unified shopping experience. The heart of this feature would be persistent tabs that would exist across all of the sites. More importantly, they needed to remember where you've been on each site. Why? Here's an example:

You're looking at a shirt on Gap.com. You like it, don't lie. But you think you can do a little better. So you click the "Banana Republic" tab and hop on over to that site. "Hmm," you wonder. This looks better. "But wait. Wasn't that other one plaid?" Finding out is easy! Just click the Gap tab and the application remembers exactly what part of the site you were looking at, down to the product. So now you can flip between the two shirts and compare the items.

Normally humble, even I will admit that it's pretty cool. With the help of some brilliant contract graphic designers, I had a fully-functional tab system in place close to six months before the company had invested real development dollars into the project. Why is that important? All of the call-outs, mistakes, reviews and usability studies were done on the prototype I'd created. So by the time it went into production there was no second-guessing or delays for modifications.

The underlying technology of this project is almost offensively simple, but it's implementation was complex. We used Greasemonkey and a touch of AJAX to layer the prototype tabs onto our live sites. Thus, eliminating the need for any dev environment more complicated than a computer with an Internet connection that happened to be running Firefox.