Transactions Filters

We recently launched an update to the Transactions page on Mercury, with an upgrade to filters. I wanted to share some of the thinking and notes behind the work.

Project goals. There was already a filtering interface in place prior to this update, but it was a touch scattered and couldn't be easily added to other pages. With this project, we wanted to redesign filtering on Mercury to be:

• Easier to use - it should be simple to understand, add, remove, and reset filters

• Extensible - we're adding this component to the Cards page right now!

• Avoid making big page structure changes if possible

Research. Through a combination of quantitative queries and interviews, we were able to figure out that most transaction filtering was pretty simple: looking for transactions over a certain value, around a date, or from a particular card. Additionally, usage data on which filters were most commonly used helped us figure out tab priority.

Figma. This project was a great opportunity to play around with Figma's keyboard / gamepad controls in prototypes, to test how keyboard interactions felt, as well as interactive components and variants. With the amount of states covered here, it was incredible helpful to define states for individual filter tab content, then swap it in as necessary for each selected tab. Error states, element focus and hover states were all covered here.

Other notes. My engineering partner Hannah was able to establish a great new table loading pattern as part of this project, which we'll extend to other places in the future. There's some things we didn't ship in this update though:

• I have a habit of exploring beyond scope in my project files; you'll notice that some of the input styles are different than what we ended up shipping (we decided to take a step back and look at inputs holistically).

• We realized after playing with a live version that there's improvements to be made to the keyword search, which are in development now.

Better to ship a good thing and improve it later than to hold up for perfection. 😉 Hope this was interesting, would love to hear your thoughts!

🕹 Play with the Figma prototype

💻 Explore a live demo

👋 By the way, we're hiring senior product designers!