I designed a reusable bidding tile component for an auction platform catalogue, enabling users to view lot status and place bids directly from the grid view. The component needed to support multiple auction formats, adapt to various layouts, and communicate complex bidding states while maintaining visual consistency across the platform.The primary goal was to reduce friction in the bidding journey. Rather than forcing users to navigate into individual lot pages to monitor activity or place bids, the catalogue itself could become an actionable workspace where users could quickly manage multiple lots at once.
The tile represented a single lot within the auction catalogue and needed to accommodate nine distinct states:
Each state communicated different information and actions, but all needed to feel part of the same experience. On top of this, every state required both Timed Auction and Live Auction variants, significantly increasing the number of scenarios the component needed to support.
One of the biggest challenges was maintaining consistency across large catalogue grids. The content displayed within each state varied considerably, from simple calls to action such as “Register to Bid” through to interactive bidding controls and status messaging. Despite these differences, every tile needed to maintain identical dimensions and spacing to preserve alignment and visual rhythm across the catalogue.
The solution focused on creating a flexible component system in Figma using variants, component properties, and auto-layout. Rather than designing individual screens, I approached the problem as a scalable design system that could accommodate a wide range of auction scenarios.
Each state was built within a consistent framework, allowing status messaging, bidding controls, and call-to-action elements to change without affecting the overall structure of the tile. This ensured that catalogue layouts remained aligned regardless of which combination of states appeared on screen.
To support the platform's white-label nature, the component also needed to be highly configurable. Different auction houses often had different preferences regarding the information displayed to bidders. Using component properties and variants, key elements such as bid counts, estimate information, lot metadata, and status labels could be shown or hidden depending on client requirements.
For example, some clients preferred not to display the number of bids placed on a lot, while others viewed this as valuable engagement data. By building flexibility directly into the component, these variations could be accommodated without creating separate designs or introducing additional development complexity.
For active bidding states, users could enter bid amounts directly within the tile, because bidding carries real financial consequences, I introduced a confirmation overlay that allowed users to review and confirm their bid before submission. This balanced speed and efficiency with confidence and error prevention.
Each tile also served as a gateway to the detailed lot page, allowing users to move seamlessly between catalogue browsing and more in-depth information such as imagery, descriptions, provenance, and bidding history.
A key requirement was ensuring the component could be reused across multiple areas of the platform. Within Figma, the tile was designed to adapt to both three-column and four-column catalogue layouts while also supporting carousel slideshows, featured lot sections, and smaller promotional placements.
Building flexibility into the component system meant new layouts could be created without redesigning the tile itself, helping maintain consistency across the product while reducing future design and development effort.
The final component created a consistent visual language across the auction software while providing real-time feedback on bidding status. Users could quickly identify whether they were winning or losing, understand the current stage of the auction, and take immediate action without leaving the catalogue.
By bringing bidding functionality directly into the catalogue experience, the design reduced navigation friction and supported users managing multiple lots simultaneously. This was particularly valuable for collectors, dealers, and resellers who often monitor and bid on several items at once.
Beyond solving the immediate user need, the project established a scalable design system component that could be reused throughout the platform, supporting multiple auction formats, client configurations, and future product requirements from a single source of truth.
