Planning Guide

An integrated strategy management platform that enables organizations to create, align, execute, and track strategic initiatives from conception to delivery, replacing fragmented spreadsheets with a unified source of truth.

Experience Qualities:

Authoritative - Every view, metric, and decision point radiates confidence and clarity, positioning this as the definitive system of record for strategic execution.
Structured yet Flexible - Guided frameworks accelerate strategy creation while adapting to diverse methodologies (Hoshin Kanri, OKRs, Portfolio Management) without rigid constraints.
Traceable - Crystal-clear visibility from enterprise goals down to individual initiatives, with instant drill-down and relationship mapping that eliminates ambiguity.

Complexity Level: Complex Application (advanced functionality, likely with multiple views) This is an enterprise-grade platform requiring multiple interconnected views (Strategy Cards creation, Workbench execution tracking, Portfolio management, KPI dashboards), role-based workflows, real-time data relationships, and sophisticated visualization of strategic hierarchies and dependencies.

Essential Features

Strategy Card Creation

Functionality: Structured strategy formulation using proven frameworks (SWOT, Value Disciplines, Strategic Pillars)
Purpose: Eliminate blank-page paralysis and ensure comprehensive strategic thinking
Trigger: User clicks "Create Strategy Card" or "New Strategic Initiative"
Progression: Select framework → Fill guided sections (Vision, Goals, Assumptions) → Add metrics → Review & Publish → Link to Workbench initiatives
Success criteria: User can create a complete strategy card in under 10 minutes; all critical strategic elements are captured with clear rationale

Initiative Execution Tracking

Functionality: Translate strategic objectives into trackable initiatives with owners, timelines, and KPIs
Purpose: Bridge the gap between strategy and execution with clear accountability
Trigger: User creates initiative from Strategy Card or Workbench portfolio view
Progression: Define initiative → Assign owner → Set timeline & budget → Link strategic goals → Define KPIs → Track status updates
Success criteria: Every initiative clearly traces to strategic goals; real-time status is always current; owners receive clear accountability signals

Portfolio Management & Governance

Functionality: Group initiatives into portfolios (M&A, OpEx, ESG) with capacity planning and impact analysis
Purpose: Enable enterprise-level prioritization and resource allocation decisions
Trigger: User navigates to "Portfolios" and creates/manages portfolio groups
Progression: Create portfolio → Add initiatives → Analyze capacity vs demand → Assess alignment score → Prioritize → Review governance dashboard
Success criteria: Leadership can assess entire strategic portfolio at a glance; capacity conflicts are immediately visible; prioritization decisions are data-informed

Real-Time KPI Dashboard

Functionality: Multi-level scorecards from enterprise to initiative with drill-down capability
Purpose: Provide unified visibility into strategic progress and financial outcomes
Trigger: User accesses Dashboard or clicks metric in any view
Progression: View enterprise scorecard → Select portfolio or initiative → Drill into specific KPI → View trend & targets → Navigate to related initiatives
Success criteria: No ambiguity about performance; financial and operational metrics connected; accessible to all stakeholders

Strategic Roadmap with Hoshin Kanri

Functionality: Comprehensive project planning with objectives, metrics, bowling charts, X-Matrix, and timeline visualization
Purpose: Enable end-to-end strategic planning and execution tracking using proven Hoshin Kanri methodology
Trigger: User navigates to Roadmap tab and accesses sub-views (Projects, Dashboard, Timeline, Objectives, Metrics, Bowling Chart, X-Matrix)
Progression: Create project → Add objectives (breakthrough/annual/improvement) → Define metrics with baseline/current/target → Track progress → View bowling chart → Analyze X-Matrix alignment → Monitor timeline
Success criteria: Complete visibility of strategic execution; objectives linked to measurable metrics; monthly bowling chart shows status at a glance; X-Matrix demonstrates strategic alignment; timeline shows project scheduling and dependencies

Strategy-to-Execution Traceability

Functionality: Visual relationship mapping showing how initiatives link to strategic goals and outcomes
Purpose: Ensure every activity directly supports strategic intent; identify gaps
Trigger: User clicks "View Connections" or "Trace to Strategy" on any initiative
Progression: Select initiative or goal → View relationship map → Identify gaps or misalignments → Create new links or initiatives
Success criteria: Complete line of sight from daily work to enterprise strategy; no orphaned initiatives

Edge Case Handling

Orphaned Initiatives - Display warnings when initiatives lack strategic linkage; suggest potential connections
Capacity Overload - Flag portfolios exceeding resource capacity with visual indicators; recommend rebalancing
Stale Data - Highlight KPIs and initiatives not updated within defined thresholds; send gentle reminders to owners
Conflicting Priorities - Surface initiatives competing for same resources with conflict resolution workflow
Incomplete Strategy Cards - Auto-save drafts; provide completion checklist; allow progressive elaboration
Access Control - Role-based visibility ensuring executives see enterprise view while contributors focus on their initiatives

Design Direction

The design should evoke executive confidence, operational precision, and strategic clarity. This is a tool for serious decisions—it must feel authoritative without being bureaucratic, data-rich without overwhelming, and sophisticated yet accessible. Visual language should suggest enterprise-grade reliability (think Bloomberg Terminal meets modern SaaS), with clear hierarchies, purposeful data density, and confident use of space to signal importance.

