A6/A9 products are restricted to non-consumable water uses due to the lead level content. The current experience leaves something to be desired:
There is already a problem on Step 1. There is nothing at the top of the product page to indicate that this is a restricted product. That information is located at the very bottom of the page.
Step 2 gets even worse. The full text of that modal window reads:
The following are restricted items. They cannot be used in the USA for potable water applications.
Will these products be used in the USA?
Please note, that if you answer “No” to this question and your shipping address is in the USA we will not be able to send you these items.
The products themselves just can’t be used for potable water in the USA. They’re fine to use for non-potable water. The question implies that the product cannot be used at all in the USA. The question becomes even more confusing when you know that Zoro.com does not ship outside of the United States.
Step 3 asks the customer to type in their full name and email address to verify that “the following products will not be used for installation in a system that is intended to convey or dispense for human consumption water through drinking or cooking.” This wording, while still muddy and confusing, is better than the better screen. However, the user has no idea what to enter in that first field. The placeholder text is hidden by the automatic selection of the first field and there is no label visible outside of the input field. The user would have to guess or figure out that they needed to deselect the input field.
Once you’ve agreed to the statement, the item is added to the cart. If you go to the cart, there is no indication of the product, its restrictions, or the agreement you made.
Behind the scenes, the process gets even more muddled. Even after that agreement, the order is held under a specific code. It is not processed until a CSA compares the name and email from the report against the name and email from the order. If it matches, the order is released for processing. If it does not match, the CSA has to reach out to the customer to get them to confirm the agreement.
It’s a lot of manual work on both sides.
The new experience needed to:
- Notify the customer that the item is restricted and give details on why
- Allow the user to easily add the item to cart, without multiple modal windows
- Still gather the legal requirements from the customer, in a way that our legal team found acceptable
- Remove the manual process for the CSAs
Users would be less shocked by anything that came after if the product reliably explained to the user why this item is restricted. A notification at the top of the screen, closer to the Add to Cart icon, would be much more helpful in this situation:
The “see more” links the user down to the more detailed explanation at the bottom of the page, but it still gives them an idea of what the restriction is without them having to read the full explanation or the entirety of the page.
The multiple popups were causing friction to the customer and it wasn’t asking for any information that wasn’t already collected during the checkout process. After contacting the legal department, they agreed that asking for name and email again wasn’t necessary and that asking once was more than enough. There was no need for CSAs to manually check every single A6/A9 product order.
That removed one popup and the manual checking. The remaining popup still had confusing language. Rewriting the prompt made it much easier to understand:
But could the process eliminate the popup entirely?
I found this example on Grainger. When adding the product to the cart, I didn’t get any popup requiring my agreement. When I went to the cart page to see if it would let me check out with the item, I found the prompt in cart.
By moving the question to the cart page, the popup is gone (another popup towards our goal of eliminating them). There are already other notifications on the cart page, so this helps contain similar items and will ultimately train the user to look at the cart for shipping issues and other restrictions:
Users who click “No” would get a constant notification of their agreement, which wouldn’t happen in a popup state:
However, for those users who mistakenly click “Yes,” special consideration needed to be made so that they didn’t lose the item entirely:
If the item automatically removes itself from the cart, then a customer would have to go and find the item again. (The popup doesn’t have this problem, as the user stays on the same product page.)
Both variations had pros and cons, but we decided to pick the cart notification variation. It would allow us to expand on the cart and other initiatives we had planned for it, and it would also eliminate another popup entirely, which was one of our goals.
The process ended up much simpler: