Sorting & filtering system

Kinderkraft is a brand that produces a range of products for babies and children, such as: prams, car seats, cots, furniture, etc. They are known for producing high-quality, safe and functional products that meet the needs of families with small children.

Kinderkraft was established in Poland in 2007 and since then it has become a well-known and respected brand in the parenting and children's industry in over 70 countries.

In this project, I was responsible for proposing a new approach to filters for category listings that would meet the client's requirements (a very large number of filter categories) and that it would be with all UX principles and current trends.

I prepared two versions: horizontal (similar to the current one) and vertical (panel coming out from the right side of the screen).

A well-designed product filtering system is a crucial piece of a successful eCommerce shop. Here are is why:

1. Increases User Engagement: A user-friendly and efficient filtering system can increase user engagement by enabling users to easily find the products they are looking for. This can lead to a better overall shopping experience, higher conversion rates, and repeat business.

2. Saves Time: A well-designed filtering system can save users time and effort by allowing them to quickly and easily narrow down their search results. This can lead to a more efficient shopping experience and reduce frustration, which can also lead to higher conversion rates.

3. Boosts Conversions: A good filtering system helps users find products they are interested in purchasing, which can increase the likelihood of conversions. Users are more likely to buy products if they can easily find them.

4. Improves User Satisfaction: When users can easily find the products they are looking for, they are more likely to be satisfied with the shopping experience. This can lead to positive reviews, repeat business, and increased customer loyalty.

5. Enhances Product Discoverability: A well-designed filtering system can help users discover new products they may not have found otherwise. This can lead to increased sales and can also help businesses identify popular products and trends.

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.

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.