Responsive design: Filters

Designing user interfaces for filtering content lists can be quite challenging, particularly when managing numerous parameters. Like date range, content types, and content statuses with keyword search.

The problem

Recently, I’ve been working on a B2B product with three filters. The client requested a mobile version of the website, which wasn’t part of the initial project scope. I faced a challenge — how to handle the filters in mobile view. I needed to quickly find a solution before the developer began working on the design.

On Desktop

On typical desktop and tablet sizes, the list looks like this:

The Mechanics of Filtering

Simple searches can be done by clicking the search box and typing. On standard desktop and tablet screens, the filters are displayed like this, allowing the user to apply multiple filters directly.

The problem with this design is, First we have 3 horizontal filters below the search bar, and Second a source filter alongside the results.

Furthermore, A number of filters can be applied on the results.

When the filter is applied, the selected options appear on the menu like this:

Requirement changed!!

During a meeting, the client requested a mobile version of the website, but we’re short on time. The developer has already worked on this section, and we can’t make changes due to the time constraints.

So as a solution, I had to adapt the filters for small sizes.

The Challenges

I need to ensure the layout adapts smoothly to different screen sizes, while positioning elements to maintain both aesthetic appeal and functionality on smaller screens.

Now we have just these 3 filters, Date, From, Type, Source. However, we have planned to add more filters in the future as the system grows.

What I did

Not enough time! We are short on time and I had to make a quick fix, I sketched 3 solutions.

Final Solution

After a meeting with the developer we decided to move on with this version:

Why this solution

• Easy to implement.
• In the future, we can have more filters.
• This pattern is recognized by users.

Conclusion

In conclusion, designing mobile-friendly filter interfaces presents unique challenges, especially when adapting from a desktop-first approach. By focusing on a quick, functional solution that aligns with user expectations and allows for future scalability, I was able to meet the client’s requirements within the given constraints. Collaboration with the developer ensured that the design was practical and efficient, while the chosen layout provides a familiar user experience, balancing ease of implementation and flexibility for future enhancements.