"When a filtering interaction is well designed, the experience feels intuitive and it allows users to feel in control and less overwhelmed."

Challenge

While working on re-designing a complex ERP platform, we were faced with the challenge of creating a mobile optimised multi-level filtering functionality that would preserve the drill-down capabilities available to the users in the web application.

Constraints and variables

Constraints: We had to manage space effectively within mobile limitations, prioritizing discoverability and intuitive usability for various users involved in major workflows.

Variables: Considering the mobile user base primarily comprised field operators, we realized that mobile designs didn't have to mirror web patterns.

This allowed us to introduce a new, efficient mobile pattern without significantly impacting user behavior and perception of the application.

Understanding Users

We initially identified user priorities centered around the highest level filter, which, in this workflow, pertained to the assignment of Wells.

By effectively prioritizing our values, we reduced the need for users to delve into nested levels, thereby saving clicks.

Solution

• We recognized that the most user-friendly UX pattern to employ here was the utilization of expandable high-level filters. This approach conserved screen space while enabling users to access filters with a single click.

• Utilizing overlays for sub-filters proved more effective, allowing for more space to navigate a multi-level view & an overlay ensured users remained immersed in the experience without interruptions.

~Fin~