Amerock.com Usability Update
Earlier this year the Amerock.com website become another branded site that our E-Business team was to manage. The challenge that came with this responsibility was migrating the “look and feel” of the existing site to a different platform. What entailed was about a week of work to craft a new set of stylesheets that essentially made the “new” site look nearly identical to the old site.
We did however take liberties in updating products based on new product rollouts and added functionality that didn’t previous exist. Here are some before and after screen shots:
Product Navigation (Old)
Old site consisted of a 4-layer navigation schema:
- Choose Product Category
- Choose Product Type
- Filter Product List (Choose 1 Finish, Style, and/or Collection)
- View Product (See details, finishes, etc.)
The problem with this style of navigation is it forced the end-user to make too narrow their product selection too soon in the process just to see a product list. Finish coordination across product types is important in cabinet hardware, so the desire to see “all products with a satin nickel finish” needed to be possible. With the old site, this could not be done.
Above we see Decorative Hardware product types.
Here we see a product listing, but we can only choose from thedrop-down menus for further filtering options.
And here we see product details with finishes. Lots of unused real estate.
Product Navigation (new)
A simple 2-step process exists:
- Choose Product Category (from the main navigation of the site)
- Select multiple filters and see your product results
Select multiple filters across multiple filter types. An additional bonus is seeing the filter “counts” so there’s no guesswork when you’re clicking on options wondering if you will see any additional product results or not.
Clear visibility in the left-hand navigation of what filters are selected and which product results you’re viewing. Additionally, there are “results per page” options as well.
Product comparison also didn’t exist on the old site. It is now available on the new site.
Image zooming was also unavailable on the old site. Thanks to Adobe Scene7′s dynamic image zooming technology, we use it on all product pages to enable the end-user to zoom in on-the-fly on the product image.
Table Stakes
It seems odd to be showing some of the above features as they are mostly “table stakes” features these days. However, there are many large e-commerce sites that still do not offer simple things like product image zooming, unlimited product comparison functionality (do I really need to be limited to comparing 3 products at a time so the site design stays scaled proportionately?), and “results per page” customizations. Amerock.com is now fairly level-set with these “table stakes” features an we begin the continuous improvement with repeatable processes.
No comments yet, be the first.