Product filter & site search best practices: A closer look into GAP, Lacoste and Mavi

Consumers are turning to eCommerce now more than ever. Specifically, online browsing for apparel increased by more than 200% during March 2020. To ensure product findability and customer satisfaction, it’s essential to apply product filter & site search best practices that enable them to quickly and easily find what they’re looking for. 

In this article, we begin by elaborating on why you should focus on two specific functions, product filter, and site search, for your online fashion brand. Then, we will closely look into the product filter and site search of three well-known apparel brands, and close off with the discussion about best practices that you can learn from. 

Why online apparel stores need to optimize their product filter & site search 

The Growth of Apparel Industry and Its Intense Competition

According to eMarketer, U.S. eCommerce total sales of apparel and accessories are expected to exceed $134 billion in 2020. The next two years look even more promising for this category as sales are predicted to top $170 billion by 2022. 

Ecommerce sales of Apparel & Accessories from 2018-2022. (Source: eMarketer)

Apparel makes up nearly 20% of total sales throughout the years and it has become one of the largest product categories in the eCommerce industry. With so many businesses jumping into this segment, fashion retailers face intense competition. This isn’t made any easier by consumers’ tendency to ‘flick’ between different brands before making a purchase decision. 

If you want to stand out in this industry and persuade customers to choose your brand out of other millions of online fashion stores, you should get back to the basics with a focus on product findability and flawless customer experience. 

Focus on Product Filter & Site Search So Customers Can Find What They’re Looking For

Now, let’s find out the reason why eCommerce businesses, especially online apparel stores, need to concentrate more on filter and search. 

Users tend to find products on eCommerce sites in two different ways: browsing and searching. Browsing involves scrolling through the categories provided by the website while searching means using the internal site search. 

Regardless of the method used, users will be presented with a product listing from which to find the product they want. This listing can contain tens, hundreds, or even thousands of products, so finding the right product can be challenging.

On one hand, getting filtering right allows users to find the product they want in less time. If users can't find the exact product they require in minimal time, there's a good chance they'll go to a competitor where they can.

On the other hand, our customers and potential customers turn to search because they need something that the current page isn’t showing them, or they know exactly what they want. The better your eCommerce search engine is at returning the desired results, the more likely your visitors are to make a purchase.

In short, with supportive arguments from eConsultancy, here’s why online apparel stores should invest more time and effort in site search and filter functions:

• They increase site usage.

• They deliver a better overall user experience.

• They result in more returning visits.

• They improve customer retention and loyalty.

• They improve branding.

If you wish to discover more benefits that product filter and site search can bring to other eCommerce niches, check out our article. 

Therefore, it’s no exaggeration to say filter and search are the keys to a successful eCommerce business. With apparel brands struggling to exert their unique images in this fierce niche, learning from million-worth brands can bring tremendous benefits. 

A closer look into product filter & site search best practices of top apparel brands

In this article, we will analyze the function of product filter and site search of the top three apparel brands: GAP, Lacoste and Mavi, who are also Boost's long term customers, so you can get insightful takeaways and practical tips on how to customize your website and optimize the conversion rate. We will also cover site navigation, as internal navigation is a crucial type of filtering and also the first touchpoint when shoppers visit a website.

GAP

GAP is a world-famous fashion brand for women, men, and kids. According to SimilarWeb, GAP ranks 9th in the Fashion and Apparel category, with the mission to sell casual clothing that is comfortable, accessible, classic, and modern for everyone.  In 2019, GAP made nearly US$ 3 billion from its global online shopping.

Navigation: An elegant touch of visual

When it comes to filter & site search best practices, the top-level navigation of GAP homepage is well-organized with clear subcategories. These categories are segmented following their primary customer groups like “Men”, “Women”, “Maternity”, “Girls” and “Boys”, etc. This kind of drop-down menu is quite conventional and friendly to most visitors. 

What’s special about GAP’s top menu is the preview images of certain products that encourage browsers to make an action on site. In “New Arrivals”, GAP chooses to feature hot products like masks or their new collections. This is a clever way to promote a certain group of products. 

The drop-down top menu of GAP with a clear hierarchy and preview images to illustrate top products. Source: GAP. 

Product filter: A charming combination of double filters

GAP offers its customers two levels of horizontal product filter when going for a specific subcategory product. 

• Level 1: Product-type filter

• Level 2: Category-specific filter 

