Increasing Transparency for Product Inventory
Sites: Scotts, Miracle-Gro, Roundup, Ortho, Tomcat, AeroGarden, Greendigs
Timeline: 2 months
Role: UX Designer
Tools Used: Sketch, Abstract, Zeplin
Context
During our transition to Salesforce, we encountered the necessity to migrate all our websites simultaneously which resulted in an unpolished initial launch. One prominent issue was found on the Product Detail Pages, where users struggled to differentiate between out-of-stock attribute combinations and attribute combinations that simply did not exist. To address this, urgent corrective measures were imperative. We embarked on a mission to enhance the logic and display on the PDPs, ensuring that they conveyed precise information about available attribute combinations, out-of-stock items, and permanently unavailable options while also increasing prominence to all product variations. This enhancement not only rectified the transparency issues surrounding our product inventory but also significantly improved the overall user experience when shopping.
State After Initial Launch:
Attributes pre-selected upon landing
Seemingly limited availability
Full availability after deselecting default selections
Initial Mockups
The main challenge throughout this process was creating cohesive logic and design that could accommodate all 7 brands under the Rhizome Design System umbrella. Initial mockups attempted to display all attribute options for a product at all times, using slashes to indicate unavailable selections. The early mockups provided more transparency and context to all of a product’s variations, but it did not, however, eliminate user confusion when distinguishing between combinations that were unavailable and those that were simply out of stock. Additional experimentation utilized alternate CTAs, showing/hiding variants based on availability, disabling swatches/chips, and including an additional swatch/chip states for out of stock vs. unavailable. Please note that the mockups shown were created with Greendigs, a Scotts houseplant brand, in mind due to the nature of their complex PDPs. The logic/design explored is consistent with all brands.
The mockups shown above represent the initial exploration of handling attribute variants by simulating an 'unavailable' state. When an attribute combination is unavailable due to non-existence, these unavailable variants are removed to prevent user confusion. This logic ensures that users are presented with and can interact with only the attribute combinations that are either in stock or out of stock.
Initial Prototype
The prototype shown displays an early iteration of logic that resulted from early mockups.. The logic being displayed utilizes showing/hiding attributes, altering CTA labels to indicate products that are out of stock, and overall providing more clarity to a product variations by displaying attribute chips prominently.
Final Design/Logic
The first listed attribute is known as the ‘driving attribute’. The driving attribute will always show all variants. All subsequent attributes are known as ‘passenger attributes’. Passenger attributes show available variant combinations resulting from the selection made for the driving attribute. This logic allows users to understand what variant combinations exist and which do not. Out-of-stock variations are indicated through a CTA label that changes upon selection. This approach enhances product transparency, prevents users from selecting non-existent variations, and helps them discover available options.
Takeaways
Designing for multiple brands simultaneously was an extreme challenge especially with product complexity varying drastically from brand to brand. Because of this, articulating logic and design was oftentimes very difficult and frustrating for myself and even the developers. Supplemental prototypes and flows were absolutely critical to the success of this problem. It took several iterations, and several walkthroughs with the development team before we were able to get to a final product that solved our initial problem.
In the end, I was able to learn the importance of supplemental documentation as well as facetime with developers. Without these things, it would have taken many more resources and time to successfully remedy the inventory problem outlined above.