Edison Design System

Advanced Search & Filter Components

PRODUCT CHALLENGE

When I joined the team, many of the basic components had already been built and developed for the system.  My challenge was to build upon the current patterns and expand on search and filter to meet the needs of a diverse range of GE Healthcare products.

SOLVING FOR CONSISTENCY

With each product having their own unique use case(s) for search and filter, the component designs needed to meet two needs:

1. Be complex enough to expand the basic search & filter functionalities.

2. Be standardized enough that they apply to various of search & filter scenarios. 

TIMELINE

3 months +

MY ROLE

Work closely with product designers to define individual product goals

Market and product research re: best practices and search & filter patterns

Gather insights and interview product owners

Present and gather feedback from stakeholders

Request and interpret community feedback into MVP designs

UI, UX, and interaction design

Finalizing all visual designs and MVP design system deliverables

RESEARCH GOALS & OVERVIEW

Research encompassed taking a look at best practices and common established patterns across various GE and non-GE products, and forming a guiding logic in regards to what differentiates Advanced Search from Advanced Filter.

DEFINING EACH COMPONENT

In my research, I found both non-GE and GE products labeling Advanced Search and Filter UI interchangeably.

To clearly define an MVP for Search and Filter as two separate components – it was important to clearly distinguish the features of each component.

Advanced Search

In this mode, a user may not necessarily know exactly what they are looking for. Users could benefit from assistance in expanding search parameters = increasing the scope of the search results and the user in turn, finding relevant data. This is a mode of discovery.

KEY WORDS - expand scope, expand keyword search parameters, expand search results

Advanced Filter

Pertains to applying restrictions to narrow down a set of results. In this scenario, users may have a clearer idea of what they are looking for, and are trying to narrow the scope of search results to uncover specific data. 

key words - narrow down scope, limit parameters, decrease search results

Our users are searching first in a mode of discovery, and filtering second when narrowing the scope of their search results.

After a visual audit of common UI Search & Filter patterns in various GE & external (non-GE) products, the following common scenarios for Search & Filter placement, with opportunities to expand the basic features into Advanced features, were identified.

COMPONENT USE CASES & SCENARIOS

1. Advanced Search in the Masthead Navigation

2. Advanced Search from Masthead Navigation by Basic Categories

3. Advanced Search in the Side Navigation

4. Advanced Filter Within a Panel

This could product specific, or a standard e-commerce product grid filtering

5. Advanced Filter in the Heading of a Content Page

i.e. in a Search Results page or product grid filtering

6. Advanced Search & Filter Within a Contextual Menu

i.e. in a Data Grid or Column Tools

REFINING THE FEATURE ROADMAP

To gain further insight and refine our feature roadmap, I spent an additional week and a half conducting one-on-one interviews with individual products owners to identify their key needs in regards to both search and filter

PRODUCT FEATURE CATEGORIES

I focused on dividing search and filter features requested by various product teams into the following categories:

1. Identify product AS IS

   What are the search and filter features and functionalities your product has now that could be expanded upon?

2. Identify product FUTURE

   What are the search and filter features you foresee your product needing?

3. Identify product NICE TO HAVE (CONCEPTUAL ONLY)

What are the features that would improve your product but are not vital to the user experience?

COMMON THEMES IDENTIFIED

Product Scenario

A patient is returning for a visit, and a clinician needs to look up various tests results before the patient arrives

Common Feature Needs

• Complex Search is not primary use case for all – but nice to have

• Applying ‘levels’ of complexities dependent on users expertise

• Mental models – categories to help inform structured search

• Feedback indicators - can the system show me the results of my applied search parameters and filters in real time?

“Nice to Have” Feature Desires

• Putting together a ’teaching’ data set (needing access to various data points and indexed files)

• Files are not properly or inconsistently named, so important to be able to add a variant of attributes to a complex search query

MVP RELEASE

Based on extensive product interviews and feedback, we identified the key features and scenarios needed for our MVP Advanced Search and Filter components.

This MVP release of both components focuses on product AS IS feature requests.

ADVANCED SEARCH

ADVANCED SEARCH FROM MASTHEAD interaction - with SHORT FORM dropdown

ADVANCED SEARCH FROM MASTHEAD - long FORM dropdown

ADVANCED SEARCH FROM MASTHEAD - LONG FORM dropdown WITH CATEGORIES & RECENT SEARCHES

Advanced Search - search by category

Advanced Search - Boolean Queery

ADVANCED FILTER

one column advanced filter - top of content trigger

two column advanced filter - top of content trigger

filter grouping - in a modal

view all the released specs

NEXT STEPS

As products start to incorporate both the Advanced Search and Filter components into their own products, we are gathering feedback and reassessing how designs can be improved to better fit the needs of our GE Healthcare product teams.