Filtering

The problem

When Square acquired Weebly and rebranded their product as Square Online, the two catalog systems stayed separate under the hood, connected by a sync that worked (mostly). The goal was to deprecate Weebly's catalog and move omnichannel sellers fully onto Square's, but, sellers had to actually want to make that move.   Weebly had 14 filters that Square's catalog didn't — filters sellers had built real workflows around. Giving those up would have felt like a step backward.

My role

As the sole designer on this project. I worked across the PM, front- and back-end engineers, the design system team, and designers from teams who'd eventually be contributing their own filters to the interface.

The tricky parts

Square's design system was component-rich but pattern-light. An existing filter pattern covered responsive overflow, but not a large, growing filter set. When I proposed a blade-based approach for a dedicated filtering UI, the design system team pushed back, citing it as an "established pattern." 

So I ran an audit, and only 12% of filter implementations across the product were using it as intended — the rest were improvising their own dedicated filter UIs. Reframing the conversation, I proposed owning the solution: define the pattern, document it, and contribute it back to the system.

The solution

A blade-based filter pattern that gave sellers a dedicated filtering interface — flexible enough to handle a quick single-filter application or a more complex multi-step interaction, and built to scale as teams contributed new filters over time.  The pattern shipped with documentation so teams could understand how it worked and contribute filters independently.

The impact

Sellers that had previously cited lack of filter support as blocking their move from the Weebly Catalog migrated to the Square catalog.   

Three other teams implemented the new filter pattern in the UI they owned. Additionally, four new filters have been contributed to the Item Library without needing design support — a good sign the documentation held up in practice.