Site Search Enhancement

The Whole Story

When I began my career stint at Hearst Autos, my primary focus was on the Car and Driver website experience. There was a laundry list of features to create or improve upon, and it was clear that one of those items was the site search. Car and Driver’s search experience was, in a word, awful. To begin with, it was hidden within the hamburger menu both on desktop and mobile, making it difficult to find. And when users did find it, the results were mixed; sometimes you’d find articles or pages relevant to what you were searching for, and other times you’d get results that made absolutely no sense at all. It was time to fix a notoriously bad experience on the Car And Driver website.

This was the entirety of the search experience. And even if you searched, the likelihood of it returning the desired article or related items was slim. You’d have better luck getting your number called first at the DMV.

But more than that, the quantitative numbers told the story. It was getting extremely low engagement and a concerning abandon rate. It wasn’t just underperforming; it was barely performing at all. Given the quant data available to us plus the prior research from user interviews, we had everything we needed to hone in on the problem and begin working on a solution.

Framing a New Search Experience

One hypothesis from the team seemed likely: Because the search was hidden in the hamburger menu, it wasn’t getting much interaction. The Amplitude data showed a very, very low engagement rate. It was only slightly better on mobile, and we hypothesized that was because accessing the mobile menu at all meant clicking the hamburger where the search lived. So I set out recording the team’s hypotheses along with my own and creating a generalized idea of what something new could look like. Next came wireframes, working in three separate ‘stages’ of the search experience.

The Default State

Where is the search going to have the most exposure while limiting screen space when the user isn’t utilizing it? Because the site was browse-heavy, we wanted to ensure the search bar lived in a prominent area that persisted so it could be accessed immediately and at any point in the user journey. We made it ‘sticky’ and always within the header.

An easily accessible, prominent search was key for the type of browsing we saw in the data. Users jumped from one vehicle page to another, from article to article, etc. The solution: A persistent, ‘sticky’ search.

Other options were explored, but we wanted to ensure we could do this search enhancement easily and iteratively. It was well understood on the team that enhancing the search experience was high value, so getting an MVP out there in as little time as possible was paramount to the organization. Next, we moved onto the search dropdown – where the user gets popular vehicles at the outset, and predictive autocomplete functionality.

Search Dropdown

This one brought up a lot of discussion. What makes sense to show here? Should anything at all show before a user types? If so, what shows (or what is therefore suggested)? Then when a user types, what changes? Certainly the predictive text should, but should anything else? All considerations the team had to sift through. After again digging into our quant analytics we came up with some answers: It should show our Make/Model pages before typing, which are cornerstone content for the car research experience. We should show our most popular Make/Model pages. Then when a user types, those suggested Make/Model pages change to relevant results to the search string (along with the predictive text completion above it). In the end, this proved to be a highly valuable search experience. In my opinion it was the ‘winner’ of the three separate stages that made up the enhanced search experience.

That said, we shouldn’t overlook the final aspect of the project: The Search Results Page.

Search Results Page

If a user hits ‘enter’ on their keyboard during or search or selects one of the autocomplete items on the list, then they will end up on the search results page. The thing about this experience is that Car and Driver has a lot of content, and devising a good way to sift through it was a task. In the end, the team settled on the tabs, which bucketed content into specific content categories on the site. This way, a user wasn’t forced to scroll endlessly to find what they were looking for.

We were able to get this approved more quickly than other things. SEO wasn’t worried about it because each URL is a search string, and ads wasn’t too picky either. Easy peasy!

While the visuals were important on this page, this is where the rubber really met the road in terms of search relevancy. When determining what made sense to show as a result (and considering something as general as a make and model search), the team settled on a mix of three things: Relevance to search string (how close does it match what the user searched for?), recency (Sure it’s an F-150 like they asked, but let’s not pull a 2016 F-150 review above a 2026 model year) and popularity (we have MANY articles on the F-150…maybe we don’t let an article that has a few thousand views leapfrog an article that has millions of views). After dialing it in, we had our visuals ready to test.

For user testing, I ran two tests: An unmoderated desktop usability test with 10-15 users, and the same parameters for the second test, except for mobile. Both had very positive participant feedback. I wish I had more useful data to share here, but most of the feedback was extremely positive given the very poor experience that existed on the site at that time, and being that users were excited for something new to be launched. Feedback was specific, minor and mostly to element placement or small interaction adjustments. Once I synthesized the data using ChatGPT and Userlytic’s built-in AI synthesis tool, I gathered all of my qualitative findings and presented it to the team with recommendations. The team approved, and we did the standard dev file handoff clean up. In other projects, I used Cursor + Netlify to code up a version of my design but this was just before that time. So I did it the manual way; clean up design files and shore it up to pixel perfect with annotations for the devs to refer to.

Launch + Conclusion

The search enhancement feature was launched in early to mid 2025 and was a spectacular success. Leadership was extremely pleased with the outcome and the metrics proved that this feature was helping engagement on the site overall; users that engaged with the site search ended up spending an extra 6:20 on the site than those who did not, and averaged an extra 2.93 pages per session. That’s a huge bump when your organization’s primary goal is engagement, engagement and more engagement.

Want more examples like this? Feel free to check out my other portfolio examples here on my site. Thanks for reading!