A Better Search Experience on Detailed Image

I’ve been chipping away at the next round of improvements to our shopping cart. The past week was one of those really good weeks where I deployed a ton of code.


A precursor to moving forward was to (finally) switch our javascript library from using the outdated script.aculo.us to the more lightweight and more powerful jQuery. This required quite a bit of code to be rewritten, most of it critical to the shopping experience, but it has paid immediate dividends: the site is significantly faster, jQuery is much easier to develop with, and the plug-ins available make it extremely extensible.

The site speed is a big deal. Prior to starting this project I took a bunch of speed benchmarks (using YSlow and Firebug). The goal is to be as fast and lightweight as possible, like we achieved with the new LockerPulse. The more people shop on mobile, the more speed becomes a critical factor. We’re still a long long ways from the ultimate goal, but just from the jQuery switch and some minification we’re 50%+ faster on most pages.

Better Search

Most e-commerce site searches suck. If I don’t find what I’m looking for when I search, I tend to go back and drill through category pages, or site search using Google, just in case a site’s bad algorithm didn’t return everything it should have.

This is for good reason. Search is hard. It takes a lot of work to get right (or even close to right). Many businesses use off-the-shelf shopping carts, and you’re stuck with whatever their search engine offers.

When we launched this version of our shopping cart in 2009 we had a pretty good search engine (I explained the “how” here). It had an autosuggest/autocomplete feature, and the results were exceptionally accurate compared to our competitors.

Fast forward almost four years and the search engine still worked, but we’d discovered some holes in it that I set out to plug.


jQueryUI has a great autocomplete widget that I used as a starting point to completely rewrite our autosuggest feature. Among the improvements:

  • Speed: the old one used an AJAX call to our database on each keystroke. This is common (Amazon does it) but also can be slow and resource intensive. The new one uses a pre-loaded javascript array, which is cached nightly. Flickr’s post about optimizing their autosuggest was incredibly insightful and served as a guide in my decision making process.
  • Pattern matching: the old one would only match the first character of a product name, whereas we now match any part of the product name. We also show you what you’re matching by bolding the matched text.
  • Brands, Categories, Subcategories: brands and categories are now marked as such within the autosuggest, and subcategories are also included, broadening the potential matches significantly.
  • Sorting: the old one would sort alphabetically, whereas now we display in order of our “quality score” (more on that below).

Here’s an example of where the old autosuggest failed. Type in shampoo – something we sell plenty of – and nothing shows up! Since shampoo isn’t a main category, and no products started with the word shampoo, it was blank:

Detailed Image Autosuggest Shampoo - Old

On the new autosuggest, you get exactly what you’d be looking for – a link to our shampoo subcategory page, followed by a list of our most popular shampoos:

Detailed Image Autosuggest Shampoo - New

Search Results

Ideally everyone finds exactly what they’re looking for using the autosuggest. In reality, plenty of people still search – either because they ignore the autosuggest or because the autosuggest doesn’t provide what they’re looking for.

Our biggest weakness was not matching “synonym” keywords where the searcher is searching for something we have but just calling it something different. I’d imagine Google has teams devoted to this. Our data showed that the queries we did worst for were ones where customers searched for buffer pads with the word inch in the query. For instance, 4 inch pads.

As of last week that query returned zero results. Why? Because we call them 4″ pads. So I built a “synonym system” to help tackle some of these queries. In doing so, I discovered another problem: we’d display all sizes of a product if there was a match, not just the size that matched. So even now if you searched for a 4 inch pad, you’d get the 5.5 inch and 6 inch sizes of the same pad in the results too! I reworked that as well, and now a query for 4 inch pads actually returns 4 inch pads!

Detailed Image Search for 4 Inch Pads

Quality Score

When you’re viewing a brand page or a category page on our site, we sort the products by what we call our “quality score.” The higher the score, the higher the item appears on the page. Previously this was something we assigned manually – we wanted to curate the site based upon what people were buying, what was new and hot, and what we thought were the best quality products. This was fine when we had 100 products. We now have over 750 products, we’ve been in our fastest rate of product additions these past 6 months or so, and we have no plans of stopping.

The reality was that no one was going through the products and updating the quality scores unless they saw something that was drastically off. Given how difficult and time consuming this would be anyway, we decided to automate the quality scores based upon the sales history of the product and the newness of the product, with new products getting a “boost” to both stand out to customers and to give us time to get adequate sales data.

The result is much better than what we had manually. Because this worked so well, I then decided to sort the results in the autosuggest based upon the quality score. If you start typing in a brand name, you’ll see the newest products first, followed by the most popular products. As opposed to just an alphabetical list. Here’s an example:

Detailed Image Autosuggest Chemical Guys - New

Moving Forward

Throughout this whole process I made a list of probably a dozen more improvements. I was tempted to keep going, but I was unsure of the payoff. What I did do was start collecting even more data on each and every query so that we can better analyze what queries are working and what ones aren’t. In a few months I’ll have Bobby do some analysis for me and we’ll make our improvements based upon what we find.

We’re still at the point where I feel like we’re tackling the low-hanging fruit. It didn’t take some robust analysis to tell us that these things needed fixing – they were obvious and we just used the data as confirmation. To me, it’s pretty obvious that these changes will increase conversions, average order value, and decrease customer frustration. We’ll certainly confirm that with data, but when my/our search experience improves so drastically it won’t be surprising that our customers does as well.

I hope that by the end of the year we’re at the point where there aren’t so many of the obvious improvements left. That’s when having all of this data, and an employee who spends much of his time doing data analysis, will really pay off. We’ll be able to make those little changes that might not seem obvious to us, but will have a positive impact on our customers and bottom line. We’ll be able to quickly iterate and optimize based upon what we’re learning from our customers. That’s something we’ve been envisioning for years, and I’m very pumped that it’s now within our grasp.

5 comments on A Better Search Experience on Detailed Image

  1. Tim says:

    Very cool post Adam, as a behind the scenes guy I know this is the sort of upgrade that 99.9% of users will never know happened, but I know you’ll get satisfaction in knowing that means you did it right!

    Technically some of the details are over my head, but the reasoning and logic behind everything makes total sense.

    Forgive a noob like question, but any reason you didn’t use Google Site Search? I imagine, though I haven’t looked into it specifically, that it would solve most of your requests.

    • Adam McFarland says:

      That’s actually a really good question 🙂

      Google has Google Custom Search Engine, which we currently use on our Ask-a-Pro blog. Even the $100/year product falls short of what you’d need on a retail site. It’s very good for content but not so good for products. It is missing some customizability that we’d like so we may look to replace it at some point with something custom.

      The real interesting product from Google is Google Commerce Search. That is designed to do everything you’d want on an e-commerce site, although the price is absurd (starting at $25k/year). Feature-wise, we’re not too far off now from what that offers. With only 700 products it’s easier for us to tweak our algorithms to be close to as good as Google’s on our site, whereas if we had say 7k products I’m sure their search engine would be vastly superior. But for $25k/yr it probably wouldn’t be worth it to us. They’re really targeting the Fortune 500 type of companies with this product. The customer list on their website has companies like GNC, Panasonic, Forever 21, etc. Maybe someday they’ll make it free like Google Analytics!

  2. […] took the improved product search engine and set out to apply that to the Detailing Guide and Ask-a-Pro Blog (WordPress search engines are […]

  3. […] early 2013 I wrote a post about some major improvements to Detailed Image’s product search. The relatively robust […]

  4. […] we’ve done a lot of work on our search engine, these pages have remained largely untouched since the 2009 cart […]

Comments are closed for this post.