PRODUCT DESIGN | SPRING 2021

IBM Find & Filter

Redesign the search experience in IBM's Edge Application Manager
MY ROLE
  • Product Strategy
  • User Research
  • User Experience
  • Usability Testing
TEAM MEMBERS
  • John Livingston
  • Parisa Lotfi
TOOLS USED
  • Sketch
  • InVision
  • After Effects
TIMELINE
  • 2 months
An illustration of a woman using the the IBM Edge Application Manager dashboard

Background

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:

  1. Used a scrollable dropdown menu within a search bar
  2. Was not a delightful or useful experience, abruptly prompting suggestions without any user input
  3. Did not meet design accessibility standards, and
  4. Did not comply with Carbon, IBM's design system.
Previous Search 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.

User Journey
& Scope

The core user of IEAM is a cloud developer or operations administrator who is monitoring a specific organization's edge nodes using IBM tools.

For this case study, we focused specifically on the find & filter experience below. As the product grows, users will eventually be able to make changes to filtered nodes all within the IEAM dashboard.
A flow chart depicting the project scope, highlighting that this project covers only Step 1 & 2 out of 3.
Constraints:

IEAM has up to three-layers of search parameters (e.g. Properties > Color > Green), a unique challenge when it comes to designing an intuitive search experience for a potentially infinitely long dataset. At the time, there was nothing documented in Carbon to accommodate this three-tier experience.

Market Analysis

To kickstart the design process, we scoped out how other companies approached advanced filtering and multi-variable search:

Airbnb

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

Turo uses a variety of modals to represent different filter categories: including checkbox dropdowns, toggle switches, and numeric sliders.

ZenHub

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.

Key Takeaways

Here are the insights we gained from this market research:

  1. Search is an iterative process. Users are continuously refining their own parameters as they delve into results.
  2. There are multiple convenient entry points to filter results. The most intuitive search models allow for various ways to refine filter categories.
  3. Each filter category is framed in its own concise and digestible way.

Low Fidelity Exploration

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.

EXPLORATION ONE

Multi-select filtering

PROS

  • Clear filter category distinction and selection

CONS

  • Can only show limited number of categories in bar
  • Multi-select tag may be unclear with three-tier filter categories, e.g. filtering across multiple sub-categories
EXPLORATION TWO

Search dropdown

PROS

  • Emphasis on user freedom with typeable search

CONS

  • Unordered list doesn’t accommodate three-tiered categories
  • Too much freedom with user input may break tagging
  • Potential for premature information overload with dropdown appearing on click without any user input 
EXPLORATION THREE

Filter menu sidebar

PROS

  • Similar to other "search" mental models

CONS

  • Menu sidebar takes up too much real estate in table view, leading to a clunky look
  • Does not adhere to progressive overload, too much info shown permanently
  • Sidebar can get too long with potentially infinite filter categories/parameters 

Final Designs

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.

  1. Filter menu bar with flexible modals
  2. Search bar
  3. Display bar with visible tags & AND/OR filtering
FINAL DESIGNS

Filter menu
& modals

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:

  • A combination dropdown box for finite verbal categories, such as Node state and Architecture
  • A numerical sliding scale for quantitative categories, such as Heartbeat and Memory
  • A map-based search for location-based categories
  • A miscellaneous "More filters" button modal for less frequently used filter categories
FINAL DESIGNS

Search bar

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.

FINAL DESIGNS

Display bar

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.

CONCLUSION

Impact

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:

  • Increased user satisfaction (communicated through our offering management team)
  • Decrease in amount of time spent searching, while time in IEAM continues to stay the same (no longer a pain point!)
  • Integration of our Find & filter pattern into IBM's design system, Carbon. Now a scalable solution for products across the company.

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!