Project Overview

As a Product Designer at Brane Enterprises, I set out to create a filter template that was both powerful and easy to use in order to improve the low-code platform's user experience. The intention was to make it easier for users to obtain important data without requiring advanced coding abilities by allowing them to quickly filter through enormous databases.

Problem Statement

Filtering huge datasets was a barrier for users of our low-code technology. The few and unintuitive filtering options that were available frequently required error-prone human input. Our goal was to create a filter template that could handle intricate filtering criteria, was extremely configurable, and was simple to use.

Objective

The main objective was to create and implement an effective and user-friendly product filtering system that would make it easy for customers to identify products that fit their particular needs, improving the shopping experience and raising conversion rates.

Key Points

As a Product Designer, we carefully consider several key aspects to ensure our filter components deliver a seamless user experience. These include:

• Placement of Filter Components: Should filters be positioned in the top bar for quick access, or in a sidebar to allow more space and detailed criteria? The decision is based on balancing visibility and usability.
• Interaction Behavior: What should happen when a user selects a filter element? Should the results update in real-time, or should changes apply only after the user confirms their selections? Understanding user expectations and workflow is crucial here.
• Filter Selection Indicators: How will users know which filters are currently applied? Clear visual indicators such as highlighted buttons, tags, or badges help users keep track of their selections.
• Button Placement: Where should we place action buttons like “Apply,” “Clear,” or “Reset Filters”? These buttons need to be easily accessible and logically positioned to streamline the filtering process.
• Designing Complex Filters: How do we design a complex filter system with numerous criteria without overwhelming the user? This involves creating an intuitive, organized layout that allows users to manage multiple filters efficiently.

Research

We conducted comprehensive research on filter templates from various platforms to gain insights and inspiration for our design. This included analyzing best practices, identifying common user pain points, and exploring innovative solutions. By studying a diverse range of platforms, we were able to gather valuable information on what works well and what can be improved. This research has been instrumental in shaping our approach to creating an intuitive and powerful filtering system for our low-code platform.

Overall Page Layout

Firstly, We needed to carefully arrange several key elements on the page: the search bar, Sort by, Save Filter, and more. We decided to create four templates to explore different layout possibilities: the first with filters on the left side, the second with filters on the top side, the third combining both left and top filters, and the last one featuring a pop-up filter.

1. In the first template, the search bar, sort-by options, and fixed filters are positioned at the top, ensuring they are always easily accessible with minimal cursor movement. This design not only enhances ease of access but also provides flexibility for adding more filters in the future without disrupting the overall layout.