Hello 👋🏻
I’m Yein,
Product designer 👩🏻‍💻

UX/UI/Graphic/Web

Based in Praha 🇨🇿
Made in Korea 🇰🇷


 
Email
LinkedIn
Behance
Resume


Back
Product Design
User research

Filter Panel Redesign



I redesign filter panel to address usability challenges and enhance the user experience for marketers navigating complex data sets. This project aimed to make filtering more intuitive, improve visibility of selected dimensions, and introduce new features like live filtering and customizable panels. Through in-depth user research, iterative prototyping, and actionable feedback, we successfully delivered a streamlined solution that reduced interaction friction and empowered users to access insights more efficiently.



Why Redesign the Filter Panel?


    • Improved Selection Visibility: Make selected dimension items more transparent. We could find out our users confused because they can’t see what they filtered out directly from the page. Introduced  summary panel on page which user can see their selected options when they filter out even they don’t open filter panel
    • Enhanced Usability: Provide a more intuitive and user-friendly filtering system. We had feedback that our user use only limited options of filter panel. We wanted to give customise options for user. We created ‘shortcut’ feature which user can hide/show their filter categories and also can pin their favourite/frequently used categories on top of page.



    • Business Analytics

    Before prototyping, we analysed several data-driven applications to understand logical filter panel designs. Key findings included:
    • Preference for right/top panel filtering systems.
    • The need for a step-by-step process




    Sketches and low fidelity 

    Based on the research insights and defined features, I began by creating Champion and Challenger sketches to explore different design directions. These initial concepts were then translated into low-fidelity prototypes, focusing on core functionalities such as batch filtering, customisable panels, and enhanced visibility of selected dimensions. This approach allowed for iterative testing and refinement, ensuring the designs addressed user needs effectively while aligning with the project goals.
     

    User research



    Our first research failed...
     While users generally liked the new features, their feedback highlighted key areas that needed improvement. Batch filtering, for example, was found to be unnecessary, as users preferred immediate data updates. Design changes were not a priority for them, and they reported no major issues with the current filtering system. 

    However, a critical drawback was that the new designs required twice as many clicks to achieve the same results as the existing filters. Despite these challenges, we recognized that the current system provided a solid foundation, and users' preferences offered valuable guidance for refining our approach.



    Making User Interaction Easier: Fewer Clicks, More Efficiency...
    Our biggest concern was how to reduce the number of clicks required for users to achieve their goals. To address this, we regrouped and focused on combining the strengths of the current filtering system with the new features users appreciated. We prepared updated design proposals that included live filtering, allowing data to react to inputs instantly, and redesigned dimension categories to display items in an accordion format instead of a separate panel. These enhancements, along with other key features, were integrated into the prototypes for further user testing and validation.

    The feedback on the new design proposal was overwhelmingly positive, with users appreciating the updates. Key highlights included the reduction in clicks, which made interactions smoother and faster. While the design required some compromises, such as increased space usage and a slightly messier layout for dimension items, users found this acceptable given the improved functionality. Live filtering, combined with fewer clicks, allowed users to access necessary data more quickly, and the ability to sort dimensions was particularly well-received. In terms of filter panel settings, the pinning feature was a standout, as users often work with 3-4 dimensions actively. However, some users found the arrow for drag-and-drop functionality confusing, indicating an area for further refinement. Overall, the redesign made significant strides in improving usability and efficiency.



    Final Approaches
    Customising Filter panel
    With these new features, users can easily show or hide categories based on their needs, ensuring that only the most relevant options are displayed. For even quicker access, users can pin frequently used categories to the top of the page. This level of customization ensures that the filter panel is always tailored to the user's preferences, making navigation smoother and more efficient.

    Flexibility
    Users can now rearrange dimensions to prioritize what matters most to them and hide the ones they don't need at the moment. This ensures the panel only displays what’s relevant. Additionally, to address the issue of long item names, the new filter panel allows users to adjust the width on desktop for a more personalized and cleaner view, making the entire experience more intuitive and user-friendly.




    Shortcut
    With this feature, users no longer need to open and close sections to filter through options. Instead, their preferred categories stay fixed at the top, allowing them to quickly apply filters directly from the page. This streamlined approach saves time, keeps users focused, and eliminates unnecessary steps, ultimately making the browsing experience faster and more convenient.




    Conclusion
    The redesign significantly improved the usability and functionality of the filter panel, addressing key user pain points. Through iterative research and user collaboration, we delivered an optimized solution with enhanced efficiency and user satisfaction.