product-category-structure

Improve eCommerce Converstion with UX improvements to Navigation, Taxonomy, & SEO

Redesign browsing experience by improving Navigation, Taxonomy, Design, and SEO for an e-Commerce website with ~40k products in the HVAC, plumbing, and electrical sector

CONTENTS

Business Problem

Big Picture

Interviewing Stakeholders & SMEs

Technical Questions

Sketching the Flow

Testing with Admin Users

Figma Wireframes

Figma Prototype

Designing for Failure

Specifications

Navigation Review

how does this thing work?

  1. The old website featured a single “products” tab for all categories of product. But the product layout and hierarchy was senseless.
  2. The primary “Products” button was not distinct in any way. It blended in with all other buttons, reducing its priority.
  3. The primary navigation was cribbed next to other unrelated items. The navigation hierarchies were poorly constructed.
category-pages

Category Pages

  1. The layout of category pages were quite long and a bit confusing. The combined product types with brands and styles, all in scrolling chronological order.
  2. Also, it wasn’t certain when we would be entering a category page or generic product listings. This was decided according to how many products they had for a particular category – there was no way for a user to know what to expect in advance. This had to be learned.

Competitor Navigation Review

horizontal-navigation-a
  1. Vertical Navigation extends below the viewport
  2. Categorized by categories, including brands
  3. Search bar in header section
ux-horizontal-navigation-b
  1. Vertical Navigation, uses local scroll bar
  2. Categorized by general categories
  3. Search bar in header section
  1. Horizontal Navigation
  2. Categorization by industry
  3. Search bar in secondary header/nav section (this is cut off in the video)
  1. Horizontal Navigation with mega menu
  2. Overlapping Categorizations by job type, industry, and Item Type
  3. Search bar in secondary header/nav section.

Conclusions from Navigation Layout Review

Categorization

In order to settle on a categorization scheme, we needed to develop a clear acceptance criteria. Unfortunately, user-testing nor card sorting would be in the scope of this project. Usability and product access would be validated by the client and his experience.

Meanwhile SEO and integration with wider Google eCommerce environment was a priority. We developed an approach I’ll outline shortly.

Navigation Layout

The horizontal navigation would remain familiar to existing customers, and we bookmarked the idea of mega-menu to expand the functionality and volume of this particular layout style.

Search Bar

We wanted to keep the search bar in the header as well. We thought combining the horizontal navigation and search bar would be important for maintaining established eCommerce visual patterns while making everything accessible.



ux-navigation-layout

Creating Product Categories for SEO and Google Shopping

user-search-keywords

SEO Research

SEO keyword and competitor research was able to create a comprehensive outline of page types correlated with users’ ability to find and navigate products.

Google Shopping

Recreated the product category structure of Google’s own industry related shopping experience. Their categorization was comparatively limited, but provided the baseline for integration.

We decided that primary categories would be industries. Within each industry, we would organize products according to industry standard labels, brands, and model names/numbers.

product-category-structure

Layout Patterns for eCommerce Navigation

vertical-dropdown-mega-menu

Divergent Path #1

Here I integrated the product trees into a Costco / Amazon style drop down, incorporating possible brand categories.

Divergent Path #2

Here I incorporated BHS’s trees into a visual layout closer to Supply House’s, also incorporating possible brand categories or other featured opportunities. You can see this in the second frame.

Conclusion

With the 2nd path, the 3-4 industry names would be featured in the primary navigation, allowing customers to self-identify immediately

At that point, on hover, they would be able to browse the categories familiar to their industry.

The 1st path unnecessarily hid the few industries served behind a single drop down. This added a step which didn’t offer us any valuable affordances.

horizontal-navigation-mega-manu-wireframe

Category Pages

SEO analysis stated that 2nd level categories (HVAC > Controls) behaved frequently as anchors for return purchases, they could also more readily benefit from search optimization given the relative “niche” content.

A unique visual structure would be given to these pages to ease-in the “as-needed” return users.

Additional sub-category related content would be added to these pages to SEO and user introduction.

Search Page: 3rd level product categories would always direct the user to search pages. These pages would contain all attributes accessible through the database, would be undergoing a long-term overhaul.


ux-ecommerce-category-pages

Visual Design

I was not the visual designer on this project. These were done by my colleague.

 


homepage-design
category-page-design