Enhancing User Experience with Lightning-Fast Search Results.

Reducing the time to find the right product.

Decksaver, a leading provider of protective equipment for DJs and music production, faced a significant challenge on their website. The search functionality was sluggish and returning irrelevant or spurious results. 

Additionally, the system lacked the ability to control search results for equipment keywords accurately. Notably, the search failed to display equipment covers that matched the searched criteria in the "also fits" field of the product listing. These limitations hindered Decksaver's goal of providing a seamless and efficient user experience for their customers.

We analysed the existing code to find out where the bottlenecks were and why the results were not returning what was expected. 

We found that the existing search implementation did allow for some customisation by using variables that were turned into multiple SQL queries chained together. This created inefficient queries and sometimes no results at all where results were expected, this solution also required Wordpress to be bootstrapped in a way which invalidated any caching.

Our technical recommendation was to remove the current custom functionality and implement the nosql database Elasticsearch. This allows custom indexing which is optimised for searching and filtering rather than the Wordpress database which is optimised for storing relational data for the CMS.

We also recommended implementing a proxy server to allow the frontend of the Wordpress website to securely communicate directly with the search server to improve performance even further.

To integrate Elasticsearch seamlessly with their existing WordPress website, we utilised the Elasticpress WordPress plugin. 

By leveraging the plugins hooks, we ensured that all the essential custom product fields, including the crucial "also fits" field, were correctly indexed. This step allowed for accurate and comprehensive search results, delivering exactly what users were looking for. Furthermore, we optimised the search process by utilising Elasticpress hooks to remove unnecessary fields from the search results. This optimisation streamlined the response size, significantly improving search speed and responsiveness.

To allow the frontend of the Wordpress site to communicate directly with the search server we created node.js proxy server. This proxy server bypassed the need to bootstrap WordPress for each search request and as a result, users experienced faster loading times, reducing friction and enhancing their browsing experience.

Decksaver's customers now benefit from an autocomplete search that responds instantaneously to their search terms, delivering highly relevant and accurate results. The search functionality is now optimised, providing an unrivalled browsing experience. Try it for yourself on the decksaver website