Motion Industries Category Pages
Implementing category page templates to enhance navigation and drive product discovery
Introduction
Motion Industries is the largest distributor of bearings and maintenance, repair and operation (MRO) products. When I joined the team, Motion was beginning to expand beyond its traditional B2B model and invest in more B2C like digital experiences to keep up with new buyer expectations of simplicity, speed and clarity.
As part of this effort, I led the product design process of the site's first category pages. The goal was to improve navigation, increase product discoverability and ultimately boost conversion. To achieve this, we chose to create a scalable, responsive category page template to be applied across all 19 product families.
My Role
Timeline
Platform
Responsive Web
Team
UX Designers x 4
Product Managers x 2
Engineers x 2
Challenge
Categories headers were present in the site navigation but were non-clickable, functioning only as static text labels. The challenge was to develop a scalable, responsive category page template capable of adapting to 19 product families with highly variable structures to improve navigation and streamline the path to purchase.
Problem
In 2022, the Baymard Institute conducted an UX audit of the current e-commerce site to benchmark against our industry leaders and competitors. Primary issues identified in relation to site navigation include:
Difficulty navigating the catalog
Complex hierarchies with no context make it hard for buyers to locate the correct product family or subcategory causing inefficient browsing.
Longer time to find the right product
Inefficient navigation increases time-to-task completion. When users can’t orient themselves, they’re less likely to find the right product—and less likely to purchase.
Increased mis-clicks and frequent backtracking
Buyers bounce between pages trying to find the correct starting point. Users click into a product listing page, realize it's not the right "type" of product, and end up backtracking repeatedly creating friction and frustration.
Two approaches, one goal
Our team decided to explore two approaches—one focused on simplicity and ease of build, and another optimized for richer user engagement. This gave us room to evaluate what best met both stakeholder expectations and user needs.
Approach 1: Navigation focused
Competitors like Grainger, Fastenal, and MSC leverage a simple layout featuring a menu of subcategories with representative images. This layout focuses on navigation and serves as an intermediary page to help users navigate to the product listing page.
Approach 2: Content heavy
Competitors like Global Industrial, Home Depot and Lowe's leverage a more content heavy layout to feature additional content, like resources and buying guides, to support browsing and encourage discoverability.
Explorations: Designing a flexible template to adapt to 19 product catgories
My explorations focused on creating a template system that could scale across 19 categories with varying levels of content. I prioritized scalability, flexibility and responsive, using the most extreme use case, 54 subcategories, as the foundation.
EXPLORATIONS
Exploration 1: List All Categories
This is the most common design solution, but it becomes visually overwhelming and difficult to scan when applied to our dense site taxonomy.
Exploration 2: Highlight top categories only
Concept 1 led me to consider prioritization. Only top categories are visually highlighted which allows users to see the popular product groups, reducing the number of clicks to reach the desired product.
Exploration 3: A two-column layout
This concept is meant to encourage discovery and exploration providing users with multiple entry points, such as "Top Categories" and "Shop by Brand". However, this design is not mobile-friendly so we did not move forward with this direction.
A hybrid solution — Prioritizing navigation while encouraging discoverability
After multiple rounds of iterations and internal discussions, the Motion team moved forward with a hybrid design solution. The first half of the template has a brief description of the category with navigation links to all subcategories. The second half of the page features additional content, like buying guides and featured products, to nudge users to progress along the conversion funnel.
Because our users have more domain knowledge and expertise, displaying all categories seemed to be the most intuitive solution, but moving forward with a hybrid solution opens up opportunities for our users to explore and discover additional product offerings.
Users still have the ability to skip straight to a product listing page from the navigation, but a category page provides a path for them to learn about various potentially relevant product features more efficiently than randomly clicking different products.
