When we talk about UI, we almost always start by thinking about small components we can reuse across the frontend. And of course we can't reuse every component. But where exactly does that border of reusability lie — and how do we decide which components are worth reusing and which aren't?
To answer that, I'll first walk you through a problem we ran into on our product, and then show you how we solved it.
The problem: one browsing experience, many pages
On our product we show senders a list of products that can become a gift for a recipient, and they can browse that list with a variety of filters. There are two main types of product list: a plain list of products, and products grouped into collections for a specific occasion.
This list shows up in a lot of places. A sender sees it on the main browsing page; when sending a single gift; when sending a collection of gifts; when automating sends for recurring occasions (birthday, anniversary, and so on); and when building their own collection. That's at least four different pages or modals where the user should get the same product-browsing experience — search and filters included.
