Motion Industries Category Pages
Implementing category pages templates to drive product discovery and enhance navigation
Introduction
Motion Industries is an B2B e-commerce components and machinery industrial solutions company. In 2022, the Baymard Institute conducted an audit of the current site to analyze the UX performance and identify key improvements.
The team identified a need to address the poor navigation and organization of the site. As part of this effort, this project is focused on implementing new category page templates to help users make more informed scope selections as they navigate through the site.
My Role
Timeline
Platform
Responsive Web
Team
UX Designers x 4
Product Managers x 2
Engineers x 2
Challenge
Motion has an extensive product inventory of 19+ million unique parts, but users were struggling to find relevant products quickly. Category pages serve as a showcase for all items within a particular category, allowing users to see the full range of options available. However, category headers on the current site are not clickable and prevent users from exploring a range of products within a specific category. This is a poor experience for users unable to find and discover relevant products and/or information, leading to user frustration and missed sales opportunities.
DESIGN PROCESS
Competitive Analysis
Since I did not have direct access to talk with users, I conducted a competitor analysis to explore how category pages enhance a users' purchasing experience. Category pages typically used one of two layouts:
Layout 1: Simple & straightforward
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 PLP.
Layout 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.
Since a category could have up to 54 subcategories, the template needed to be scalable and flexible.
After presenting my insights, the Motion team wanted to explore the two different design template layouts. Throughout the design process, I kept the following considerations in mind:
How do we create a flexible template?The number of items varies under each category with a maximum of 54 categories.
How will this design scale to tablet and mobile?
How can we reuse or build upon existing patterns in our design system?
How do we lead users to what they need efficiently? How can we organize information without overwhelming users?
Concept 1: All Categories
This is the most common design solution, but it become visually overwhelming and difficult to scan when applied to our dense site taxonomy.
Concept 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.
Concept 3: Two-column layout
This concept is meant to encourage discovery and exploration providing users with multiple click 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.
