📚Last chance to sign up for our 12 Week Product Design course. Flexible Learning. Live Mentorship. Hiring Connections. Sign up now
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 12 weeks...
Level up your skills with our interactive courses and workshops…
Portfolio creation made easy
Fresh leads in your inbox every day
Build your team’s pipeline or profile
A marketplace of digital assets…
Icons, Illustrations, Patterns, Textures…
Display, Script, Sans Serif, Serif…
Mock Ups, Social Media, Presentations…
Characters, Objects, Textures…
WordPress, Shopify, Bootstrap, HTML5…
Procreate, Affinity, Photoshop, InDesign…
Earn money doing what you love
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
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!