Overview
Problem: McMaster-Carr prides itself as a publishing company with an encyclopedic paper catalog, a respected reference for contractors, designers, and others. However, the company’s website is primarily designed for easy search & selection, quickly narrowing products according to a customer’s entered specifications. The website needed a way to facilitate easier browsing through McMaster-Carr’s vast product information.
Solution: The carousel is a first-of-its-kind browsing feature on mcmaster.com, an ecommerce site of 555,000+ products. The carousel was first released as a feature on the company’s mobile apps, and then rolled out through the entirety of the website. It navigates laterally, like pages turning.
My role: Working closely with my team and management, I was the primary developer for much of the project’s design, construction, and rollout throughout the site’s main product pages. I outlined the feature's business logic and user flows, worked on the technical design, engineered server-side and front-end code, wrote the testing plan, tested changes, fixed bugs, and iterated per feedback.
Inspiration from the existing catalog & mobile app
McMaster-Carr's catalog has been around for about 100 years. It is a well-respected resource for product information, prototype design, and general reference. McMaster's merchandising teams painstakingly curate the catalog, and it is a major piece of company brand identity.
McMaster's tablet and mobile apps support browsing with finger swipes to the right and left, with animations that mimic a catalog's pages turning.
Personas
Betty the Buyer works at a large corporation, and her job is in the purchasing department. She orders many items from McMaster's website, but she does not have much industry knowledge because she does not actually use any of these supplies in her role. Sometimes she needs to consult the catalog's "About" sections to understand context or differentiate between parts.
Douglas the Designer is an industrial design student who is always making prototype projects for school. He uses the catalog as a source of inspiration for his designs, flipping through sections to discover new parts he might use. Browsing and discovery are the top priorities for Douglas.
User flows
I outlined a range of different user journeys through the website and mocked up what the carousel should display at each point in the journey. This established the business logic rules for when and how the carousel feature should be present. This was an iterative process in collaboration with my management team and company leadership.
Technical design
The website had been designed to facilitate easy funneling down to a specific, needed product in response to a customer's entered specifications.
There was no framework for loading pages from neighboring product categories, rather than their parent category. I needed to design new data objects to hold all the information needed to load each page present in any given level of the product hierarchy.
To hold these data objects, we used a circular doubly linked list. It is structured like a real carousel, connected end-to-end and can be traversed in both directions.
Agile rollout
We released the carousel in phases throughout different areas of the website, iterating on designs and fixing bugs as we went.
Planning for edge cases
A separate visual design team had passed along a static image of what the carousel feature should look like, but there were no existing prototypes or images to address edge cases. Our team designed the animation of the feature, hover behavior, click behavior, scroll interactions, responsive sizing, and how the feature should abbreviate long product category names.
Demo videos
Carousel animation while browsing. On hover, the carousel color deepens and any abbreviated text is expanded.
Responsive design ensures the carousel adjusts to screen resizing and scrolling. The feature never takes up more than 2/3 of the screen and fades away when scrolling. These choices prevent ever obstructing the user’s view of content or getting in the way of clicking on product order links.
Impact
Analysis of user interactions tracking data revealed that the feature is not very heavily used (comparatively, for a site with millions of customers).
However, usage numbers were not our primary goal; this was a project about conceptually bridging McMaster-Carr's paper catalog history with its increasingly digital future.
Another aim of this project was that it be integrated throughout the entire website without ever being too distracting or getting in a customer's way. Customer feedback suggested that we succeeded on this goal.
