Author: James
Date: 2026-04-12
Companion docs: prd.md (capabilities), architecture.md (technical constraints), Kinsley (spatial), Luca (temporal specs post–5.25).
Quorum is a web-first, workspace-scoped product where the primary experience is a team room: a conversational center with a live artifact sidebar—not a dashboard-first PM tool. The human is the conductor; named agents are peers with roles, not a single chatbot with costumes. UX must reinforce methodology-as-product: pipeline progress, save points, transparent reasoning, and human final say (including override with audit).
MVP UX scope: Solo founder path is the default optimization; enterprise trio and admin paths use the same surfaces with RBAC and multi-user presence. Mobile-native is out; responsive tablet is minimum viable; desktop is primary.
Vision capture in V1 — non-negotiable: The full vision capture spine (PRD steps 1, 2a, 2b, 2c)—design-thinking session through organize the vision—is 100% in-scope for V1. It is the methodology entry; UX, Figma prompts, and implementation must never treat it as optional, “phase two,” or a stub. Optional polish (voice, Socratic capture, etc.) extends this spine; it does not substitute for it.
Multi-concept exploration (FR46): After ideation, step 2b presents Generated Concepts—a scrollable series of variations (carousel / horizontal scroll). The user selects a baseline (and may retain alternates); the selected card expands or reveals Refine: natural-language instructions, Breakout window (new tab for Figma Make or equivalent), and carry-back of updates. Organize (2c) and Three-pillar analysis (3) consume the resulting initial designs, concept framing, and core needs from step 1 so collaboration is grounded—not abstract. Quorum stays conductor; external work is exploration.
Open PRD item this spec resolves for build: Default shell = three-region layout (pipeline context + team room + artifacts). Guided vs menu pipeline access: spec recommends guided default with explicit “Explore outputs” entry after first save point (hybrid).
| Principle | User-facing effect |
|---|---|
| Team, not tool | Agents have persistent identity (name, role, avatar, voice). Empty states say “Your team is ready,” not “Start a chat.” |
| Conductor control | User can pause, resume, branch to argue, override; agents never imply irreversible actions without confirmation. |
| Transparent reasoning | Pillar and filter UI surfaces sources, confidence, dissent; “black box” verdicts are unacceptable (PRD premortem). |
| Backbone, not sycophancy | Agents challenge with respectful, specific framing; copy patterns from PRD (“I’d push back in standup”). |
| Staged fidelity | Concept visuals are clearly labeled exploratory; refined and motion states use distinct badges after 5.25 / 5.5. |
| Progressive disclosure | Activation first: organized vision + concept hook early; depth (PRD, journeys) available without feeling like homework. |
| Same truth, many surfaces | Sidebar artifacts reflect one scope state; version chip when user views historical snapshot. |
| Persona | Primary goals | UX imperatives |
|---|---|---|
| Solo founder (Maya) | Fast clarity, emotional “not alone,” pitch-ready outputs | Warm defaults, short aha path, save-point copy |
| Enterprise trio | Alignment, role clarity, workshop rhythm | Presence, permissions, conflict/trade-off panels |
| Workspace admin (Dana) | Boring, fast, auditable settings | Separate Settings area; no agent fluff |
| Implementer (Chris) | Copy/export stories, mark progress | Story detail optimized for reading + export |
| Stuck user | Resume without shame | Checkpoint resume card, recap, “Continue here” CTA |
The atomic experience is a session in a workspace: user and relevant agents collaborate on one pipeline step (or recovery flow) while artifacts stay visible and update live when the step demands it (e.g. filter + concept sync).
Must feel:
┌──────────────────────────────────────────────────────────────────┐
│ App shell: workspace name · step context · user menu · settings │
├────────────┬─────────────────────────────────┬────────────────────┤
│ Pipeline │ Team room (conversation) │ Artifacts │
│ rail │ — agent messages, user input │ — list + preview │
│ (narrow) │ — inline evidence cards │ — pinned doc │
│ │ — job / stream status │ — Figma links │
└────────────┴─────────────────────────────────┴────────────────────┘
| Region | Width (desktop) | Behavior |
|---|---|---|
| Pipeline rail | 240–280px fixed | Always shows the full Quorum methodology (PRD quorumPipeline—see §4.2.1): every step by canonical name, scrollable; step 3 expands to Desirability → Feasibility → Viability while in that phase. Save points + Resume at bottom. Forbidden: vague invented steps (“Filter”, “Conflict resolution”, “Sync”) as substitutes for real pipeline labels. Drawer on small widths. |
| Team room | Fluid (min ~480px) | Primary focus; keyboard-first input; streaming agent tokens with step labels (NFR-P2). |
| Artifacts | 320–400px resizable | Tree or grouped list by type (Vision, Concept, PRD, Journey, Board, …); preview pane optional split. |
Z-order: Modals and command palette overlay all; drawers for rail/artifacts on < 1024px.
The left rail is the map of the actual product. Users must always see the full process from the PRD (visionDiscovery.quorumPipeline)—not a shortened mystery list. If the rail only shows three fake steps (“Organize → Filter → Sync”), the product lies about what Quorum is.
Rules
| Rule | Detail |
|---|---|
| Full spine visible | The rail lists every pipeline step below (scrollable region). Use section group labels in the UI if it helps density (“Vision & concepts”, “Analysis & documents”, “Design depth”, “Plan & narrative”, “Delivery”)—but all steps remain present or one tap to expand; do not hide whole phases behind a single mystery node. |
| Canonical labels | Step titles match the PRD (exact wording or clearly labeled abbreviation + tooltip with full PRD title). Never rename step 3 to “Filter” alone—use Three-pillar analysis (or equivalent PRD string). |
| No invented steps | Do not inject non-PRD top-level items such as “Conflict resolution” or “Sync” as if they were methodology. Agent disagreement = trade-off inside the team room or sub-detail under step 3 / a pillar, not a fake pipeline step. |
| Non-linear OK | User may jump back (PRD allows non-linear pipeline); rail shows completed / current / upcoming / skipped without collapsing the full map. |
| V2 / future | Step 12 and optional items may show “Later” or muted styling—still listed so the methodology is honest. |
Canonical ordered steps (left rail content)
Use these as the source-of-truth list (numbers for engineering keys; display strings should match user-facing PRD language):
| # | Display name (align to PRD) |
|---|---|
| 1 | Describe your idea — design-thinking-style session |
| 2a | Concept alignment (light) |
| 2b | Initial concept visuals — generated concepts (tool-agnostic) |
| 2c | Organize the vision |
| 3 | Three-pillar analysis |
| 4 | PRD generation |
| 5 | Journey maps |
| 5.25 | Design refinement — high-fidelity, tokens & design system |
| 5.5 | Motion & animation design |
| 6 | Roadmap |
| 7 | Cost estimate |
| 8 | Pitch document |
| 9 | Sprint planning |
| 10a | Build (orchestrated via external AI coding tools) |
| 10b | QA testing |
| 10c | Security audit |
| 10d | UAT — user validates against vision |
| 11 | Ship |
| 12 | Feedback loop (V2) |
| 13 | Portfolio document |
While user is in step 3 (Three-pillar analysis):
Under or nested within step 3, show the pillar sub-path (indent or accordion):
States: Not started / In progress / Complete / Needs revisit. Current pillar highlighted; team room + header align to it. Trade-off / conflict UI stays inside this step—not a sibling rail item called “conflict resolution.”
Center column may still use a three-column board (D | F | V); the left rail shows both the full pipeline and the pillar drill-down for step 3.
If the list is long: (A) default scroll with sticky “You are here”; (B) collapsible sections that enumerate steps when expanded (never empty sections); (C) compact mode shows numbers + short labels with tooltip = full PRD title. All options preserve the full methodology, not a different process.
PRD principle: three pillars are sufficient; usability and timing fold into them—extra “pillars” as top-level rails add noise. The UI should teach that on demand, not assume every user is trained in product thinking.
Required affordances
| Affordance | Purpose |
|---|---|
| “Why these three pillars?” | Link or ⓘ adjacent to step 3 (or pillar sub-path) opens education: short, respectful copy (solo + enterprise) explaining why D/F/V together prevent one-dimensional decisions. |
Per-pillar ⓘ or “Learn more” |
1–2 sentences + which roles lean on this pillar (e.g. Desirability: user value & design evidence; Feasibility: engineering & operations; Viability: product & business). |
| First time in filter | Optional dismissible banner: “You’ll move through Desirability, then Feasibility, then Viability—each builds on the last.” |
Copy guardrails: Educational text is optional to read; never blocks progress. Tone: confident, not academic. Align with PRD: human final say, agents challenge with evidence.
| Phase | UI emphasis |
|---|---|
| Planning / filter | Conductor: large input, prominent Decide / Override |
| Build | Board + story detail; agents direct via story copy |
| Feedback | Review surfaces, compare to design/motion intent |
Surface a phase chip in the shell (Planning · Build · Review) once user reaches build.
| Moment | Desired emotion | Design tactic |
|---|---|---|
| First entry | Curiosity, relief | John opens with design-thinking prompts, not empty textarea |
| After organize | “They got me” | Celebration microcopy + visual summary of themes |
| During filter | Tension but fair | Evidence cards, argue back affordance, override never hidden |
| After conflict | Respect | Trade-off briefing layout: two columns + recommendation |
| Stuck / return | Safety | Checkpoint language: “You already earned X” |
| Admin tasks | Competence | Neutral density, no agent banter in billing OAuth |
No pixel-perfect clone; borrow interaction verbs and density targets.
Stack alignment (see architecture.md): Tailwind CSS + React; recommend Radix UI primitives + shadcn/ui-style patterns for accessible components (focus, dialogs, dropdowns).
bg-canvas, bg-elevated, text-primary, text-muted, border-subtle, accent-human, accent-agent, semantic-success/warn/danger.prefers-reduced-motion globally (NFR-A2).Visual reference: ux-color-themes.html.
| Role | Recommendation |
|---|---|
| UI / body | Inter or system-ui stack (fast load); 16px base, 1.5 line height |
| Marketing / pitch exports | May differ in export templates; in-app stays Inter |
| Monospace | JetBrains Mono or ui-monospace for prompts, code in stories, IDs |
Scale: text-sm metadata, text-base chat, text-lg step titles.
| Token | Role |
|---|---|
| Canvas | Main background |
| Elevated | Cards, sidebar |
| Border subtle | Dividers |
| Accent human | Primary CTAs (user commits) |
| Accent agent | Agent message chrome, tool highlights |
| Evidence | Tinted block for sources |
| Warning / override | Amber — decisions with consequences |
Two explored directions (see ux-design-directions.html):
| Direction | Description | Verdict |
|---|---|---|
| A — Calm studio | Softer contrast, generous whitespace, artifact panel feels like desk | Recommended default for solo founders (emotional fit) |
| B — Command center | Higher density, more ops aesthetic | Enterprise alternative theme or density toggle |
Decision: Ship A as default; offer Compact density in settings (not a second brand).
ux-screen-spec-step-2b-generated-concepts.md.ux-screen-spec-step-2c-organize.md.| Component | Purpose |
|---|---|
| AppHeader | Workspace switcher, phase chip, usage meter (FR44), user menu |
| PipelineRail | Full PRD pipeline (scroll/grouped); step 3 expands to D→F→V; save points, resume |
| PillarEducationSheet | “Why three pillars?” + per-pillar blurbs (§4.2.2) |
| ArtifactPanel | Tree, search, pin, preview |
| TeamRoom | Transcript + composer |
| Component | Purpose |
|---|---|
| AgentMessage | Avatar, name, role badge, content, evidence attachments |
| UserMessage | Right-aligned or distinct background |
| StreamingIndicator | Step label + partial text (NFR-P2) |
| EvidenceCard | Source title, link, snippet, confidence |
| TradeOffBrief | Structured conflict summary |
| Component | Purpose |
|---|---|
| GeneratedConceptsCarousel | Step 2b: horizontal scroll / series of concept preview cards. Each card surfaces the full product surface — dashboard, core feature screens, settings, onboarding, empty/error states — not just a landing/hero screen. |
| ConceptRefinePanel | Shown for selected concept: NL iterate field, Breakout window, submit refinement |
| OrganizeContextStrip | Step 2c: compact core needs + baselined concept summary above themes (handoff bundle) |
| SitemapView | Step 2c: full product sitemap — every section mapped with per-section contents (screens, capabilities, data flows) and relationships to adjacent sections. Complements ThemeClusterCard. |
| ThemeClusterCard | Organize step |
| PillarColumn | Filter step. Mode selector at top (Collaborate / Let AI handle it) captures user choice upfront and persists throughout the pillar phase. |
| ReleaseAllocationOutput | Step 3 output: per-pillar rankings, overall combined ranking, and MVP/V2/V3 allocation table with reasoning per allocation. |
| ConceptSyncFrame | Embeds / link + fidelity badge (Concept / Refined) |
| CheckpointCelebration | Save point (non-blocking toast or inline) |
| Component | Purpose |
|---|---|
| ArtifactCard | Type icon, title, updated time, version |
| PRDPreview | In-app HTML iframe/sandbox |
| StoryCard | Board card with blocked reason |
| ExportMenu | HTML, DOCX, Story bundle |
| Component | Purpose |
|---|---|
| JobStatusBar | Queued / running / failed (NFR-P3) |
| Toast | Success, non-blocking errors |
| Modal | Overrides, destructive confirms |
| CommandPalette | Power users: jump step, open artifact |
| Situation | Pattern |
|---|---|
| Cached read | <1s perceived: skeleton for structure only |
| >2s | Determinate progress or streaming text |
| Long jobs | Job row in sidebar or banner with Cancel if allowed |
| Failed job | Retry + Copy error id |
| Breakpoint | Layout |
|---|---|
| ≥ 1280px | Full three-region |
| 1024–1279px | Narrower artifact column; rail icons + labels |
| 768–1023px | Pipeline + Artifacts as tabs or drawers; team room full width |
| < 768 | Usable for review/read; creation flows discouraged with banner “For best experience use tablet+” (MVP acceptable per web-first) |
| Requirement | Implementation |
|---|---|
| WCAG 2.1 AA | Color contrast for default theme; focus visible on all interactive elements |
| Keyboard | Composer focus on “New session”; Esc closes modals; ⌘K palette |
| Screen readers | Live region for streaming summary (not every token); agent messages as articles with labelled-by role |
| Reduced motion | Honor prefers-reduced-motion; Luca specs include non-animated alternative |
| UX area | FRs |
|---|---|
| Team room & agents | FR7–FR12, FR8 |
| Artifacts & navigation | FR9, FR32 |
| Checkpoints | FR13 |
| Ideation → Figma prompt | FR14–FR15 |
| Organize / filter UI | FR19–FR25 |
| PRD / exports | FR26 |
| Board / stories | FR33–FR36 |
| QA / security / ship | FR38–FR41 |
| Admin | FR42–FR45 |
| Performance UX | NFR-P1–P4 |
| A11y / motion | NFR-A1–A2 |
| Full methodology rail + pillars + education | FR7–FR13, FR21–FR25, UX-DR12–UX-DR14 (§4.2.1–§4.2.2) |
| Multi-concept + external tab carry-back | FR46, UX-DR15, UX-DR16 |
| 2b Generated Concepts + 2c handoff bundle | FR14–FR20, UX-DR16 |
| Step 3 mode selection + release allocation | FR21, FR25a |
| Step 13 Portfolio Document | FR47 |
UX-DR12: Full quorumPipeline visible in left rail (canonical names); step 3 nests D→F→V; no invented top-level steps (“Filter”, “Conflict resolution”, “Sync”) as methodology.
UX-DR13: “Why these pillars?” and per-pillar education; optional first-run banner when entering step 3.
UX-DR14: Long rail: scroll, sticky current step, and/or grouped collapsible sections that still enumerate every PRD step when expanded (§4.2.1a).
UX-DR15 (FR46): Step 1 handoff: multiple concept direction cards with Open externally (new tab) and Reconnect / attach result; in-progress state while iterating elsewhere; no data loss when switching windows.
UX-DR16 (FR46, 2b→2c→3): Generated Concepts surface: scroll variations → select baseline → Refine (NL + Breakout window + carry-back). Organize and three-pillar views keep initial designs, concept labels, and core needs visible or one click away so feature collaboration stays tethered to vision.
| To | Deliverable |
|---|---|
| Kinsley | This spec + Figma frames for default theme + component inventory; screen specs ux-screen-spec-step-2b-generated-concepts.md and ux-screen-spec-step-2c-organize.md |
| Luca | Motion brief per screen after 5.25; reference §8.4 defaults |
| Jaymes | Component list §11, tokens in ux-color-themes.html, layout §4.2 |
| Winston / Damien | API/UI boundaries: job status, streaming, RBAC disabled states |
bmad-create-epics-and-stories) with UX acceptance criteria.bmad-check-implementation-readiness.This specification is the UX source of truth until superseded by sharded UX docs or Figma libraries linked from the workspace.