Product Comparison begins in the Dow.com product catalog. Users can select up to 5 products by clicking the “Compare” button on each product they’re interested in. This will trigger the interactive bottom drawer overlay. Once a user has selected 2 - 5 products, they can click “Compare Now” to launch the tool.
Bottom Drawer Overlay
Overlay is triggered when compare icon is activated on individual product cards, allowing for products to be added or removed before linking through to tool page.
The Compare icon is found on product cards listed from returned results. Icon changes state depending on interaction and actions overlay. The Comparison tool bottom drawer overlay then appears when product is added.
Responsive Breakpoints
Compare icon and interactive states
When the icon first appears, it sits in the product card in a default state. Hover state is then triggered when the cursor hovers over the icon before clicking and animates the two rectangle icons to slide inline with each other, changing from an outline stroke to a solid fill. Once the product has been added, the icon enters its completed state allowing the rectangles to lock into position and fill, and ‘Compare’ changes to ‘Added’ in bold.
Color Accessibility
Colors used in the compare tool (Dow Gold, Dow White, and Web Black) have AAA and AA pass and can only be used this format to allow for accessibility. These colors also reflect a usage definition.