By using double filters, customers can easily sort through hundreds of options to find exactly the product they are looking for within a few seconds. In particular, fashion terms like “bodysuit”, “tank & cami” may be difficult to visualize to some shoppers. Therefore, with delicate icon-based filters at the first level, GAP immediately helps their users ease this pain. In addition, GAP excels at putting the most relevant product attributes to enable shoppers to refine the exact product at the second level. This is a good way to remind or educate customers that these product attributes are important in their selection process. 

The two-level filter enables customers to filter out the product they are looking for with a sophisticated system that is custom-built based on the customers’ journey. Source: GAP.

Do you want to have two-level filter like GAP? We can help 🙋🙋

Site search: A sneak peek of product thumbnails

GAP makes searches easier with previews of products’ visuals. The visuals show search suggestion images directly motivating visitors to click and find out more about the product. Thus, you can increase the chance of making a conversion.

Product previews can immediately help shoppers visualize what they are looking for. Source: GAP.

Lacoste

In the Fashion market, Lacoste is ranked #433 in the US and #964 worldwide with US$109.4 million net sales in 2019. 

Navigation: A show of double subcategories

Lacoste prominently displays sub-categories under top parent categories by the name of “Shop by theme”. If you take a closer look, you can see that a collection, for instance, “CrocoSeries Collection”, can be shown in multiple top categories. Unconventional it may seem, this kind of navigation is indeed a clever way to promote new collections and products. 

By showing the same collections under different categories, Lacoste increases the chances of customers finding products they’re showing. Source: Lacoste.

As per a finding by Measuring Usability, when one item is included under different categories, the percentage of users who successfully found the item increased from 29% to 74%. The same rule applies to Lacoste’s top navigation. More themes displayed equal more chances of customers finding what they want, thus more sales. 

Product filter: A rich palette of product attributes

Lacoste goes beyond the popular horizontal and vertical filters to opt for a bold collapsible filter. 

By collapsing filter menus, customers can see all filter types to decide on the most relevant ones to dive in. Collapsible menus also allow shoppers to pick the filters that they need while ensuring the screen remains free of clutter. It’s unlikely that users will want to apply more than two or three filters at most, so you need to make sure they can hide the ones that aren’t relevant. 

When customers want to look for a certain range of products in a collection page, they can simply click on the “Sort and filter” button. It immediately shows a list of filters: product type, color, material, design, fit, sleeves, etc. so that you can check on needed options to find your wishlist products. What’s great about Lacoste’s filters is the combination of diverse types of product filter display settings, namely, box, list, color swatch. This design is way more interactive, encouraging shoppers to have a little fun while refining product characteristics.

Customers can find joy in filtering products with a range of characteristic display settings. Source: Lacoste.

Product filter & site search best practices of Mavi

Compared to the above brands, Mavi is the youngest but has quickly been gaining success with remarkable achievements, making it one of the most progressive apparel brands. In 2020, Mavi earned nearly 90 million dollars in Q1 alone, seeing a 41% rise in sales year-on-year. 

Product filter: A perfect custom to every customer’s need

Mavi focuses more on how their customers can pick out their exact product fit, by prioritizing detailed sizing attributes like waist, length, fit, and color. 

A simple but detailed filter can help customers find exactly what they need. Source: Mavi.

A noted lesson for other brands, not every product filter has the same answer. Instead of copying the same option values , you should dig deeper into what’s your customers’ needs. In order to do this, you can definitely keep track of how your customers use product filters to craft a version of your own that can cater to their demands. 

Site search: A dedicated work of smart search

Regarding internal site search, Mavi is superior thanks to the instant smart search with the inclusion of popular product thumbnails. These smart search results provide easy-to-see prices and real-time updates as the search term changes.

Mavi’s smart fuzzy search function allows shoppers to scan through a list of product results - fast and exact. Source: Mavi.

Product filter & site search best practices you can learn from top apparel brands 

With different stores come different ways to use product filter and site search. These three top brands have certain practices in common that we can learn from. 

About product filter

The user’s filtering experience is a central part of the product browsing process. When done well, filters can empower users to narrow down a product catalog of thousands to just a handful of products that match their unique purchasing preferences.

Provide Category-Specific Filters

According to Baymard, category-specific filters should only be available in one or a few select product categories. Unlike site-wide filters, such as ‘Price’, ‘Best Selling’, or ‘User Ratings’, category filters only make sense for the products contained in a particular product category.

Category filters are especially helpful for customers who are unclear of their own preferences. Moreover, this kind of filter support fashion brands, which have several mega categories, to refine many products with custom filters. 