Color Selection

Deep Navy & Gold Executive Palette - Conveys authority, strategic thinking, and high-stakes decision-making appropriate for C-suite and strategy offices.

Primary Color: Deep Navy oklch(0.28 0.05 250) - Strategic authority and executive presence; used for primary navigation, key actions, and strategic elements
Secondary Colors:
- Slate oklch(0.42 0.02 250) - Supporting structure for secondary actions and containers
- Cool Gray oklch(0.92 0.01 250) - Subtle backgrounds and dividers maintaining visual hierarchy
Accent Color: Rich Gold oklch(0.72 0.14 85) - Strategic focus and achievement; highlights critical metrics, success states, and high-priority initiatives
Foreground/Background Pairings:
- Primary Navy (oklch(0.28 0.05 250)): White text (oklch(0.99 0 0)) - Ratio 11.2:1 ✓
- Slate (oklch(0.42 0.02 250)): White text (oklch(0.99 0 0)) - Ratio 6.8:1 ✓
- Gold Accent (oklch(0.72 0.14 85)): Deep Navy text (oklch(0.28 0.05 250)) - Ratio 4.9:1 ✓
- Background (oklch(0.98 0.005 250)): Foreground text (oklch(0.25 0.02 250)) - Ratio 13.4:1 ✓

Font Selection

Typography should communicate executive gravitas, analytical precision, and structured thinking—appropriate for strategy documents and financial reporting while remaining highly scannable for dashboard views.

Typographic Hierarchy:
- H1 (Strategic Section Headers): Outfit Bold / 32px / tight (-0.02em) - Commands attention for major sections
- H2 (Portfolio/Card Titles): Outfit SemiBold / 24px / tight (-0.01em) - Clear hierarchical signaling
- H3 (Initiative Titles): Outfit Medium / 18px / normal - Balanced weight for scannability
- Body (Descriptions/Content): Inter Regular / 15px / relaxed (1.6) - Exceptional readability for detailed content
- Data/Metrics: JetBrains Mono Medium / 14px / normal - Precision and clarity for numbers, KPIs, dates
- Captions/Labels: Inter Medium / 13px / wide (0.01em) / uppercase - Clear visual separation for metadata

Animations

Animations should reinforce the sense of authoritative transitions and data relationships, never frivolous. Use purposeful motion to guide attention during navigation between strategy levels (enterprise → portfolio → initiative), smooth drill-downs that maintain spatial context, and subtle highlights when metrics update or thresholds are crossed. Strategic elements should feel weighty—cards and modals transition with slight deceleration suggesting substance and importance.

Component Selection

Components:
- Card - Primary container for Strategy Cards, initiative summaries, and portfolio groups; add subtle shadow and border treatment for depth
- Tabs - Navigation between Strategy Cards and Workbench; styled with underline indicator and bold active state
- Dialog - Full-screen modals for creating/editing Strategy Cards and initiatives with structured forms
- Table - Initiative lists, KPI scorecards, and portfolio views with sortable columns and row hover states
- Badge - Status indicators (On Track, At Risk, Blocked), priority levels, and portfolio tags with semantic colors
- Progress - Visual representation of initiative completion, capacity utilization, and KPI achievement
- Select - Framework selection, owner assignment, portfolio categorization with clear dropdown styling
- Button - Primary actions use solid navy with gold hover accent; secondary actions use outline style
- Separator - Clear visual breaks between strategy sections and dashboard panels
- Avatar - Owner identification with fallback initials
- ScrollArea - Smooth scrolling for long strategy content and initiative lists
Customizations:
- Strategy Card component with collapsible framework sections (Vision, Goals, Metrics, Assumptions)
- Traceability visualization using connected cards or tree view showing goal → initiative relationships
- Portfolio capacity gauge combining Progress with numeric indicators
- KPI scorecard component with trend indicators (up/down arrows) and target comparison
- Initiative timeline component showing milestones and current progress
States:
- Buttons: Navy default → Gold hover → Pressed with slight scale → Disabled with reduced opacity
- Cards: Subtle hover elevation; active state with gold left border; selected state with gold outline
- Table rows: Hover with light slate background; selected with stronger slate background
- Status badges: Green (On Track), Amber (At Risk), Red (Blocked), Gray (Not Started)
Icon Selection:
- Strategy - Use structured grid or layers icon for Strategy Cards
- ChartBar - Workbench and execution tracking
- FolderOpen - Portfolio management
- Target - Goals and KPIs
- Link - Traceability and connections
- Plus - Create new cards/initiatives
- ArrowRight - Drill-down and navigation
- Warning - Risk flags and capacity alerts
- TrendUp/TrendDown - KPI performance indicators
Spacing:
- Page margins: p-8 for generous breathing room around main content
- Card padding: p-6 for substantial internal space
- Section gaps: gap-6 between major sections; gap-4 between related elements
- List items: py-3 for comfortable touch targets and scannability
Mobile:
- Tab navigation converts to bottom sheet selector
- Strategy Cards stack vertically with collapsible sections expanded one at a time
- Tables transform to card-based lists with key data prioritized
- Portfolio dashboard shows one metric card at a time with horizontal swipe
- Create/Edit dialogs use full viewport with simplified forms
- Reduce typographic scale by 10-15% for mobile readability

12 KiB Raw Blame History