Filter Consistency

Organizational

• —Four engineering teams, each owning a different page — each with a working implementation and legitimate reasons for keeping it
• —No shared component infrastructure — every filter pattern was built in isolation with its own logic
• —Getting alignment required presenting the data before showing any designs

Technical

• —No existing component library to build on — the shared component had to be designed and built from scratch
• —Each page had different filter requirements — the component had to be flexible enough to handle every context without bespoke code
• —Rollout had to happen across four pages simultaneously to avoid a period of partial inconsistency

01

Cost Reports

• —Filters stacked vertically — consumed significant page height before any content appeared
• —No way to collapse or hide filters once applied
• —Applied filters not visible in a summarized state
• —Filter ordering arbitrary, not aligned to task priority

02

Dashboard

• —Filter placement different from Cost Reports — top of page vs. side panel
• —Filters pushed content further down the page as more were applied
• —No visual indication of which filters were active

03

Service Adviser

• —Third distinct filter layout — neither matching Cost Reports nor Dashboard
• —Scrollable filter boxes with small tap targets
• —Filter state reset on navigation, forcing users to re-apply on return

04

Service Manager

• —Most visually inconsistent of the four — different button styling, different positioning
• —Admin and user filter options mixed without clear hierarchy
• —No filter chip summary — users had to expand each section to see what was applied

Collapsible by default

Filters should take up space only when the user needs them. Collapsed state shows applied filters as chips — enough context without occupying the viewport.

Applied state always visible

Even when filters are collapsed, the user can see at a glance what's active. No more "why are my results filtered?" confusion.

One component, every context

A single reusable component with configurable sections — not four bespoke implementations. Engineering builds it once; design controls it through props.

Consistent placement

Same position on every page. Users develop a mental model once and it works everywhere — not just on the page where they learned it.

01 — Sketching

Early sketches focused on two questions: how does the collapsed state communicate what's applied, and how does the expanded state avoid overwhelming users with every option at once? The answer to both was grouping — sections that open independently, with chips persisting in the closed state.

02 — Iterating

With the structural decisions settled, iterations focused on the details that determined usability: chip truncation at different filter counts, the expand/collapse affordance, and how applied state rendered across varying filter combinations.

03 — Validation

I validated the filter placement directly with customers and sales engineers — specifically on the Cost Reports page, the most heavily filtered in the product. Their feedback led to further simplification: all filter sections collapsed into a single line, making the default state as compact as possible.

Collapsed

Expanded