5 layout approaches for the Signal Explorer cards. Same data, same colors, different information architecture. Designs 3 & 4 feature graphical stage indicators with icons designed for visual professionals.
Card split into three distinct horizontal zones — identity, content, and actions — separated by hairlines. Each zone has a single purpose, reducing visual crowding. The header band handles all labeling, the content band is pure substance, and the footer band consolidates metadata and actions into a toolbar.
Gives the summary and Next Step more vertical breathing room. Stage badge and value stay anchored top-right for quick scanning. Mobile: bands stack naturally since they’re full-width blocks.
Dedicated right-hand sidebar panel for status, value, and actions. The content area gets 100% of its width for text without competing with action buttons. The sidebar acts as a “quick-glance” column — like a drawing title block that separates project info from status fields.
Sidebar uses a subtle gradient wash in the stage color. On narrow screens, the sidebar collapses below the content. Actions are full-width buttons for easy tap targets on mobile.
Replaces the thin 3px urgency stripe with a bold 72px beacon column featuring a large circular stage icon with a glow effect. The icon immediately communicates signal stage at a glance — radar waves for Early Signal, document seal for RFP Issued, ticking clock for Due Soon, checkmark for Closed.
The beacon column uses the stage color as a gradient background with a vertical connector line. Visual architects will recognize the iconography instantly. The circle + glow draws the eye to the most important piece of information: where is this opportunity in its lifecycle?
Full-width colored banner at the top of each card that makes the signal stage impossible to miss. The ribbon contains an icon, stage label, and a contextual urgency hint (“~3 months to position” or “14 days remaining”). Category badges include inline icons for visual identification.
The ribbon immediately tells visual scanners what kind of opportunity this is before they even read the title. The urgency hint adds actionable context that the current dot + text badge can’t communicate. Ribbon color sets the tone for the entire card.
Dramatically reduced card height to show 2–3× more signals per screen. Title, stage, and value share the first line. Summary is truncated to one line. Next Step is hidden until the user expands the card. Actions are compact inline buttons.
For power users who want to scan many opportunities quickly and only dive into the ones that matter. The thin accent bar still communicates urgency color. Think of this as “table-row density” in a card format. Ideal for users who know what they’re looking for.
Static mockups — no code changes have been made to the production codebase.
All designs use the production Vendor Radar theme: colors, fonts, and spacing.
← Back to Homepage Mockups