John Nance's profile

Woot gateway and navigation redesign

Woot.com, a subsidiary of Amazon.com, is a Top 50 e-commerce site that launched in 2004 and introduced the “daily deal” model to the U.S. Since 2004, Woot has grown from one deal a day to over 3,000 while maintaining its sharp humor in write-ups, blogs, videos, polls and other content. 

As the design leader for the site, I am responsible for all decisions regarding both user experience (UX) and visual experience (VX) design. This includes desktop, mobile web, mobile application, and marketing. 


Desktop Experience Redesign
Through heuristic evaluation, customer interviews, and a third-party report on customer profile and segmentation, the business saw the need for a redesign of the desktop experience. We wanted to address the gateway page first. Here was its initial state:
I determined that there was a serious need to declutter the top section of the site. Aesthetics can be subjective, but I faced little resistance when arguing that this was not an acceptable design. So while the top section was not in the scope of the first phase of the project, I argued that since this section is the first impression new customers have of Woot, it should be addressed immediately.

Heuristically, these are the issues I had:

•  No clear logo at the top. Is the site Woot, Wootdunnit, or deals.woot?
•  There is no tag line to indicate to customers what Woot is.
•  The ad placements make it look as if the site does not scroll.
•  The “I Want One” button does not add to cart. It takes you to a detail page.
•  The overlay of the information on top of the product is visually confusing.

To confirm my suspicions, I ran what is known as a 5-second test on usabilityhub.com. Customers are shown the site for only five seconds, and then asked to identify the type of site they saw. Not one participant understood that Woot is a deals-based e-commerce site.

My next challenge was the "I Want One" button. The label was regarded by many employees as a brand staple that was not to be touched. To test this perceived affinity, I conducted a moderated usability test where I changed the language on the button. Not one single Woot customer took notice of the new label. Interestingly, the same moderated test found that one-third of customers didn’t realize there was content below the fold.

With data in hand, I was able to convince management to update the top section in phase one of the redesign. Since time was short, I looked to the smallest changes with the biggest impact. A simple rearrangement of existing assets clarified the overall look and presented the information in a product-content-community hierarchy. Here is the revamped look:
The previous example was an exercise in working with constraints, but still a considerable improvement. The next phase was a greater departure. The newest design was a revamp of the navigation and daily deal space. A clearly placed logo and tagline are now present. The Cart, Login, and Community links are consolidated at the top. The goal of the daily deal space was to allow customers to rapidly scan through deals. This was a direct request made by many customers in the moderated usability test that I also performed for this phase, so gone are the tabs and exclamation points which inhibit scanning.
The prototype for this mock may be viewed here: https://invis.io/TS5KLWZ36

A follow-up test found the improvements to be a success. Customers rated the new design significantly higher than the existing site. It was mostly described as "Easy to use," "Organized," and "Fun."

As part of this phase, I also wanted to update the look of our mascot monkeys, Mortimer and Monte. I worked with illustrator Dan Zettwoch (who had done much of the original branding) to produce these refreshed versions:
We placed the new illustration in the navigation, and followed up with the logo and tag line. We moved the "Home" category from the first spot as we suspected that customers were confusing it with the homepage. We then applied a colored background pattern.

During this process, I discovered that no one had ever conducted any specific taxonomy research for the site. We then contacted Amazon's taxonomy team and were able to work with them over the course of a few months to acquire expert opinions and data through tree-testing and card-sorting exercises. We are now applying this knowledge to other facets of the site, and we plan to engage their team again next year to address our primary navigation. In the meantime, I worked with my designer to evolve the initial concept and created this execution:
We conducted a baseline test of this execution, and the results were startling:

•  Traffic jumped across all categories except for "Home," in some cases over 50%
•  Bounce Rate was almost cut in half
•  Pages Per Session increased by one page
•  Average Session Duration increase by over a minute

All that from little more than branding and visual design! I would attribute this success to emotional design, which is often overlooked in the UX world. Since visual design decisions are typically guided by subjective opinions, success metrics are hard to measure, and anything that is hard to measure typically gets backlogged into non-existence. I've been around long enough to know better, but even I was surprised by this overwhelming success. 

The final design for Gateway is forthcoming, and I am sure there will be more thought and iteration before launch. 
Woot gateway and navigation redesign
Published:

Woot gateway and navigation redesign

I am the design leader for Woot.com leading the business through a redesign.

Published: