Redesigning Marketplace Cards for Density and Clarity
Hagerty Marketplace
Lead Designer — UI design, design systems, grid systems, responsive design, prototyping, animation
Role & contributions
Design system component built for high-density, product scalability, and versatility across ecosystem
Impact
A core component built to scale with the product
Business problem: Hagerty was redesigning its design system in 2025. Vehicle listing cards are a core component of the Marketplace experience but are also used across Hagerty’s five products, so any update needed to work seamlessly throughout the ecosystem.
User problem: The existing card had information hierarchy and density issues, and was not optimized for mobile (which accounts for a majority of the site’s traffic). As the product scales, the breadth of inventory wasn’t shown clearly for high-intent buyers browsing quickly.
Defining what these cards needed to do
These were the guiding principles in the redesign:
Density without clutter
Clear information hierarchy
Real-time state support
Cross-product flexibility
Design system scalability
Exploration and iteration
Each iteration was pressure-tested against the requirements, with every design decision needing a clear rationale. Early directions surfaced recurring tensions around cards that were too tall, too visually busy, or too heavy on red, ultimately shaping the final solution.
Key questions explored included how to handle the bid/timer container, information order and hierarchy, color density, and whether elements should overlay the image at all.
The solution: a cleaner and denser card
The redesigned card reduces visual noise and improves density by isolating key information, removing unnecessary containers, and keeping the image clean. Every change traced directly back to a defined requirement.
Vehicle card state change animation
Building out the design system variants
The redesigned card needed to work harder across more contexts than the previous version. New size variants were introduced to handle responsive widths, an editorial format for article and media contexts, and a compact list view for mobile to maximize density. A dark mode version was added alongside full variant coverage for all seven auction lifecycle states, resulting in a comprehensive set of variants that give the design system the flexibility to scale across Hagerty's product ecosystem.
Designed to work across the Hagerty ecosystem
With five products under the Hagerty umbrella, the card needed to function beyond Marketplace. Cross-product placement is a key driver of awareness and traffic, so the redesigned card was built to work seamlessly across the broader ecosystem while always pointing users back to Marketplace.
Impact and what's next
The redesigned vehicle card shipped across the Hagerty ecosystem, giving every product a shared, flexible component built to scale seamlessly.
Beyond the card itself, this work laid the groundwork for a more cohesive product foundation: establishing hierarchy principles, design system conventions, and UX patterns that I carried forward into leading a broader overhaul of the Marketplace platform.