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 GE Healthcare 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 current basic Search & Filter functionalities.

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

Contributors

The following individuals greatly contributed to the success of this project by sharing their breadth of product knowledge across the GE Healthcare product eco-system, connecting me with key cross-functional collaborators and users, as well as providing continuous design input and feedback.

Adelina Green Senior Product Designer
ShinYoung ChoiView Product Designer
Oseas Moran Software Engineer
Nick Katarow Technical Project Manager
Gordana Lamb Principal UX Architect
Kevin Yuda Creative Director
Jay Christensen Program Management
Chris Janicki Staff UX Visual Designer
Tanya Moran Senior UX Interaction Designer
Kevin Kwan UX Design Leadership
Zoli K Senior UX Designer
Mizue Fujinuma, Ph.D. Staff UX Researcher

Many more individuals across the GE Healthcare product community contributed to the success of this project by participating in multiple research sessions and regular testing, usability, and design feedback sessions.

Special thank you to each individual from the GE Healthcare product community for their input and contributions, without which this project would not have been as successful.

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.

Advanced Search (A Mode of Discovery)

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 (Narrowing the Scope)

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.

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

1. Advanced Search from Masthead (with Short Form Dropdown)

2. Advanced Search from Masthead (with Long Form Dropdown)

3. Advanced Search from Masthead (with Long Form Dropdown, Categories, and Recent Searches)

4. Advanced Search (Search by Category)

5. Advanced Search (Boolean Query)

Advanced Filter

1. One Column Advanced Filter (Top of Content Trigger)

2. Two Column Advanced Filter (Top of Content Trigger)

3. Filter Grouping (In a Modal)

View all the released specs

Next Steps

As product teams incorporate both the Advanced Search and Filter components into their own products, and utilize them in the product design life cycle, feedback will continuously be gathered by the design systems team to reassess how designs can be improved to meet product team needs and use cases.

→ Return Home 

→ Back to Case Studies