In the case of Lacoste, aside from clothing,  they also sell other products such as shoes, leather goods, and accessories. Therefore, applying category-specific filters can help customers segment what they need based on product options. 

In particular, for an accessories category like “Trainers for men”, Lacoste only provides five filters: product type, color, material, design and crocodile. In contrast, for clothing categories “Jackets and coats for men”, they add two other filters - fit and sleeve.

Category-specific filters applied throughout different collections of Lacoste. Source: Lacoste.

Most of the time, users prefer filtering a product list across category-specific attributes. As a result of highlighting the product attribute to the customers, you remind them that each value is important (or in the case of new users, educate them that it is), and therefore encourage them to filter by it. 

Enable Multiple Filter Values of The Same Type

When it comes to filter & site search best practices, customers should be able to apply multiple filtering values possible within a filter option. This function allows shoppers to take full advantage of the filter options. This function allows shoppers to take full advantage of the filter options.

If filter values only allow a sole option, customers will be forced to apply filter value named “A”, look through that filtered list, remember options that are interesting to them, de-select filter value “A”, wait for the unfiltered list to load, and then apply filter value “B”. This process severely obstructs the users’ filtering experience, and also product finding abilities.

Therefore, being able to combine multiple values within the same filtering type plays an important role in the customer’s journey. It shows that shoppers can picture their desired products and then refine using a sophisticated filter system to find them. Shoppers can even use this feature to filter out unwanted product variations by applying all other/opposite filtering values.

Mavi has done a great job with a system of value boxes that customers can easily tick to filter. Source: Mavi.

Make Filters Easy to Use on Mobile Devices

One of product filter & site search best practices is to optimize for mobile devices. By 2021, M-commerce sales are expected to account for 54% of total eCommerce sales. Accordingly, filtered navigation should also work well on mobile devices to enhance your customers’ experiences. Make sure that your filters are easy to understand and easy to click.

For example, on a mobile device, Lacoste makes use of its collapsible filter system for users to refine options swiftly. 

Check your site search statistics, select the mobile devices that your website users use the most, and spend some quality time testing your mobile search experience thoroughly for those devices. A quick tip: you can simply use website browser inspect tools or use an emulator tool to check your sites on different devices.

More best practices for filters in Shopify stores.

About site search best practices

Provide Search-As-You-Type Function

Effective search should subtly guide users in creating and reformulating queries. Use as-you-type suggestions (auto-complete, auto-suggest, and instant results) to save time, iterate on their searches, and get relevant results.

As users type, does your site search give them drop-down or autocomplete suggestions? These techniques help your users find exact search terms plus reducing the time and key-strokes needed to execute a search. Users love it when the tasks they have to perform are made easier.

All types of search suggestions have become invaluable in the customers’ journeys. Auto-complete is suited for known-item search and simple information retrieval tasks. Auto-suggest works well for exploratory search and complex information-seeking tasks. Instant results provide a direct channel from queries to answers.

To understand more about other types of site search, check out All you need to know about Navigation and Site Search. 

Never Return “No Results” 

The final tactic of our search best practices is to avoid 'no results found'. A no-result page is like the dead-end of a site. Never, ever, leave shoppers completely stranded by saying no to them. The least you can do is return suggestions or alternative results - a nice way to promote other products. 

GAP, in this case, has done quite a decent job in dealing with “no-result” pages. There are two primary techniques that GAP has applied to meet searchers’ expectations. First, offering alternate queries as it suggests query simplifications that will lead to results. Second, including contact details to Customer Service so users can get support in finding the products they are looking for.

GAP’s no-result page is on another level, with suggestions and assistance to meet customers’ expectations. Source: GAP.

Bottom Line: Analyze your customer behavior to constantly improve the product filter and site search

Subjectively, you may think well of your site’s product filters and site search and thus ignore optimizing them. This is a common mistake that many brands may take light of. 

To have an effective system of product filter and site search, it takes time to constantly optimize your site. Aside from staying updated with the site search best practices, don't forget to do regular A/B tests on your site. This will help you see the product filtering design and site search functionalities giving shoppers best shopping experience.

Another important task that you should also keep in mind is to conduct deep analysis. You should try analyzing site search analytics to see data-driven insights about your customers' shopping behaviors. 

To learn more about how to utilize critical reports that reveal how customers shop in your stores, check out our Ultimate Guide to Boost’s Analytics Feature.