← All projects

Unifying the Search Experience

How I used design and interaction decisions to unify the search experience as part of an end-to-end redesign of a client support tool.

Unified search bar from the redesigned client support tool

Responsibilities

  • Interaction Design
  • Desk Research
  • Visual Design

Timeline & Team

2 weeks, working with a PO and PM for data input

Outcomes

  • Delivered a unified search experience that reduces cognitive load and employs predictable visual and interaction patterns

Company overview

Pharmacy Benefit Manager

Homegrown digital tools for everything from claims processing to member and client support.

Project background

Summary of my work to this point

In my case study Resurrecting PCRx Flow, I shared how I leveraged user research and a UX analysis to make 4 core recommendations to senior leadership to improve PCRx Flow.

Focus

This case focuses on the search bar

One of the 4 core recommendations: transforming the search experience, specifically the main search bar.

The problem: search was fragmented

Search was spread across multiple dedicated pages, each with its own:

A couple of these weren’t even true dedicated pages, but ¾ height modals.

Legacy search pages, each with its own layout, styling and interaction patterns

My recommendation

Combine these search pages into a single, tabbed search page, with layout and interaction patterns common across every type of search.

The concept was simple: one search bar for every type of search, with results displayed in the same place and the same styling.

Design exploration

It was a lot more complicated than I expected

The rationale was tight in my presentation to senior leadership, but once I was approved to flesh it out, I hit some hard questions:

Initial concepts

Early concepts for a unified search bar, each feeling overwhelming like the legacy experience

All of them carried the confusing, overwhelming feeling I was trying to get away from in the legacy experience.

Looking at apps that live or die on search

I studied sites like Airbnb and Carvana, which handle very specific, multi-field searches without overwhelming the user with a page full of fields.

Search experiences from Airbnb and Carvana used as inspiration

I looked at:

My search had to accommodate complex validation rules to meet performance criteria and limit PHI/PII wherever possible.

Airbnb was the closest match

Airbnb search bar grouping several optional fields into what feels like a single bar

Here is one variation from my exploration applying the concept to my search types:

Member search concept applying the grouped search bar pattern

Design system

A reusable search component

As a founding designer, I could add to the design library, as long as my components were reusable and not so custom they’d only work for my app.

Reusable search component designed to fit the design system

Months later, I discovered the pattern had been implemented on another app at the enterprise.

Applying the pattern

Drug and Prescriber Search

The main difference from Member Search was the need to search by sub categories, like NDC, NPI, and GPI. Adding a dropdown was simple enough, but which option should be the default?

Data over assumptions

So I set the order to GPI, then NDC, then Name.

Drug search with a sub category dropdown defaulting to GPI

The goal: let most use cases move forward without ever opening the dropdown.

Applying the pattern

Claims Search

The most complicated search type, and where I questioned whether I could make it work without breaking the search bar pattern.

The legacy experience

Legacy Claims Search accordion of categories expanded to fill the screen

Early ideas felt disjointed

Early ideas for fitting Claims Search into the unified search bar

Eventually I landed on putting the additional fields into a container visually attached to the search bar, without increasing the size of the search bar itself.

Claims Search with additional fields in a container attached to the search bar

Surface the common, hide the rest

A pattern I’d used throughout the redesign: bring the most commonly used fields to the forefront, and tuck the least common behind an expandable section. It made long forms approachable, where before they felt like being lost in an IKEA store.

I requested a Grafana dashboard for Claims Searches from the PO and PM, which showed:

Anonymized Grafana dashboard showing the most commonly used Claims Search fields

Those fields went into the search bar. Everything else moved behind an Advanced Search button, grouped by its legacy categories.

Validation

Guidance vs. errors

The validation logic didn’t change in this redesign, so I focused on presenting the messages in a user-friendly way.

Developer hand-off file annotated with Member Search validation logic
An example of my hand-off file for developers, annotated with validation logic.

Removing an unnecessary hassle

Developer hand-off file annotated with Claims Search validation logic
Another example of my hand-off file for developers, annotated with validation logic.

Prototype

The final experience

Animated prototype of the unified search bar working across the different search types

Outcomes

A unified search experience, shipped behind a feature flag

Through visual and interaction design, I delivered a unified search experience that reduces cognitive load and employs predictable visual and interaction patterns.

*Grafana screenshots in this project have been recreated from scratch and/or anonymized or abstracted to protect confidentiality.