One of the team's goals was to give users a better way to understand which locales they could visit. Our site does a great job in helping users who know where they'd like to travel, but it doesn't do as good of a job for our users who are yet undecided.
Our content teams provide a wealth of ”inspirational“ content that could help users decide where to stay, but our current landing pages weren't doing a great job at letting users see what other information is available — the search box simply takes up too much screen real estate. After seeing in user research that our search box wasn't competitive, we decided to build and test a more modern, more compact search box.
We first started by doing a search box comparison across other competitor websites, which showed that the experience we were currently offering didn't work as well — most competitors have settled upon a design that's more linear; our original search box doesn't guide the user from left to right. Our search box also didn't do as good of a job hierarchy-wise. Then, user research showed that users preferred a horizontal layout, compared to our original search box.
With these insights in mind, I put together some quick wireframes on paper, then created some mockups in Sketch. Together with the clientside developer on our team, we built and A/B tested a few versions of this new search box (he created the Javascript to support interactions, while I built the HTML and CSS).
The new search box had quite an interesting impact on search usage — searches increased by something close to 7%, a large change for a highly optimized site like Booking's. Ultimately, other user behavior caused us not to roll this change out to all users — we saw a drop in the work/leisure/business travel toggle, which made the change unviable for teams that optimize the site based on user selection there.
Booking's current search box
The new search box, which increased search usage
