9 examples of great eCommerce on-site search

In this list we highlight search usability essentials like autocomplete and mobile experience as well as other elements that create a stand-out search experience such error correction ie do you need to spell your query with 100% accuracy, the presence of layered navigation on search results pages and zero results optimisation and many others.

Yamaha MusicSoft

Yamaha MusicSoft really enriches their search results pages by pulling in a variety of attributes and icons. This includes a “New!” label to merchandise SKUs that have just gone live, and also a handful of icons to visually differentiate the product thumbnails. The name of the musician is also pulled through as an attribute.

Not only are the search pages rich, but search is a central focus on the homepage. There’s also an in-field label and popular searches to give the user ideas on what to search for.

The search box then re-appears on all other pages in the top right, where customers would expect to find it:

2 Wayfair

Whereas the likes of Amazon and ASOS have rolled out visual search on their apps, Wayfair.co.uk is one of the few retailers to have implemented it on their mobile site. It’s very clear how to use it and they give succinct instructions on how to ensure accurate results:

Disappointingly, there’s clearly work still to do on the accuracy of results, as a photo of a pair scissors surfaced shiny items but no scissors. Of the results that were surfaced however, there was a lot of information pushed through, including the different colours available as thumbnails, the name of the manufacturer, the old and new price to highlight saving, the average product review rating, how many reviews in total and even shipping details. There’s also a product label for Sale item and even the ability to favourite the item from the search results page.

3 Ocado

Ocado packs a lot of information into its search results pages. First off, we have a couple of featured items card, ensuring that the Smart Pass discount is prominent and star ratings pull through (without number of ratings). Moreover, the estimated life of the food item is pulled through, meaning the shopper doing their weekly shop doesn’t have to worry about use-by dates as it’s worked out for them.

Next up, results are personalised to show relevant items that have been previously first. Here we can still see life span of the foodstuff, as well as a vegetarian friendly product label, the cost per kg and cleverly even when it was last purchased.

The third segment is then shown, with offers being prioritised and clearly labelled with an Offer icon. All three segments, Features, Favourites and standard results have a prominent ‘Add to trolley’ CTA button, meaning the shopper doesn’t need to click through to the product page to buy the item.

4 Rapha

Rapha has sensible multi-option filters like weather and size displayed before the search listings, rather than on the left hand side. As on Wayfair, we can clearly see average product rating and total number of reviews, as well as additional colour ways available. Clicking on the colour swatch updates the thumbnail image accordingly. By selecting a size filter, the user can be sure that they will only see results for gloves that are in stock in the size they require, avoiding disappointment.

5 Boozt

Boozt, a stylish Nordic fashion site, is another shining example of great search implementation. It clearly signposts new products with a black roundel in the top right , and the percentage discount is prominently displayed in the top left corner in red too. It also uses horizontal attribute filtering, rather than left hand side, similarly to Rapha. The hover over reveals thumbnails for each available colourway, and the size availability cleverly adjusts accordingly.

6 Yoox

Yoox.com, Italian fashion site owned by Net-a-porter, is a beautifully slick site and its search functionality is no exception. Rather than a clunky drop down for sorting options, there are one-click links in a horizontal bar for the most popular sorting criteria: Latest arrivals, Highest price and Lowest price. Hovering over a thumbnail reveals a secondary close-up image of the toe of each shoe. This consistency is pleasing to the eye and means the searcher is more likely to be happy to use quick buy then have to click through to the full product page, as there’s so much information available to them already. Again available colour swatches and sizes are clearly displayed. Quick buy is a great piece of functionality on any product listing page and the search page is no exception, yet few sites implement it there. Multi-option filters are crucial on any search results page but it’s important that they’re options that a user would actually want to use to refine their results. Yoox has lots of thoughtful filtering options like heel height and toe shape, which seem to be genuinely useful filters for real-life shopping criteria when buying shoes.

7 Size

The shoe retailer’s search bar holds a prominent position on the site, sitting right next to the logo/home button in the navigation. When activated, the search screen dims the rest of page content and highlights currently ‘trending’ searches which is a great way of suggesting products based on popularity but also newness, inventory status (best seller, slow seller, low stock) or current marketing activity. Voice search is also an option if typing is not your bag.

As you type your search query, top results start appearing in the search drop down – both text and thumbnail. Search results pages are accurate producing relevant results for broad queries like ‘red’ as well as as more specific product queries such as ‘nike air max 97’. Standard product listing page features are displayed including sort by options, grid size, layered navigation and quick buy on product thumbnails.

Zero results page is a well laid out page prompting users to download Size’s product preview app, create an account and follow their product launch calendar.

Other highlights include:

• brand queries such as ‘Reebok ‘ redirect to brand landing pages which then link out to subcategories (Men’s, Women’s, Kids) helping you narrow your search further

• commonly misspelled queries are redirected to relevant pages, for example searching ‘Niek’ takes you to a results page for ‘Nike’

8 Lush

The eco cosmetics brand’s UK website has a bold yet minimalist navigation with search being one of only four shopping elements after ‘Products’, ‘Shops’ and ‘Exclusives’. When activated, the search bar takes over the entire navigation. Top suggestions display in a drop down stretching to the full width of the page. Each suggested item also displays a category label helping you further navigate your search.

The results page itself offers quick filtering options allowing you to focus on non-product results like ingredients, retail locations and content which is impressive.

Product result pages use standard filtering options as well as more niche, brand focused attributes such as ‘Scent’ and ‘Feel’ – this I imagine is aimed at first time customers / browsers.

The product results page features a really nice, visual grid with a hero product that displays the top customer review. Other, smaller thumbnails follow displaying product name, product category, a short description, user star rating, price, a product sticker highlighting certain features & benefits eg ‘Exclusive’, and packaging icons indicating the shape and type of packaging the product comes in.

Another highlight is that the search results pages load rapidly which is partly thanks to lazy loading. This makes for a winning experience on mobile devices.

9 Matches Fashion

Although the search bar doesn’t particularly stand out on the page, the search experience makes up for it. Clicking into the search bar, a bigger, full width bar appears giving you the option to search Womens or Mens categories. The search prompt is ‘I’m looking for’ which is a nice detail. As you start typing, the search screen takes over the page offering a wealth of options such as designers, categories, most popular searches related to your search terms and a selection of relevant items from the New In category displayed in a thumbnail slideshow.

Users can also search by item code One of the highlights of the results page is the number of viewing options – three grid view layouts (5, 4, and 3 column layout) as well as product or outfit view. The viewing options are also optimised for mobile users offering double and single column grids and no outfit viewing option.

Another stand-out feature is searchable filter attributes eliminating the need to scroll through hundreds of designer names – this is a real time saver on mobile devices in particular.