IBM's Edge Application Manager (IEAM) is a tool that allows developers to easily manage their edge nodes in a hybrid-cloud computing world.
Search is an integral experience within IEAM and is one of the key building blocks needed for developers to use the product efficiently, whether it be monitoring edge nodes, applying changes to environments, or deploying new policies and patterns.
The previous filtering experience on IEAM:
Ultimately, users need a way to quickly search for groups of edge nodes or clusters with certain parameters, and be able to take action on these filtered groups in an efficient and intuitive way.
To kickstart the design process, we scoped out how other companies approached advanced filtering and multi-variable search:
Airbnb employs a two-pronged filter technique: after an initial search with dates & guests, users have the ability to refine their findings with a filter bar.
Turo uses a variety of modals to represent different filter categories: including checkbox dropdowns, toggle switches, and numeric sliders.
ZenHub classifies cards using color coded tags. While searching, these same tags appear below the filter bar so users can see what categories are selected at all times.
Here are the insights we gained from this market research:
To tackle this design challenge, I explored different ways of representing search with a few rapid, low-fidelity wireframes. I thought about the iterative process of search and how to synthesize an "advanced" experience into something more intuitive.
Filter menu sidebar
Moving forward, we decided to combine elements of each of these explorations for a final output. We'll dive deeper into each new element below.
Because of the potential for an infinite amount of filter categories, sub-categories, and user-defined variables, we had to build a pattern that was scalable. This is reflected in the flexibility of the filter menu modal pattern.
The new filter menu allows users to filter nodes via popular sub-categories. The design allows for variance in filtering category, for example:
The new search bar works in tandem with the filter menu to provide users with various ways to filter their nodes. Through typing, users have the freedom to search via category or for specific nodes by name.
In the display bar, users can now keep track of applied filters as they move through a more advanced search pattern. These tags are aggregated from both the filter menu and search bar and are easily dismissible.
The display bar also employs AND/OR filtering. When two or more filters are applied, users have the ability to sift through different parameters with a "match any/match all" dropdown that appears, furthering their ability for a nuanced search experience across generally large datasets.
Check out the prototype we presented to the Carbon Design System Adoption Guild here.
Conducting A/B testing and a few months after our Find & filter implementation, we've seen:
Due to privacy reasons, please contact me if you're interested in learning more about the final product, or the quantifiable impact this project had!