WW Grainger is one of the largest facility supply and maintenance companies in the world. Their website is highly used by contractors of all types and sizes. Trope Collaborative was working on the redesign of grainger.com and identified a problem with product safety icons that were getting lost in all the page content. These icons have very specific meaning and important governmental compliance information, sustainability, product information and product functional information. The icons that had been developed over time were not done as a system.
SafetyManager was a microsite within grainger.com. There were other web properties that had to be connected such as a trial site, a separate login url and doorways back to the landing page.
Working with Grainger marketing, four templates were created that contained content, features and functions for SafetyManager. Clear calls to action and show/hide fields allowed content to stay above the fold.
Due to the nature that users could navigate to SafetyManager several ways, Trope created process flows to show click-throughs and options for users to learn, trial and convert.
Methods & Practices
We audited the existing icons and worked with a visual designer to harmonize the visual structure of the icons to make them look as part of a family of icons and that they were visually distinct from other page elements. We also met with legal counsel to review the icons and their content (which had not been done before) to make sure our recommendations would pass legal requirements. We identified a need to provide contractors with an overview of what icons meant at any point in the shopping process with proper roll-over states and important internal and external links for more information.
Impact & Outcome
The recommendations were implemented and the feedback from both contractors and WW Grainger support was very positive as it reduced the number of calls to support on product compliance issues.