What is not performing in present design?

1. Limited Filter Options: The website have limited filtering options, which can make it challenging for users to find the specific products they are looking for.

2. Poor Filtering Functionality: The filtering system does not provide enough information about the number of products that meet the given criteria. The initial filters disappear depending on the products that are displayed in the category listing, not depending on the category itself. This leads to confusion and frustration for the user who has to remove the filters to show the products and filters category again.

3. Confusing Layout: The filtering options are not consistently displayed on all pages, which can cause confusion for users when navigating the site. When the applied filters doesn't show any products, the information about this result is not well visible.

4. Limited Sorting Options: The website does not offer many sorting options for search results, which can make it challenging for users to find the most relevant products. The website only allows users to sort products by price and name, and not by other settings such as newest products or to the discounted once first.

Key functionalities to be implemented in the filtering system.

1. Filter and sorting changes should be separate entries in the user's browsing history: Selecting sorting and filtering should be a separate action in the browser history and should update url. Thanks to this, the user is able to return to his previous filtering options with the "back" button.

2. Numerical values: All numerical values, such as price or dimensions, should be selected using a slider and it should be possible to manually enter a numerical range.

3. Giving appropriate information: The number of products that meet the given filter condition should be given in brackets. When the number of matches for filtering options aren't shown, users won't know the effect of applying the filters.

4. Live update the product list as filters are applied: When selecting a filtering/sorting action, the products should have a simple loading animation (e.g. a pulsating linear gradient), thanks to which the user knows that he is waiting for a new list of products.

5. Display applied filters in an overview: On the desktop, mark active filters with color and display the number of selected filters from a given category. On mobile, show the number of selected filters in a circle and list them under the name of a given filter.

6. Display filter items in an alphabetical order: Filters in a given category should be arranged alphabetically, it helps user in faster finding searched filter options.

7. Add duplicate of chosen filter on top of filter list: If there are a lot of filters in a given category, the selected ones should be duplicated at the top of the list so that the user has quick access to them.

8. Show number of filtered products: Next to the "Apply filtering" button, the number of products that meet all the conditions. Thanks to this, the user knows what to expect from submitting filters.

Horizontal filtering

Thanks to this solution, the user starts scanning the page from the filtering section, where all filter categories are immediately visible. If there are more filtering options, it is recommended to use vertical filtering.

Vertical filtering

Thanks to more space and the possibility of clearer organization of filters into categories and subcategories, the user is able to scan the filters faster. Additionally, we create a coherent module together with the mobile version of the website.

Filtering in the mobile version

Identical mockups were prepared for both versions of mobile filtering. Currently, the website also uses a similar solution, so its introduction would involve minor changes.