Motion Industries Category Pages
Overview
Motion Industries is the largest distributor of bearings and maintenance, repair and operation (MRO) products with 18+ million parts across 19 product families. As the business looked to strengthen its competitive edge online, poor navigation lead to missed sales opportunities. Category headers existed in the site but led nowhere, leaving buyers without a clear path through our extensive catalog. Working with the internal team, I led the design of scalable category page templates to make the problem tangible enough for executive buy-in. The designs were presented to leadership and has since been implemented.
My Role
Product Designer
Timeline
3 Months
Platform
Responsive Web
Team
Product Managers x 2
Engineers x 2
Challenge
Category 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 template that could adapt across 19 product families despite highly variable taxonomy.
Problem
The Baymard Institute conducted an UX audit benchmarking the site against industry leaders and competitors, with navigation as a primary pain point across three areas:
Complex hierarchies with no context
Buyers couldn't find the right product family or subcategory leading to inefficient browsing
Longer time to find the right product
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
To inform our direction, I conducted competitive research across key players in the space and shared my findings with the team. We aligned on exploring two approaches before committing to a solution in order to evaluate what best served both user needs and stakeholder expectations
Approach 1: Focus on simplicity and ease of build
A common pattern across industries is 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: Optimize for richer user engagement
One established approach in the space leverage a more content heavy layout to feature additional content, like resources and buying guides, to support browsing and encourage discoverability.
Designing a flexible template to adapt to 19 product catgories
My explorations focused on creating a template system that could scale across 19 product families with varying subcategory depth. I prioritized scalability, flexibility, and responsiveness using the most extreme use case, 54 subcategories, as the foundation to ensure the template could handle anything below it.
EXPLORATIONS
Exploration 1: List all categories
The most straightforward solution and easiest to implement. However, when applied to Motion's dense taxonomy, but it becomes visually overwhelming and difficult to scan, making it clear a more considered approach was needed.
Exploration 2: Highlight top categories only
Exploration 1 surfaced a need for 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 introduced multiple entry points to encourage discovery and exploration such as "Top Categories" and "Shop by Brand". While the layout was not mobile-friendly, the idea of multiple entry points informed our hybrid solution.
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.
