Suggested Products in Search Type-Ahead - Case Study
On LifeWay.com, our search feature is one of the most important and most used features of our site. As such, we consistently look for ways to enhance and improve this feature. One of the most recent enhancements we designed is the ability to place suggested products in the search type-ahead.
Discovery
As part of our research, we consistently look to industry standards, and evaluate methods and practices of other ecommerce websites. One of the things we noticed when utilizing other sites (like Best Buy and Amazon) is that they feature products in their search type-ahead results. The way in which they feature the products differs slightly. Best Buy features product tiles for products themselves, while Amazon tends to lean more towards category-based product features. Even so, this got us thinking about how we could test and integrate a feature like this on LifeWay.com.
We believed that the user would benefit from an addition of product imagery in the type-ahead results. Essentially, the product image would provide a quick visual identifier for the user, and potentially keep the user from “having to think” much before clicking. Additionally, our users tend to respond to specific resources when it comes to targeted materials, and so we decided to focus more on specific product suggestions. With this initial discovery plan in hand, we were ready to set forth our goals for the project.
The Goals
In order to satisfy the needs of our users and the desires of the business, we identified our goals for the project:
- Provide products with product images in the search type-ahead
- Showcase the suggestions on both mobile and desktop
- Increase revenue and conversion
With these goals in mind, we were ready to dig into wireframes and design.
Wireframes & Design
We went into Adobe XD to begin to layout the initial structure. We wanted to keep the suggestions to the most relevant products, and as such, we set up the structure to limit the number shown to three (3). Once the structure was in place, we were ready to move into design.
We knew that this element would pull from our global styles, so putting together a design for product suggestions went pretty smoothly. We utilized globals we had in place, and then we positioned items stacked on mobile, and also stacked to the right on desktop. On mobile, we decided to test removing all of the text suggestions, and focusing on the new product suggestions. On desktop, meanwhile, we had enough screen real estate to place both text suggestions and product suggestions, and so we kept both to give our users options.
The Result
In the end, our team launched a test of the product suggestions, and the new experience was proven to be preferred with a large amount of confidence. Revenue per visitor increased with a 93% confidence, and conversion also increased. We were able to determine the test was successful, and our goals of providing product suggestions and increasing revenue were met.