8 layout approaches for the Signal Explorer cards. Now includes QuestCDN industry tags on every signal. Designs 3 & 4 feature graphical stage indicators. Designs 6–8 explore action-first, timeline, and editorial layouts.
Card split into three distinct horizontal zones — identity, content, and actions — separated by hairlines. QuestCDN industry tags sit in the pill row alongside signal type and category.
Each zone has a single purpose. Stage badge and value stay anchored top-right. QuestCDN tags provide industry specificity without crowding the title.
Dedicated right-hand sidebar for status, value, and actions. QuestCDN tags appear below the category badge in the content area’s pill row.
Content area gets full width for text. On narrow screens the sidebar collapses below. Industry tags add context without competing with status info.
72px beacon column with a large circular stage icon and glow. QuestCDN tags inline in the pill row. Radar waves for Early Signal, clock for Due Soon, etc.
Visual architects recognize the iconography instantly. Industry tags add procurement classification context alongside the category and location badges.
Full-width colored stage banner with icon and urgency hint. QuestCDN tags appear in the pill row with category icons. Ribbon color sets the tone.
Stage status is impossible to miss. Industry tags help contractors instantly see if the work matches their QuestCDN classifications.
Reduced height for 2–3× density. QuestCDN tags shown as compact chips in the badge row. Summary truncated to one line.
Compact QuestCDN chips use smaller text to maintain density. Power users scan industry codes as fast as category labels.
Flips the information hierarchy. The Next Step guidance dominates the top of the card as a bold hero block. Signal identity collapses into a dense info strip below. QuestCDN tags get their own dedicated row between identity and summary. Built for contractors who want to know what to do, not what happened.
The action hero uses a subtle green wash to draw attention. Identity strip packs type + body + category + value into one dense line. QuestCDN tags sit prominently between the identity and context, letting users confirm industry match before reading further.
Horizontal progress bar runs across the top showing the 4 procurement lifecycle stages. The current stage is a large glowing node; past stages are filled; future stages are empty circles connected by a line. Below the rail, a two-column layout separates content from status. QuestCDN tags display between the summary and next step.
Gives instant visual context about where the opportunity stands in the procurement lifecycle. The rail is a timeline contractors can immediately understand — it answers “how far along is this?” before they read a single word.
Dramatic asymmetric two-panel layout. Left panel is a 200px identity column with the government body name in large display type, the stage icon, and contract value against a subtly textured background. Right panel has all the detail — summary, next step, QuestCDN tags, source links, and actions — in a clean, airy layout. Editorial feel with strong visual hierarchy.
The left panel acts as a “cover page” for each signal. On mobile it collapses into a top banner. QuestCDN tags get a dedicated row in the detail panel where they’re easy to scan without competing for space.
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 All Mockups