Scotts miracle-gro Cart enhancements
sometimes it starts with an error.
The replatforming of our Greendigs site resulted in the below out of the box Cart experience, notice the error message above the main navigation.
Things online move quickly. You add a few items to your cart and by the time you’re ready to checkout, one of those items is already out of stock.
In this case, imagine receiving the following error message in your cart, “Your shopping cart cannot be ordered since one or more of the products in your cart are not available in the requested quantity. Please check availability for each product.” Way to add insult to injury! Not only are you no longer getting an item you planned on purchasing, but now you have to do the grunt work of finding the stock messages of each item to understand which item you can’t purchase. That seems convoluted. Our users thought so too.
Our Consumer Services team brought this to our attention due to the volume of users contacting them about this issue. The user came with questions that an inevitable design update would need to answer…
How do I find out which product is out of stock?
How do I remove the product that is out of stock?
Can I edit the product in order to select another variant?
The user’s questions sparked interest amongst my team. Knowing that this was the first site to launch onto our new platform and that an additional 6 would later inherit this styling, we had to take this opportunity to analyze the entire checkout process from mini cart to order confirmation and ask ourselves…
What are other pain points for user’s within the checkout flow?
Can we run a usability test to uncover them?
Are there any special considerations that would need to be made for any of our other sites that could ultimately impact the entire design system for the better?
In order to begin to generate solutions, I needed to first visually map the concern areas. I did so by annotating the current experience within a low fidelity wireframing tool - Whimsical. The areas of concern are called out below.
After discovering paint points, I created low fidelity wireframes within Whimsical to present to stakeholders. These new designs were to be built within our design system, Rhizome, so the functionality of the designs impacted all 7 sites on the platform. Because of this, it was important to get all brand leaders in agreeance and address any brands that had edge cases or unique needs. Additionally, it is important to include the business side into these conversations to collaborate on conversion opportunities.
After receiving stakeholder approval from all brands, I took to Sketch to create the high fidelity designs in the brand agnostic Rhizome styling, that would later be skinned in each brand’s theme. Scotts has the proprietary rights to the final Sketch designs that were handed over to the development team for implementation, however, below is a look at the live site updates. Annotated on the design are the solutions to the aforementioned issues (yellow) as well as additional updates to adhere to UX design best practices (green).
Now that the cart experience has been improved, it is time to tackle the rest of the checkout flow.