Typeahead Search in the Product Catalog

Problem

Users are overwhelmed by the vast amount of products in the product catalog and have trouble narrowing down their choices.

Solution

Offer typeahead guidance to help customers conduct better searches and get more relevant results.

Outcome

Give the customer confidence in finding the right product by helping narrow down their choices and reducing choice paralysis.

Discovery

From a previous site audit, we knew that the our search bar in the product catalog lacked modern features found commonly on popular ecommerce websites.

I started my discovery process by gathering secondary research from Baymard Institute, focusing on articles about autocomplete search. I gained insights about benefits, best practices, and user expectations. This helped me understand the importance of autocomplete, with over 90% of major e-commerce sites utilizing this feature.

The next step was to conduct a competitive analysis. I started by looking at indirect competitors who scored high on Baymard Institute benchmarking to understand what was working well for those sites. I gained a better understanding of how other e-commerce sites use autocomplete, as well as how the UI was styled for desktop and mobile.

Insights

Type-ahead suggestions can assist and guide the customer toward a better search, turning a poor quality search into a productive search. Helping the customer narrow down their options can reduce choice overload and ultimately help the customer find a product that fits their needs.

Beyond the main benefits, many users have grown so familiar with type-ahead search suggestions that their absence has been shown to cause hesitation and even abandonment of search.

Internal experience

The internal employee experience was also taken into consideration. I interviewed sales reps to understand how and why they use search in the product catalog. From those interviews it was clear that our sales reps were also struggling with certain aspects of the search experience. There was work to do to improve results shown and the speed of searching. This knowledge unearthed some previously unknown issues that were crucial to understand for sequencing the work needed for the search experience.

Customer Journey

I looked at the existing customer journey and mapped out an updated flow to show the effect of adding product suggestions within search. By allowing users to directly click on product suggestions, they would be able to go straight to the product details page, instead of stopping at the listings page first, creating a more streamlined experience.

Design Exploration

I worked through different layouts by creating multiple versions of wireframes for both desktop and mobile. I connected with the UX team for feedback on the layouts and the types of search suggestions being shown. 

Usability Testing

After going over the feedback, I created two versions of mockups to test with users. In the product suggestion section, one version had laydown imagery and ratings. The other version used models and color swatches. I wanted to better understand what information was most helpful for users when searching for a product. 

The usability testing showed a preference for having ratings shown because they assist with decision making. Users preferred seeing the model imagery to get an idea of how the product would look on a person and also because those images included design inspiration.

Outcome

This project is in the backlog until engineering can make additional updates to search and the product catalog. There is interest in exploring Algolia as an out-of-the-box solution for search and catalog improvements to reduce development time.

What I Learned

I learned how important it is to pay attention to what is already on our site to ensure design consistency. Along with that, I learned how important it is to understand what is already in the market to ensure our site stays modern and meets customer expectations.