Last month I led the project to redesign the filters in the Speckle Viewer. This wasn’t just a visual refresh (though it got one). It was a rethink of how filtering should work when you’re dealing with complex, layered 3D data.
The project is also a great example of a broader mindset shift currently happening in the software industry: no more traditional design handoffs. Instead, a constant handshake between designer and developer — roles blending together, with me writing code and developer actively shaping UX decisions alongside me.
Speckle's improved filtering experience. See in hi-res.
Designing for Real Questions
Even before I joined Speckle I knew that the filters in the viewer were very limited.
It allowed users to slice model data, sure. But it didn’t really support the kinds of questions people actually ask when reviewing a model.
The biggest shift was enabling multi-property (or stacked) filtering. Before, filters were mostly isolated. Now, you can combine them and ask precise questions like: show me all two-pane windows on Level 2 with a missing thermal rating.
Giving Users Proper Control
I wanted filters to feel flexible but not intimidating.
Instead of forcing a single rigid interaction pattern, we made filtering adaptive to the type of data you’re working with. The UI adjusts, not the user. This also meant designing for edge cases — you can’t always control what properties or values the model will have (which became the biggest challenge during later stress-testing phases).
Each filter now supports multiple operators. For strings: is, is not, is set, is not set. For numbers: is between, is equal to, is greater than, and more. We also added booleans a bit later after initial release.
Small improvements
A big part of the redesign was removing small, annoying steps.
You can now apply a filter directly from the selection panel. Select an object, click the three dots next to a property, and add it as a filter. No context switching.
You can save filters as a view. You can also temporarily disable filters instead of deleting them — which matters a lot when working with complex queries. Expand what you need. Collapse what you don’t.
You can also sort values alphabetically or prioritize selected ones.
Designer who ships
As I mentioned at the beginning, this project is also a great example of how roles can blend nowadays, especially with AI tooling that speeds things up.
Andrew (an amazing developer on this project) and I worked and committed to the same branch, staying in constant contact about changes, improvements, and fixes. With my knowledge of the Vue framework and Cursor at hand, I could contribute directly to development without becoming a bottleneck.
This quite complex project took approximately three working weeks — one week for design research and two weeks for design, development and testing (sometimes in a rather random order). In my book, that’s really fast.
This definitely deserves a separate update — I’ve already noticed the pros and cons of this and have some thoughts on what an ideal setup might look like (at least for me).