Parts Catalog Redesign
A whole new way to browse and shop a large OEM parts catalog
The User
DIYers (Do It Yourself-ER) Mechanics trying to find genuine parts for their cars.
Problem
Finding a part is confusing and leading buyers to drop off before making a transaction. About 50% of our users are shopping on small devices making the older experience harder to navigate.
Our Goal
Making it easier for a mechanic to find parts through a confusing OEM catalog. We also want to accommodate various screen sizes in the experience too.
The Old Way
For a user to find their way to a parts assembly image was painful. They had to click their way through a linear path of links. There was really no good way for user to retrace their steps besides using the back button.
Plan of Action
When I started to think about the new design I wanted users to have some context on where they were and what parts they were looking at. The navigation had to be seamless by reducing the amount of back and forth clicking in the catalog and of course it had to be mobile.
Here’s what I came up with…
Here’s a few features I added:
Left Side Menu
I Listed all the main part categories in a left navigation. By clicking on one of the main categories it will now reveal all the subcategories while keeping the user on the same page.
I also included a search bar at the top of the menu. So if a parts expert knows exactly what they’re looking for — they can now instantly jump there without clicking through the menu.
New Assembly Image Experience
If the user finds themselves on the wrong part assembly. No problem. They just click another category in the left side menu and the content will dynamically change and match the subcategory that’s been selected.
Out with the Old and In with the New
After we launched the new experience within a few months we saw a 15% decrease in the bounce rate platform-wide.