Caterpillar
Reinventing the Product Comparison Journey
Agency Partner
Sapient Razorfish
Services
UX/UI
Interaction Design
Role
UX Architect Interaction Designer
Year
2018
In the bustling world of heavy machinery, Caterpillar customers had a daunting task: navigating through a diverse range of over 300 machines. They needed a best-in-class web experience that was user-friendly, and this is where our story begins...
Elevating User Experiences for Caterpillar's Digital Transformation
Caterpillar, a renowned global brand in the heavy equipment industry, had long established its dominance with its robust machinery. However, their digital footprint painted a different picture - one of clunkiness and outdated design. The existing web presence was marred by inconsistent interfaces, poor navigation paths, and a lack of intuitive user experiences, which necessitated a thorough heuristic evaluation.
This evaluation aimed to scrutinize the AEM components within the broader context of cat.com, identifying pressing heuristic challenges demanding immediate attention. As the Cat.com design system continued to evolve, new or refined components were introduced to accommodate the growing needs of the brand's diverse content. The overarching objective was to pinpoint the existing usability issues and provide actionable high-level recommendations for a more seamless and user-friendly web experience.
Defining the Scope
Caterpillar, a leading brand in the heavy machinery industry, recognized the need to revamp its digital presence. The existing website was clunky, inconsistent, and outdated, hindering the user experience. The scope of our heuristic evaluation was to assess the Caterpillar website against a predefined set of usability principles, specifically focusing on the product comparison journey.
Deep Diving into user findings & Selecting Heuristics
Understanding the diversity of Caterpillar's audience was vital. Caterpillar serves a wide range of professionals, including construction managers, engineers, and equipment operators. Each user group has distinct expectations and behaviors, so we needed to comprehend their unique needs and goals, so to ensure consistency in our evaluation, we chose to use a set of established usability principles – the Nielsen Heuristics for User Interface Design. These ten heuristics provided a well-structured framework for our evaluation.
PRODUCT COMPARE EXPERIENCE
Heuristic
Allow selection of a parameter to compare by.
Bring competitor’s equipment into the compare experience.
Recognition rather than recall; Flexibility and efficiency of use; User empowerment
Findings
On desktop, a sticky header does not appear, so users loose context as they scroll.
Mobile employs a sticky header, but the information is not optimal. Product names need to be more descriptive to provide value for more users.
Reccomendations
Include a sticky header for compare tables on desktop, if it works within the overall interaction pattern.
Consider alternate header content so it offers more context. Showing product images could offer some context.
Heuristic
Allow selection of a parameter to compare by.
Bring competitor’s equipment into the compare experience.
Recognition rather than recall; Flexibility and efficiency of use; User empowerment
Findings
No parameter selection is available.
Competitor comparison is available on a separate page. This complicates wayfinding.
Reccomendations
Including selection by a particular parameter empowers users to shop according to what matters to them.
Narrowing down by a parameter reduces the number of similar models. It might even allow bringing competitors models into the default compare view. (See John Deere site for examples).
Heuristic
Product comparison should be available at multiple areas - surfaced on the PDP as a mini-compare view, linked from the PDP, offered through the site navigation structure.
Recognition rather than recall; Flexibility and efficiency of use; User empowerment
Findings
Compare Competitors CTA takes users to a separate page similar to this one, with competitors models pre-filled in.
Request a quote is displayed for each compared model and appears to be an appropriate next step.
Reccomendations
Determine which actions are desired by the users and which actions will help them move closer to making a purchasing decision.
Prioritize those actions with respect to each other as CTAs to guide the design.
Heuristic
Comparison data is easy to scan.
Simplified product specs and details appear for comparison.
Visual product specs.
Aesthetics and design; User empowerment
Findings
Simplified product specs and details are not utilized.
Poor scannability. Design opportunities to improve scannability are not employed.
Data is not structured consistently, which is a significant shortcoming for dynamic compare tables. This is evidenced by two separate accordions for similar data. Example: “Engine” and “Engine - 300.9D VPS”.
Significant parts of the table are empty.
Visual specs are not utilized.
Reccomendations
Reduce the categories compared and offer only valuable content. Include only the attributes that users will actually care about.
Clean up product data so the parameters for the same category can appear in the same row of the comparison table.
Use visual specs and benefits.
Revisit visual design to improve scannability.
Heuristic
Inventory and pricing information are displayed where relevant.
Warranty, and service information displayed where relevant.
User Placement
Findings
None of these are present, with only a hint at the price with the “Request a Quote” CTA.
Reccomendations
Consider adding inventory, pricing, warranty, and service information in the context of the compare page. This is especially relevant when compared with competitors.
Heuristic
Share, download, and print are useful features for comparing tables.
User Placement
Findings
Only the Print option is available.
No download (PDF, Excel, other) option.
No option to share over email or social is offered.
Reccomendations
Add download and share options.
Consider which formats and methods (for share, download and print) are most useful to users and prioritise them accordingly.
Consider using this for lead generation. Offer to save the users’ custom compare tables for future retrieval.
Heuristic
CTAs next to models displayed for comparison should enable desired actions.
User Placement
Findings
Comparison is offered on the PDP and on the Family Page.
There is no option to select multiple products for a custom compare view.
No mini-compare view surfaces on the PDP.
Primary nav does not have a compare option.
Reccomendations
There is no option to select multiple products for a custom compare view.
Consider the site’s users and when in the journey they tend to need the compare options.
A mini-compare view is recommended for the PDP.
Heuristic
Inconsistency amongst the product model cta.
Consistency and standards
Findings
Maintain consistency of placement for the Compare Models link across all PDPs.
Allow comparison of all models listed on the Family page and show the CTA in a consistent location.
Reccomendations
Including selection by a particular parameter empowers users to shop according to what matters to them.
Narrowing down by a parameter reduces the number of similar models. It might even allow bringing competitors models into the default compare view. (See John Deere site for examples).
Heuristic
The location of the user within the site.
User Placement
Findings
No primary navigation item shows that it is in active state.
No effective (descriptive) breadcrumb is present.
"Excavators" and "back" links provide limited context.
Reccomendations
Consider a descriptive link for context or a breadcrumb.
Consider how users land on this page and provide context for each use case.
Heuristic
User Placement
User Empowerment
Findings
Users can follow Compare Models link on Family page and they land on a Compare Models page.
It is not clear how the compare models view is populated for comparison.
Users can change which models are compared, but they do not have any context for selection other than non-descriptive product names.
Reccomendations
Including selection by a particular parameter empowers users to shop according to what matters to them.
Narrowing down by a parameter reduces the number of similar models. It might even allow bringing competitors' models into the default compare view. (See John Deere site for examples).
Opportunities
Provide product comparison in multiple areas of the site.
Improve selection of items for comparison.
Leverage best practices for the presentation of product information.
Improve the content of compare tables.
Empower users to take the next steps.
Offer additional support in the context of product comparison.
Leverage the compare experience for lead generation.
Crafting The Solution
We developed a web interface that mirrored the best e-commerce platforms. The result? A frictionless and powerful shopping journey, showcasing both the brand and its products.
Provide product comparison in multiple areas of the site.
- Include a mini-compare view in the context of the PDP.
- Consider offering a comparison of product families. Parameters compared could include applications and industries and highlight versatility among products from different families.
Improve selection of items for comparison.
- Enable users to select multiple products to generate a custom compare view. Harley-Davidson, Intel and Apple (among others) offer this.
- Keep the user’s cognitive load low when selecting products for comparison. Provide meaningful filters to help users reduce the number of items listed before selecting for comparison.
- Offer users appropriate information about the products to enable selection. List key product differentiators.
- Empower customers to select the parameter that matters for comparison. This could be particularly useful when the initial list of products is longer than about 8 or 10. John Deere does this.
Leverage best practices for the presentation of product information.
- Offer visual specs and benefits.
- Revisit the visual design of the table to improve scannability.
- Utilize a sticky header for comparison tables with meaningful header content.
- When a table type of view is used, and the products have vastly similar information, visual highlights of differences can be helpful. Intel does this. Acura highlights the Acura differences with respect to competitor models.
Improve the content of compare tables.
- Consider showing a summary of key product specs and benefits at the top of the compare table. Apple does this for iPhones.
- Consider surfacing inventory, pricing, financing, warranty, and service information.
- Restrict the product parameters to offer only attributes that users care about. This could require consolidation or restructuring of information.
- Clean up product data so that descriptions of the same parameter for different products appear side by side (or in the same row) in the comparison table. Consolidate descriptive categories and remove duplicates.
- Make sure product terms are familiar or definitions are available in context.
Empower users to take the next steps.
- Offer clear calls to action that move users further down the purchasing funnel.
- Prioritize all CTAs and reflect the prioritization in the design.
- Consider offering users options to email, share, print, download/export, and save/retrieve. As an example, Audi offers a print option, while Intel offers print and download.
Offer additional support in the context of product comparison.
- Offer the option to chat with a representative. This can be an important touchpoint in the customer journey to help customers make a decision. Apple does this in some contexts.
- Provide other means to reach a human to ask a question such as a phone number.
- Promote other selection tools that might be available to help the shopper.
Leverage the compare experience for lead generation.
- Offer to save custom compare tables in exchange for contact information.
- Prompt users for an email address in the context of sharing the comparison.
