Skip to main content

Executive Briefing Landing Page Design Direction

Date: 2026-02-17 Author: Claude (Opus 4.6) Status: Active — Supersedes previous 5-tab-within-category approach ADR: ADR-209 (extends D5 Dashboard Type Registration) Track: J.19.11


Design Directive (Verbatim)

"The csuite briefing should be the landing page not just another tab, across the entire dataset for the dashboard elements there should be no duplication of data, and only show, link or make available what is essential or important, the objective is actionable insights that can inform and guide decision making, less is more."


5 Design Principles Extracted

P1: Landing Page First

The executive briefing is THE primary entry point for the dashboard viewer, not a category item within a tab navigation. When a user opens the dashboard, they see the executive briefing immediately.

Impact on architecture:

  • viewer.jsx default route renders executive briefing (not category grid)
  • Category navigation becomes secondary (sidebar or drill-down from briefing)
  • dashboards/executive/ category is promoted to default view
  • J.19.5.4 ("Add executive briefing to viewer.jsx category navigation") is superseded — it IS the navigation

P2: Zero Data Duplication

Each data point has exactly ONE authoritative location in the rendered output. No metric appears in more than one section/card/tab.

Impact on architecture:

  • The briefing component becomes a data router, not a data displayer
  • Metrics shown in the Summary section are NOT repeated in detail tabs
  • Detail sections link back to authoritative source (SQL query, TRACK file, session log)
  • _validate_deduplication() (J.19.10.5) becomes a build-time gate, not optional

Duplication audit findings (from csuite-briefing.jsx analysis):

MetricCurrent OccurrencesAuthoritative LocationAction
Velocity (27x)12Summary hero metricRemove from Accomplishments, Methodology
ACV ($150K-$500K)8GTM ReadinessRemove from Summary, Investment
LTV:CAC (18.7x)8Investment sectionRemove from Summary, GTM
TAM ($3.5B)6GTM ReadinessRemove from Summary
Sprint 1 (19/19)5Summary hero metricRemove from Accomplishments
Traditional cost ($680K)7Investment sectionRemove from Methodology
Task count (410)5Summary hero metricRemove from Accomplishments

P3: Essential/Important Only

Show, link, or make available only what matters for decision-making. Everything else is accessible via drill-down or link but not on the primary view.

Content triage (from duplication audit):

  • Essential (41%): Keep visible — hero metrics, active risks, blocking decisions, sprint health
  • Nice-to-have (46%): Link only — detailed breakdowns accessible via click/expand
  • Reference (24%): Remove from view — available in underlying data files, not rendered

Impact on architecture:

  • Hero section: 5-7 key metrics maximum (velocity, completion %, sprint health, active risks, top blocker, budget burn)
  • Decision cards: Only decisions requiring action (not historical/resolved)
  • Risk matrix: Only active/critical risks (not mitigated/accepted)
  • Accomplishments: Top 3 only, with "see all" link

P4: Actionable Insights

The objective is to inform and guide decision-making. Every element on the page should answer: "What should I do about this?"

Impact on architecture:

  • Each metric card includes recommended action or "on track" status
  • Risk items include mitigation action with owner
  • Decisions include options with trade-offs and recommended choice
  • Sprint analysis includes "adjust" vs "hold course" recommendation
  • No decorative elements, no context-only information without action

P5: Less Is More

Minimalist, focused design. Fewer elements with higher information density. White space is a feature.

Impact on architecture:

  • Remove RadarChart (6-axis visualization adds complexity without actionability)
  • Remove methodology section (process documentation, not decision input)
  • Consolidate Investment section into 3 key numbers (total burn, runway, ROI)
  • Single-screen hero layout — no scrolling needed for executive summary
  • Detail sections via progressive disclosure (expand on click)

Revised Architecture

Before (Current 5-Tab Approach)

viewer.jsx → Category Grid → Executive → csuite-briefing.jsx
├── Tab 1: Summary
├── Tab 2: Accomplishments
├── Tab 3: Decisions
├── Tab 4: Investment
└── Tab 5: Methodology

After (Landing Page Approach)

viewer.jsx → Executive Briefing (DEFAULT)
├── Hero: 5-7 Key Metrics
├── Risks: Active/Critical Only (expandable)
├── Decisions: Pending Only (expandable)
├── Sprint: Current Status + Recommendation
└── [Drill Down] → Category Dashboards
├── Planning (28 dashboards)
├── System (impact register, etc.)
└── Executive (detailed briefing tabs)

Data Flow

SQLite (22 tables) → generate-briefing.py → briefing-data.json (SINGLE SOURCE)

Landing Page renders
each datum ONCE from
briefing-data.json keys

Drill-down links to
category dashboards
(which read their own
data sources)

Impact on Existing J.19 Tasks

TaskCurrent DescriptionImpact
J.19.5.2Register as dashboard type with 5-tab layoutSUPERSEDED — landing page, not 5-tab
J.19.5.4Add to viewer.jsx category navigationSUPERSEDED — IS the default view
J.19.9.5Consolidate redundancy in csuite-briefing.jsxEXPANDED — zero-duplication mandate
J.19.9.7Wire as 6th tab "Trends"SUPERSEDED — no tabs, progressive disclosure
J.19.2.6Extract RadarChart moleculeDEPRIORITIZED — P5 says remove complexity
J.19.7.*Interactive Decision CaptureRETAINED — aligns with P4 actionable insights

New Tasks Required (J.19.11)

  1. Redesign viewer.jsx to render executive briefing as default/home view
  2. Implement zero-duplication data contract — each metric keyed once in JSON
  3. Create hero layout component — 5-7 key metrics, single screen
  4. Implement progressive disclosure — expand-on-click for risks/decisions/sprint
  5. Add drill-down navigation from briefing to category dashboards
  6. Update generate-briefing.py to output deduplicated single-source JSON
  7. Add deduplication validator as build-time gate
  8. Remove/archive: methodology tab, RadarChart, decorative elements
  9. Validate landing page renders correctly with ProjectSwitcher (J.18.4)
  10. Update ADR-209 with D12: Landing Page First architecture decision

Verification Criteria

  1. Landing Page Default: Opening viewer.jsx shows executive briefing immediately
  2. Zero Duplication: _validate_deduplication() passes — no metric appears in >1 section
  3. Essential Only: Page renders entirely above the fold on 1080p display
  4. Actionable: Every visible element has an associated action or "on track" status
  5. Less Is More: Total rendered data points < 30 (down from ~256)

References

  • ADR-209: Executive Briefing Generator Integration
  • Duplication Audit: Performed on csuite-briefing.jsx (1,977 lines, ~256 data points)
  • McKinley Feedback: sql-llm-dashboard-feasibility-mckinley-feedback-2026-02-17.md
  • Architectural Review: architectural-direction-review-2026-02-17.md