Usability Review: OldNavy.com

Posted by: Josh Walsh in User Experience.

There are only a few examples of top-notch ecommerce websites, but Old Navy.com hits the nail on the head.  Here are a few of the key elements that separate them from the rest of the pack.

Cross-Site Header Bar

It is clear that OldNavy is only one of 4 websites operated by The Gap.  They promote cross selling between the sites by offering a simple centralized checkout for all 4 stores.

I really dig the reversed tab effect which shows which site you are currently on. Each of the 4 sites has its own background which makes it easily distinguishable.

Sidebar

When you drill into a section of the website, in this case the “Mens” section, your left-side navigation breaks items into categories.  While most ecommerce sites do this fairly well, OldNavy takes into account the reasons that their customers are shopping online rather than in the store.

In most cases, shopping online convenience is a convenience to customers.   However, shopping for clothes is a different experience.  Customers love to feel the fabric, try on different sizes, spin and model for their spouse, and in my case, eat Sbarro at the food-court (whom I blame for needing larger pants).

I’m a tall guy myself, with a bit of a gut too.   Finding tall sizes in the store is near impossible.  The website caters to these people first and foremost.  The top of the sidebar clearly shows that these clothes are available in sizes up to XXXL.

This is appealing to me since XXXL is far larger than even I would need.   They also emphasize “Tall Sizes – Online Only!” in the top section.

Unfortunately, they use red incorrectly at the bottom of the sidebar.  Red is an error state and I haven’t committed an error.

Style Selector

When I selected “Jeans” from the category list, I see a gallery of available jeans with this jean selector widget at the top. I can click on the jean style to see a quick 360 spin on a real person and it also helps me decide whether it fits my body type or not.

Filtering Tabs

This is a neat feature I haven’t seen before. I see a gallery of available products with a quick form to help me filter to items in my size. After selecting my size the page changes slightly to show my filtered results in a separate tab. I can quickly flip-flop between the featured products and the ones in the catalog.

Checkout Procedure

I am not as thrilled with their checkout procedure as I am with the rest of the site. While they are trying to do things differently and improve upon the normal checkout process we’re used to, simply by breaking that rule they make things more confusing. It has a lot of potential but still needs some polishing.

My hat is off to the team who developed this site. Well done. If any of the developers are reading please contact me. I would appreciate the opportunity to interview you about some of the key decisions you made during the development of this website.