UI Interview — Search-To-Pick Sprint
Approved. Proposed UI for the fastest valid first-pick path of Draft Stonk (fantasy football, but for stocks). Final compiled YAML was provided and the canonical UI branch packet has been written to design/ui-search-to-pick-sprint.md. This page renders the complete UI branch packet, an interactive 4-state mockup, and the approval gates that were satisfied.
Interview provenance: live-ui-interviewStage 0 interrogation r1: completeBranch decision: approve
Interview Stage
This is a full UI-mode branch review of one UX variation (search-to-pick-sprint) for one user flow (first-pick-speed). Stage-0 interrogation (round 1) ran to completion with the user: the UI Assumptions Manifest was confirmed and all five open UI decisions were answered. This is not requirements-only mode and not an evidence-synthesis review — provenance is live-ui-interview.
Status: confirmed. Final compiled YAML was provided (assumptions all-hold · decisions reflected · visual approve · coverage complete · destination approve · branch approve · route build-ui-screens) and the canonical files were written. Next step is $build-ui-screens search-to-pick-sprint to build the visual screens on fixture data.
Scope Read
| Area | Resolved value |
|---|---|
| Parent product topic | draft-stonk |
| Parent user-flow branch | first-pick-speed |
| Selected UX variation | search-to-pick-sprint (first pending_ui_interview child) |
| Source UX artifact | design/ux-variations-first-pick-speed.md |
| Route candidate after approval | /experiments/search-to-pick-sprint |
| Prototype boundary | Local/mock fixtures only. No app scaffold, auth, database, brokerage, payment, live market data, or production analytics. |
Source evidence
- E1
design/flow-tree-draft-stonk.yaml— branch position & siblings. - E2 archived UX variation spec
…/search-to-pick-sprint.md— thesis, four states, recovery. - E3
interrogation/ui-interview-r1-search-to-pick-sprint.html+ round-1 answers — confirmed assumptions & decisions. - E4
README.md,concept.md— game framing, quick draft vs bots, equal-dollar standings, local/mock data. - E5
research/positioning.md— messaging guardrails, trust-boundary phrasing. - E6
research/icp.md— finance-curious social players; "I picked better than you." - E7
design/user-flow-draft-stonk.md— chooser & board region notes, data-label decisions. - E8
design/model-tree-draft-stonk.yaml— logical contracts (StartQuickDraft,SearchStockUniverse,MakeStockPick,GetDraftBoardPreview).
Interactive Mockup — 4 States
Concrete enough to judge layout, hierarchy, controls, copy, and trust treatment. This is an ephemeral preview, not production code — no data is saved.
Preview only · tap a state or click inside the flow (type is simulated) ·
State legend: S1 search-first frame → S2 recognizable rows (Available / Taken / Unavailable) → S3 pick-not-trade confirmation → S4 first pick recorded with the board preview (slot 1 filled, bots on the clock, remaining count). Full standings, scoring, and share are intentionally absent.
Confirmed UI Assumptions Manifest
All six were confirmed in interrogation round 1 (no corrections, no flags). Re-confirm they still hold before design proceeds.
| Key | Source | Confirmed assumption |
|---|---|---|
| product-user-context | [spec] | Mobile-first fantasy stock draft game; this branch serves users arriving with a stock/ticker/market take in mind. |
| branch-and-siblings | [spec] | Optimize fastest valid first pick; stay comparable to browse-first, micro-onboarding, challenge-prompt, board-first siblings. |
| pages-and-entry | [spec] | One experiment route, four screen states: search start, results, selected preview, recorded + board. |
| nav-and-hierarchy | [research] | Search + pick confirmation dominate the first viewport; trust/data labels near the action; longer explanation collapsed. |
| components-controls-states | [spec] | Search, rows, availability badges, selected preview, "Make fantasy pick", validation, browse fallback, data label, trust line, board preview; nine+ states. |
| visual-and-stack | [codebase] | No app scaffold; propose mobile-first game-like web on local/mock fixtures; avoid brokerage dashboards / chart dominance / account chrome / marketing structure. |
Do the six confirmed assumptions still hold as the basis for this UI design?
Confirmed Open UI Decisions
| # | Decision | Confirmed answer |
|---|---|---|
| 1 | First viewport priority | One compact game-frame line; search input immediately below in the first viewport. No hero/onboarding/dashboard first. |
| 2 | Trust copy placement | Short trust line near title/search; repeat pick-not-trade inside the selected-stock preview; longer explanation collapsed behind "How it works". |
| 3 | Search result shape | Touch-friendly rows (mobile) / compact rows (desktop); company name first, ticker second, availability badge, subtle local/mock label, no charts. |
| 4 | Board preview timing | Compact board preview immediately after success: slot 1 filled, next bot turn state, remaining draft length. No full standings/share. |
| 5 | Visual tone guardrails | Emphasize draft turns, game picks, recognizable company identity; avoid candlestick charts, buy/sell colors, portfolio terms, cash-prize hype, legal walls. |
Are the five resolved UI decisions correctly reflected in the mockup above?
Proposed Visual Direction
No brand palette exists in the repo (no colors/mascot/logo defined). This is a proposed starting direction — an open decision, not a locked constraint.
- Feel: a fast "draft console" — sports-draft / arcade energy, not a brokerage terminal.
- Company identity without logos: a ticker monogram tile (deterministic muted color + ticker text) stands in for a logo — recognizable, zero external assets, no chart.
- Color: one confident accent (electric indigo/violet) for the primary pick action; teal for the neutral "Available" badge; muted grey + strikethrough for "Taken". No green-up / red-down price semantics.
- Excluded: charts, candlesticks, portfolio/P&L widgets, cash-prize hype, legal-disclaimer wall, persistent global nav.
Approve the proposed visual direction (draft console + monogram tiles + no buy/sell colors)?
Route Map, Pages & Page-By-Page Anatomy
Single route /experiments/search-to-pick-sprint — one continuous surface advancing through four screen states. No global shell: only a wordmark + trust chip; no sidebar, tab bar, marketing header/footer, or account chrome.
S1 — Quick Draft Search Start
Regions: wordmark + trust chip → game-frame headline → supporting line → dominant search input → data label → empty-state helper (2 example chips) → collapsed "How it works". Primary control: search input (desktop autofocus; mobile not autofocused). Copy: headline "Draft a stock like a fantasy pick."; placeholder "Search a company or ticker"; data label "Prototype stock list — local/mock data for gameplay."
S2 — Search Results (same surface)
Results render inline as the user types. Canonical row (defined once, repeated): monogram tile · company name (primary) · ticker (secondary) · availability badge. No price, no chart. Variants: Available (teal, tappable), Taken (muted, strikethrough, disabled), Unavailable (muted, disabled), Data issue (retry). No-results recovery lives in the same region with a preserved term + browse fallback.
S3 — Selected-Stock Preview
Regions: back-to-results → selected company (monogram + name + ticker) → availability → pick-not-trade line → data label → primary "Make fantasy pick" → "Choose another stock". Blocked states replace the primary action with a reason + next action: duplicate/taken, unavailable, data-unavailable, not-your-turn. Copy: "You're making a game pick — not a trade or recommendation."
S4 — First Pick Recorded + Board Preview
Regions: success ("First pick recorded") → draft board preview: order strip with user slot 1 filled, next-turn indicator (bots on the clock), remaining draft length → repeated trust + data label (unobtrusive) → continue. Excluded here: full standings, equal-dollar scoring, share/invite.
Parent flow, siblings & coordination
- Parent flow
first-pick-speed; this is the speed baseline siblings are measured against. - Hands off into
equal-dollar-standingsafter the draft; deliberately stops at the board preview. - "Browse recognizable stocks" is an in-branch escape hatch — it must not fork into the
recognizable-watchlist-browsesibling surface. Share/invite belongs toreplay-share-invite.
Components, Controls & States
Component inventory
Search input (name + ticker) · ticker monogram tile · result row (4 variants) · availability badge · selected-stock preview card · primary game-pick button · validation/blocked message · browse-fallback button · "How it works" disclosure · trust chip + pick-not-trade line · data-posture label · draft-board preview (order strip + turn indicator + remaining count) · success confirmation.
Control behavior
- Search input → results update on change (debounced);
×clears → S1 empty. - Available row → selects
StockChoice→ S3. Taken/unavailable rows → non-interactive with inline reason. - "Make fantasy pick" →
MakeStockPick; disabled variant shows reason + next action. - "Choose another stock" → clears selection, focus returns to search/results.
- "Browse recognizable stocks" → in-branch curated fallback (does not leave the branch).
- "How it works" → inline disclosure, not a route.
- Board continuation → advances after
FirstPickRecorded; bot pick auto/queued/simulated with a short visible state.
Interaction states (canonical)
empty search · loading local/mock list · results shown · no results · row hover/focus/active · selected · duplicate/taken · unavailable · data-unavailable (retry) · validating first pick · success · not-your-turn · bot continuation pending/recorded.
Link inventory
In-branch only. No external, auth, account, or share links. Disclosure and browse-fallback are state switches, not routes.
Responsive & Accessibility
Responsive
- Mobile (default): single column; input/results/preview/action stack; full-width ≥44px rows; board preview below success; "How it works" collapsed; search not autofocused (keyboard would hide the frame).
- Tablet: search/results + preview may sit in two regions; board stays below until success; large touch targets.
- Desktop: centered narrow action column; compact board beside/below after success; input may autofocus. No trading-style table or dashboard expansion.
Accessibility (baseline, not optional)
- Keyboard path: input → arrow-navigable results → row select → "Make fantasy pick" → continue; focus returns to results after "Choose another stock".
- Availability by text + shape (label + strikethrough), not color alone — color-blind safe, consistent with the no-buy/sell-color rule.
- Screen-reader labels: search input labeled; rows announce "company, ticker, availability"; blocked pick announces the reason; success announces "First pick recorded, [company] in slot 1."
- Reduced motion honored on board/bot transitions; contrast meets WCAG AA on the dark console.
Prototype-First & Per-Screen Batch Plan
Prototype-first boundary
- First clickable journey: load → type "app" → select Apple (AAPL) → Make fantasy pick → AAPL in slot 1, bots on the clock.
- Fake/fixture data: small local/mock stock universe (name, ticker, availability); no live data, no prices required.
- Visually mocked, not implemented: bot continuation ("Bots drafting…"), draft-session persistence (local prototype state only).
- Deferred production infra: auth, database, brokerage/market-data, payments, analytics, multi-tenant, share/invite backends.
- Evidence before promoting deferred infra: UAT signal that search-first reaches a recorded first pick fast, reads as a pick not a trade, and the board preview makes continuation feel natural.
Per-screen batch plan (for /build-ui-screens)
- Batch 1 — Search Start (S1): shell strip, trust chip, game frame, search input, data label, empty-state helper, "How it works".
- Batch 2 — Results (S2): canonical row + 4 variants, results list, clear-search, no-results recovery, browse-fallback entry.
- Batch 3 — Selected Preview (S3): selected card, pick-not-trade line, primary pick, blocked variants, "Choose another stock".
- Batch 4 — Recorded + Board (S4): success, order strip with filled slot 1, turn indicator, remaining count, bot-continuation state.
Minimum-UI stop: after Batch 4 the first clickable journey is walkable end-to-end on fixtures.
Open Questions, Risks & Non-Goals
Open questions
- Visual palette / wordmark treatment is proposed, not locked — approve or request an alternative (see Visual gate).
- Ticker monogram tile vs plain-text rows for identity — proposed as monogram; confirm or downgrade to text.
- "Browse recognizable stocks" fallback: full local universe vs short curated set — proposed short curated to preserve speed.
Risks & mitigations
- Empty-search stall → example chips + browse fallback.
- Minimal explanation leaves anxious users unsure it isn't trading → trust chip + pick-not-trade line + "How it works".
- Rows resembling brokerage search break trust → monogram tiles, no prices/charts, game language.
- Weak board preview makes success feel like a dead end → filled slot 1 + bots-on-the-clock + remaining count.
- Buried data label → over-reading data as live → persistent labeled data-posture line.
Non-goals
No standings/equal-dollar scoring; no share/invite; no account/auth; no real market data or prices-as-signal; no brokerage/portfolio/P&L UI; no candlestick charts; no legal-disclaimer wall; no persistent global nav; no sibling browse-variation surface.
Coverage Checkpoint
Pages (4 states) · components (13) · controls (7) · states (13) · responsive (3 breakpoints) · accessibility (keyboard, color-blind, SR labels, reduced motion) · recovery (no-results, taken, unavailable, data-unavailable, not-your-turn). Is anything missing before the canonical spec is written?
Is the page/state/control/responsive/recovery coverage complete?
Artifact Destination & Proposed File Changes
On final approval, the following canonical writes happen (destination and mutation scope are the same path set here, so they are combined):
| Path | Action |
|---|---|
design/ui-search-to-pick-sprint.md | Write UI branch packet (canonical). |
design/ui-search-to-pick-sprint-interview.md | Write interview log. |
design/flow-tree-draft-stonk.yaml | Add ui_experiments[] entry + decisions[] record under search-to-pick-sprint. |
research/_working/preliminary-ui-interview-research.md | Archive to docs/history/archive/…, then remove. |
alignment/ui-interview-search-to-pick-sprint.html | Convert review → confirmed. |
alignment/index.html | Add/refresh index entry. |
Approve these canonical destinations and the mutation scope?
Branch Decision
Record whether this UI direction is a valid branch of the wireframe tree. This is a branch decision, not implementation approval.
Decision for the Search-To-Pick Sprint UI branch:
Post-Approval Route
On an approve decision, the recommended next route is /build-ui-screens search-to-pick-sprint (build the visual screens from this approved packet), later followed by /logic-wiring.
Confirm the post-approval route.
Compile Responses
Answer the gates you can, then compile. Partial responses are fine — they focus the next revision. You do not need to answer every gate to send emphasis, concerns, or clarification requests (use the section feedback controls for those).