Product And User Context [from spec]
Draft Stonk is a mobile-first fantasy stock draft game for finance-curious social players. This branch serves users who arrive with a stock, company, ticker, or market take already in mind.
Search-To-Pick Sprint UI Interview
This round confirms the UI assumptions for the first Draft Stonk UI experiment branch before any visual mockup, UI packet, or flow-tree UI experiment entry is written.
Scope Read
The active product is Draft Stonk in flat-mode research/design storage. The selected UX variation is Search-To-Pick Sprint, the first pending UI interview child under branches[id=first-pick-speed] in design/flow-tree-draft-stonk.yaml.
| Area | Resolved Value |
|---|---|
| Parent product topic | draft-stonk |
| Parent user-flow branch | first-pick-speed |
| Selected UX variation | search-to-pick-sprint |
| Source UX artifact | design/ux-variations-first-pick-speed.md |
| Primary route candidate after UI approval | /experiments/search-to-pick-sprint |
| Prototype boundary | Static or bounded HTML mockup first; no app scaffold, auth, database, brokerage, payment, live market data, or production analytics. |
UI Assumptions Manifest
Confirm, correct, or flag each assumption. Corrections seed the next round before the skill moves into visual UI design.
Parent Flow And Sibling Coordination [from spec]
The UI must optimize fastest valid first pick while staying comparable to sibling UX branches: browse-first, micro-onboarding, challenge-prompt, and board-first preview.
Pages, Routes, And Entry Points [from spec]
The first UI proposal should cover one focused experiment route with four screen states: quick draft search start, search results, selected-stock preview, and first-pick recorded with board preview.
Navigation And Information Hierarchy [from research]
Search and first-pick confirmation should dominate the first viewport. Trust copy and data labels must be visible near the action, while longer explanation stays in a compact disclosure.
Components, Controls, And States [from spec]
The branch needs a search input, result rows, availability badges, selected-stock preview, "Make fantasy pick" button, validation messages, browse fallback, data label, trust line, and board preview. Required states include empty search, loading local/mock list, no results, selected, duplicate/taken, unavailable, data unavailable, success, and bot continuation.
Visual Language And Implementation Boundary [from codebase]
There is no active app scaffold. The UI interview should propose a mobile-first, game-like web visual using local/mock fixtures and should avoid brokerage dashboards, stock-chart dominance, account chrome, and landing-page marketing structure.
Draft Shape Preview
This is not the final visual mockup. It shows the likely hierarchy this interview will validate or change.
No money · no prizes · game picks only
Draft a stock like a fantasy pick.
Search a company or ticker to make your first game pick.
Search a company or ticker
Apple AAPLAvailable
Nvidia NVDAAvailable
Prototype stock list: local/mock data for gameplay.
First Pick Preview
AAPL Apple
Make this as a fantasy draft pick, not a trade.
Board Preview
User slot 1: waiting for first pick
Bot continuation appears after your pick is recorded.
Open UI Decisions
1. First Viewport Priority
Agent confidence: mediumShould the first viewport lead with the search field as the dominant control, or should a compact game-frame panel appear above it before the user searches?
Recommended: lead with one compact game-frame line and place the search input immediately below it in the first viewport.
Lead with one compact game-frame line and place the search input immediately below it in the first viewport. Do not add a full hero, onboarding step, or dashboard frame before search.2. Trust Copy Placement
Agent confidence: mediumWhere should the no-money/no-prize/no-brokerage/no-advice boundary appear so it prevents trading confusion without slowing the pick?
Recommended: show a short trust line near the title/search input, repeat pick-not-trade copy inside the selected-stock preview, and keep longer explanation collapsed.
Show a short trust line near the title/search input, repeat pick-not-trade copy inside the selected-stock preview, and keep longer explanation collapsed behind "How it works."3. Search Result Shape
Agent confidence: mediumShould search results be dense rows, larger cards, or a hybrid that changes by screen size?
Recommended: use touch-friendly rows on mobile and compact rows on desktop, with company name first, ticker second, availability badge, and local/mock data label kept subtle.
Use touch-friendly rows on mobile and compact rows on desktop. Show company name first, ticker second, availability badge, and a subtle local/mock data label without stock charts.4. Board Preview Timing
Agent confidence: mediumAfter the first pick is recorded, how much draft board should the UI reveal before the next UI branch takes over?
Recommended: reveal a compact board preview immediately after success with the user's first slot filled, the next bot turn/pick state, and remaining draft length, but do not expose full standings or share controls.
Reveal a compact board preview immediately after success with the user's first slot filled, the next bot turn/pick state, and remaining draft length. Do not expose full standings or share controls in this branch.5. Visual Tone Guardrails
Agent confidence: lowWhat should the visual tone avoid or emphasize so the interface feels like a fantasy game instead of a broker, finance dashboard, or prize contest?
Recommended: emphasize draft turns, game picks, and recognizable company identity; avoid candlestick charts, buy/sell colors, portfolio terms, cash-prize excitement, and legal-disclaimer walls.
Emphasize draft turns, game picks, and recognizable company identity. Avoid candlestick charts, buy/sell colors, portfolio terms, cash-prize excitement, and legal-disclaimer walls.Compile Responses
Answer what you can, then compile and paste the YAML back into Codex. Partial YAML is acceptable if you want the next round to focus on unresolved questions.