Certgon — Digital Certificate Store UI (filtering 28 near-identical SKUs)
Built this store UI for a Brazilian digital certificate provider (ICP-Brasil e-CPF / e-CNPJ).
The real problem wasn't the visual — it was navigation.
28 products that look almost the same, separated only by person type, storage method, and validity period. Dump them in a grid and the user is lost in three seconds.
The decision that mattered: I made filtering the primary structure, not an afterthought.
Three filter axes on the left (Person Type, Storage, Validity) do the heavy lifting, so each card only has to carry what actually differs — badges, price, and one line of scope.
Most people would've packed every spec into the card. I stripped the card down and let the filter carry the logic.
Result: a catalog of 28 near-identical SKUs that stays scannable.
Figma → Framer. No dev handoff.
When you've got a catalog of near-identical products, do you overload the card or lean on filters? Curious how others solve this.
Certgon — Digital Certificate Store UI (filtering 28 near-identical SKUs)
Built this store UI for a Brazilian digital certificate provider (ICP-Brasil e-CPF / e-CNPJ).
The real problem wasn't the visual — it was navigation.
28 products that look almost the same, separated only by person type, storage method, and validity period. Dump them in a grid and the user is lost in three seconds.
The decision that mattered: I made filtering the primary structure, not an afterthought.
Three filter axes on the left (Person Type, Storage, Validity) do the heavy lifting, so each card only has to carry what actually differs — badges, price, and one line of scope.
Most people would've packed every spec into the card. I stripped the card down and let the filter carry the logic.
Result: a catalog of 28 near-identical SKUs that stays scannable.
Figma → Framer. No dev handoff.
When you've got a catalog of near-identical products, do you overload the card or lean on filters? Curious how others solve this.
