Design system pattern
/
/
To solve experience fragmentation across global teams, I designed a Search & Filter design pattern for our design system. This significantly accelerated development velocity while securing baseline accessibility for all high-traffic marketing sites.
Challenge
Product teams across the organisation were building one-off search solutions that lacked visual consistency, accessibility, and optimised logic. This resulted in a fragmented user experience and high maintenance debt.
Goal
My mission was to create a modular, high-performance Search & Filter pattern within the EF Backpack design system. The solution needed to scale while remaining flexible for 23+ global teams.
23+
teams aligned
4,000
live instances
30%
faster shipping
0%
detach rate
Discovery
I audited 10 high-traffic EF websites, uncovering a fragmented landscape of inconsistent search styles and conflicting functional logic.
Establishing a success benchmark. I used the findings to ensure our pattern could scale across varying content densities. Categorising use-cases by ‘shallow’ or ‘deep’, I was able to align with engineering on the interaction rules early in the process. By defining the logic for word matching threshold, metadata conflicts, and the search trigger logic upfront. I moved into the design phase with a pre-vetted blueprint that addressed both user needs and technical constraints.
Design
Solving this, meant defining the interaction rules for Search and Filtering both as independent components and as a combined system. I had to ensure the pattern could scale seamlessly from a minimalist blog search to a high-density product directory while maintaining a predictable user flow and accounting for critical edge cases (Fig.1)
Fig.1 This framework allowed for early alignment with engineering on interaction rules for search triggers, submit logic vs. instant fetching, and word matching result thresholds.
Instant search results. Technical stress tests proved instant results as the user was typing would trigger UI flickering and excessive server costs in low-bandwidth environments. I added a batch filtering solution which would only fetch results when the user clicks ‘Apply’ and reserved the instant search as an option to maintain flexibility. For the search bar I opted for a solution that implemented a 500ms debounce rate, ensuring the system only calls the API once the user stops typing (Fig.2). This trade off meant swapping a few milliseconds of perceived speed for a reduction in server load and a stable experience for all users.
Fig.2 Implementing a 500ms debounce for search queries and establishing "And/Or" boolean logic for filters to ensure results are both accurate and performant.
Accessibility compliance. Standard accessibility libraries, like Radix and React Aria, often struggle with the nuance of focus management in non-modal overlays. To solve this, I created a decision matrix that aligns focus and scroll behaviour with the user’s intent (Fig.3). By baking these complex ARIA behaviours into the master component, I ensured every team could ship a WCAG 2.1 AA compliant experience by default, without needing to be an accessibility expert themselves.
Fig.3 Categorising interactions as contained or supplemental to solve the focus-trap for filter popovers. Maintaining accessibility compliance without sacrificing the user’s ability to reference background content.
Impact
The rollout of the discovery system marked a significant milestone as the first comprehensive interaction pattern to be integrated into our design system beyond individual atoms. This shift from component-level thinking to pattern-level logic ensured that UX best practices, like 'and/or' logic and debouncing, were baked into the system rather than being left to individual interpretation.
Furthermore, the pattern has maintained a 0% detachment rate across 4,000+ instances in Figma. A testament to its inherent flexibility and the success of the 'shallow' vs 'deep' discovery framework in catering to diverse content needs. Further eliminating the need for manual redlining and custom UI story points. Internal syncs with Engineering Leads showed a 30% reduction in development effort, as teams no longer had to troubleshoot responsiveness or interaction states for search-driven features.
23+
teams aligned
4,000
live instances
30%
faster shipping
0%
detach rate