Optimizing Product Cards

Site: bonnieplants.com
Timeline: 1 month
Role: UX Research/Design Support
Tools Used: User Testing, Whimsical, Sketch
Process: Iterative Usability Testing
Result: 200K+ Revenue Increase

Overview

Prior to 2020, BonniePlants.com was an informative website consisting of how-to-grow guides, recipes, and other general gardening resources. In 2020 and at the start of the pandemic, Bonnie Plants needed to evolve and find a way to maintain sales as less people were shopping in stores. A secondary website was quickly built in an attempt to explore eCommerce. Selling live plants online quickly proved to be successful and a new, unified website was planned. In the meantime, however, the secondary site remained live and the original, informative website was altered to redirect users to the secondary, eCommerce website. Prior to building the new, unified website, a series of usability tests were conducted in an attempt to optimize the shopping experience from the product category page.

Qualitative Research with User Testing

The initial usability test targeted the product cards on the product category page and it was quickly determined that users struggled what we sold from the category page alone. Ordering starter plants online isn’t common, so many users assumed that we sold plant seeds or even fully grown produce. In addition to this, plant quantity and price were both absent from the product cards, which many users felt was intentionally misleading. The three omitted elements, as well as many other considerations, are critical to the shopping experience, so we started to map out what each card needed to include as well as the many varying states.

Continued Testing

After addressing the missing elements with our initial mockups, we were left with with many additional questions:

  1. Can we use icons to communicate quantity and form (starter plants)?

  2. Do users have all of the information they need to add a product to cart from the category page?

  3. Are users able to distinguish which products can be purchased online from the products that cannot?

  4. Is the 2-pack plant default a barrier for purchase?

3 follow-up usability tests resulted, targeting the questions listed above.

Mockups

The mockups shown below demonstrate the varying states and associated complexity that accompanied this project. 7 total card states were considered, including 3 ‘Add to Cart’ states and 4 ‘Unavailable’ states.

Final Designs

After several rounds of usability testing, ‘ideal’ product card mockups were then provided to the external agency that was selected to build the new BonniePlants.com. Although the UI would eventually change, the data-driven architecture of Bonnie’s live product cards remains largely the same. A $200,000+ increase in revenue can be attributed to product card optimizations alone.

Recognition

In September 2022, I was honored to be asked by my manager, Jessica Bailey, and Ohio State University’s UX Community to talk about this case study and the importance of quick and scrappy usability testing.