BluePrint Advanced Filtering

A powerful data configuration tool for financial datasets

Context

During the redesign of our product suite, as the lead UX designer, I was responsible for turning a previously frustrating workflow into an intuitive and delightful experience.

Goal-oriented design

The previous interface featured ambiguous actions and hidden validation requirements, and lacked a visual hierarchy. As a result, users abandoned advanced filtering altogether, due to the frustration and effort required to be successful. The new design improved user experience by replacing syntax requirements with a representative visual hierarchy and exposing clear relationships according to logical rules.

Dependency-free hierarchy

The design needed patterns for both “or” and “and” logical rules. Conditions connected by “or” logic will return records that meet any condition. I handled this type of rule at the highest level between containers. Free of dependencies constraining conditions at the highest level, users were free to rearrange groups they built.

Choice-label alignment

I incorporated a logic toggle and corresponding label. Their placement and color promote clarity for the user reading back their choices. The rule toggle and corresponding label enable the user to switch rules easily and know at a glance which rule is applied.

Representative containers

My design incorporated shaded containers to represent hierarchical relationships among filter conditions. Containers correspond to syntax “under the hood” which dictates the order in which the chosen conditions should be applied. This design enables the user to assign complex logic to conditions without needing to do any “heavy lifting” with programming syntax.

Conclusion

As a result of the new UI, we saw greater engagement with advanced filtering from our end users and fewer service desk requests from clients to have our internal team create advanced filters.

Check out my other projects.