UX Designer & Manager • Chicago-based • she/her
Redefining Broad Landing Pages
Company: McMaster-Carr
Role: UX Designer & Manager
Original Design
Timeline: ~1 year
What is a broad landing page?
As a B2B industrial supplier, McMaster-Carr is known for their no-nonsense website experience. In order to maintain this brand, and be an objective arbiter of content, we must disambiguate when a customer's search term could reference multiple kinds of products.
Diagnoses of the Problem Space
-
We have an egalitarian, one-size-fits-all treatment of our products, even when we know that some are likely frontrunners.
-
By organizing by related concepts, less common products can come along for the ride with more popular products, taking up valuable real estate and pushing close alternatives further down the page ("hitchhikers").
-
We obscure visual diversity by using a single image that is too generic (per customer research findings)
-
We often force customers down overly narrow paths, requiring them to make multiple decision points at once.
The Ideation Process
01.
Understand the problem space.
The earliest entry point of the customer’s journey requires them to disambiguate. How can we keep them well-informed without overwhelming them?
02.
Connect with our stakeholders.
Our work is within the company’s overall Content Strategy framework. We’ve created new software, redefined our information architecture, and redesigned our navigation all at once. All players need to be deeply embedded in each other’s processes for this to go smoothly.
03.
Get out the bad ideas.
My co-designer and I regularly practiced ‘Crazy 8’s’: Create eight crazy ideas within eight minutes. This creative exercise helps clear the mind of its own judgement so that uninhibited ideas can come to the surface.
04.
Redefine the good ones.
What worked from those "bad ideas"? How did our different use cases affect how we approached our ideas?
05.
Dive into the products.
I love creating heat maps of pages like this so I can define the solution space. I considered three aspects of our offering: the interactions likelihood, the product count breakdown, and the visual diversity of each product category.
INTERACTIVITY HEAT MAP
It’s clear that the majority of interactions go to our first product category. We can do more to emphasize likely paths.
PRODUCT COUNT HEAT MAP
Many products below the fold have a diverse offering that is hidden beneath a click. By offering product counts and copy within the landing page, we could demonstrate the breadth of our offering more effectively.
VISUAL DIVERSITY HEAT MAP
Similar to the product count heat map, this exercise demonstrated the hidden diversity of images for products across the page. We do customers a disservice by using overly-representative images, failing to provide a useful information scent.
The Designs
McMaster is traditional company with a rich history. This history has led the company to be very risk-averse. In my designs, I strove to be mindful of the company’s brand strategy, while also pushing the envelope to encourage a more modern and delightful expression of our offering.
An Emphasized Approach
The Strategy
By altering tile sizes and bringing in images for the most common families, we give an instant visual indication of emphasis. At the same time, we don't hide other, less common families: they're still visible above the fold, only with less information.
Optimal Use Case
A customer is looking for a flanged socket head screw. They quickly see the product they’re looking for in the first tile. The title reinforces their choice.
The Challenges
Having multiple tiles sizes can be a little overwhelming at first/challenging to scan. We also risk not providing strong enough information scent for less common products. Also, visual diversity does not directly correspond to being a likely path. Some common but not visually diverse products are given room for more visuals than necessary, while visually diverse, uncommon families are left without room to demonstrate the visual diversity.
AVisual Approach
The Strategy
The design above introduced risk when visual diversity /= likely path. By flipping the pattern and letting visual diversity & copy determine tile size, we allow room to customize content to each tile's needs. Likely paths are still listed first, but less common, visually diverse products still have the space they need to provide sufficient information scent. A browsing experience is more easily achieved, since the many variables mean that a customer might take a little more time to explore each tile's offerings.
Optimal Use Case
A customer is looking for a clevis pin with a loop grip. Instead of wondering if we have the proper kind of pin, here they can clearly see that the desired product lies behind the "Pins" tile. In addition, a customer who simply wants to browse around and explore our offering can explore a visually engaging navigation experience.
The Challenges
Although this version strives for equity instead of equality, it ends up facilitating more of a browsing experience and fails to strongly emphasize the most likely paths. Inadvertently, we emphasize uncommon paths if they require more visuals/copy. It also could cause challenges for a mission-driven customer, since scannability is more challenging. It also deviates from McMaster’s typical objective arbiter approach.
A Layered Approach
The Strategy
The design above didn't emphasize our common cases enough, and was hard to scan. By elevating more detail and grouping common products, we provide structure and clarity for the common paths. For less common products, we can summarize them more. Additionally, by creating carousels for the larger ideas, we still have room to peek less common products above the fold.
Optimal Use Case
A customer is looking for a specific kind of nut. The customer saves a click by going straight to, say, the Locknuts tile.
The Challenges
A customer who wants a screw or nut that is behind the carousel is required to do more work to find their product, which they shouldn't have to do. Additionally, interactions can be confusing here, since tiles behave differently in the two different sections. Deep links can introduce challenges for usability.
The Final Design
As a team, we aligned on two strategies: one for search terms that return products within the same overarching categories & applications, and one for a larger diversity of categories. For example, a search for Nuts returns 27,000 products, but most of these are within the Fastening & Joining world. Conversely, a search for Plugs returns 20,000 across 4 different categories: Fluids, Building, or Electrical. These types of searches benefit from visual information scent to discern options.
Images
Images are one of the most valuable forms of information scent we can offer a customer. They require little time to process yet offer lots of insight. By allowing there to be room for three images instead of one, we can give the customer a better idea of where they’re headed next.
Product Counts
We consistently hear positive feedback about showing our product counts. This helps inform customers of the breadth of our offering, so they know they’re headed in the right direction based on their search.
Information Architecture: Most Likely Products
Previously, we would do electrical plugs a disservice by burying it with other electrical products. Here, we can show likely results regardless of where they live on the page, and then show our traditional organization of products below.
In our A/B test, we saw an 3% increase on success for the Nuts search term, and a 5% increase in success for the Plugs search term.
