Before: Accordion list organized only by specialty
The Problem
The Monroe Surgical Hospital physician directory was a frustrating game of accordion whack-a-mole:
- Organized exclusively by medical specialty
- Assumed users knew which specialty their doctor practiced
- Required manually expanding every accordion to find a specific provider
- No search functionality whatsoever
- Made simple tasks (like "find my doctor") unnecessarily difficult
I discovered this pain firsthand while using the tool to verify data accuracy. Finding a specific provider without knowing their specialty meant clicking through every single accordion until I found them.
After: Dual-mode search with real-time filtering
What I Designed
A dual-mode search system that:
- Lets users toggle between searching by specialty or provider name
- Filters results in real-time as users type
- Preserves the specialty groupings (some users DO search that way)
- Automatically expands matching specialty accordions when searching by name
- Shows providers within their specialty context, even when found by name
- Eliminates the guessing game of which accordion to check
Technical Challenges
Dynamic DOM manipulation at scale
The system needed to evaluate each provider against search criteria in real-time, hide non-matching accordions, and intelligently expand ones containing matches—all while keeping the interaction smooth and performant with a large dataset.
Preserving context while improving search
The specialty groupings existed for good reason—I didn't want to throw away a valid mental model. The challenge was adding name-based search without losing that context. Auto-expanding matching accordions solved this by showing providers within their specialty groups, even when found by name.
How This Came Together
I identified this UX issue proactively while using the directory myself during routine data maintenance. The pain was obvious once I experienced it firsthand—but stakeholders assumed this was how users naturally searched and how medical directories should work.
As both designer and developer on this project, I prototyped the solution independently. The dual-mode approach felt like the obvious answer: specialty groupings served a purpose (don't remove valid functionality), but provider name was a critical search vector the interface completely ignored. My manager reviewed the prototype and loved it, but due to business transitions related to an acquisition, it was deprioritized before reaching final stakeholders.
What I Learned
- Use your own products: The best UX improvements often come from actually experiencing the pain yourself
- Preserve what works: The specialty groupings had value—the solution wasn't to remove them, but to add the missing search mode