Hybrid mockup — Companion + Queue, one system
Two widget modes that share state. Same design language. Companion mode injects mid-article (contextual to what user is reading). Queue mode injects end-of-article (personal "to-read" list). Adding to queue in Companion shows up instantly in Queue. Live mockup — hover states real, tap to interact.
The flow — one user, one session, two widget injections
User opens an article. Mid-scroll hits Companion widget (related to article). Adds 2 items. Reaches end → Queue widget shows their queue + suggestions. Clicks one → lands on next article. Queue persists across the click.
Mode 1: Companion (mid-article injection)
Content derived from host article topic. Header explicitly says "More about: [host headline]". List-style — not a carousel. Each row: thumbnail + source + title + action. One sponsored row mid-list (visually distinct, not deceptive).
Mode 2: Queue (end-of-article injection)
User reaches end of article. Widget shows their queue (items they added in Companion) at top, "Suggested" RSS items below, one big "Trending" featured at the bottom as the strong final pageview push. Sponsored video as a "reward" gate option.
— end of article —
— end of article —
Anatomy — what makes this work
| Element | Why it's there |
|---|---|
| List, not carousel | User sees ALL options at once. No "wait for the right card" anxiety. Click whatever resonates. |
| Header tells the mode | "More about: [topic]" vs "Your queue (2)" — user instantly knows what they're looking at. |
| Per-row action button | "+ Queue" in Companion, "Read →" in Queue. Clear single action per row, no ambiguity. |
| Sponsored as visually distinct row | Yellow tinted background + ▶ Watch CTA. Honest labeling, doesn't pretend to be a story. |
| Reward video gate | Engagement-gated ad. User CHOOSES to watch for value. Premium CPM, no intrusion. |
| Featured "trending" at bottom | Final pageview push when user has gone through everything. Dark gradient = visually different from rows. |
| State persists across pages | Queue stored in localStorage. Companion adds → Queue shows. Cross-page continuity. |
| No auto-advance | User-controlled, no anxiety, no "did I miss something?" feeling. List you can scan in 3 seconds. |
| No sticky required | Companion: relevance is the hook. Queue: cumulative state across pages is the hook. Sticky becomes optional, not load-bearing. |
Ad inventory in this model
| Slot | Format | Pricing model |
|---|---|---|
| Sponsored row in Companion | Native (thumb + title + ▶ Watch CTA) — clearly labeled, can be video creative | CPM, contextually targeted to host article |
| Reward video in Queue | 15s skippable video, "Watch to unlock more" | Premium CPM (completed views) — engagement-gated |
| Featured "trending" slot | Can be branded ("Trending — sponsored by [Brand]") or organic | Flat-fee monthly sponsorship |
| Suggested row in Queue | Native ad inserted as "Suggested" item with "Sponsored" tag | CPC (driven by + Queue or Read clicks) |
| Queue persistence reminder | Re-engagement: "You have 2 items in queue" notification (browser push? optional) | Future v2 — could carry sponsorship |
Note: 4 ad-supported surfaces in one widget, all distinct, all honestly labeled. Compare to today: one native ad spliced into stories[] with no clear marker.
Try it. Click rows. Tell me what to fix.
Hover any row → action highlights. Click "+ Queue" → animates green to "✓ Added". This is the live mockup of the hybrid concept.
Specifically tell me: (1) does this feel different enough from "what we have today"? (2) is the Companion → Queue transition clear from the user POV? (3) are sponsored rows / reward video / featured trending all distinguishable enough? (4) what's still bloated or confusing?