User Guide & Documentation

🚀 Getting Started

Roadmap Planner is a free, privacy-first tool for creating quarterly roadmaps and Gantt charts directly in your browser. No login required, no data stored on servers.

Quick Start Guide

1. Open the app: Visit my.roadmapplanner.app
2. Add a project: Enter project name and priority (1-5)
3. Add subprojects: Break down your project into logical groups
4. Add features: Define specific deliverables with effort estimates
5. View Gantt chart: Click "Show Gantt" to visualize your roadmap
6. Export your work: Click "Export CSV" to save locally

🏗️ Understanding Project Structure

Roadmap Planner uses a 3-level hierarchy to organize your work:

1. Projects (Top Level)

The highest level containers representing major initiatives or product areas.

• Example: "AI Copilot 2026", "Mobile App Redesign", "Backend Infrastructure"
• Properties: Name, Priority (1-5)
• Projects appear as colored bars in the Gantt chart

2. Subprojects (Middle Level)

Logical groupings within a project. Each subproject belongs to exactly one project.

• Example: Within "AI Copilot 2026" → "Backend Architecture", "UI Components", "Training Pipeline"
• Properties: Name, Parent Project, Priority (1-5)
• Helps organize features into workstreams

3. Features (Bottom Level)

Individual deliverable items. Each feature belongs to one subproject (and therefore one project).

• Example: "User Authentication API", "Real-time Collaboration", "Data Export Module"
• Properties: Name, Description, Priority (1-5), Effort (story points), Quarter (Q1-Q4)
• The actual work items that will be tracked and delivered

Project: AI Copilot 2026 (Priority: 1)
  ├─ Subproject: Backend Architecture (Priority: 2)
  │   ├─ Feature: API Gateway v2 (Priority: 1, Effort: 13, Q1)
  │   ├─ Feature: Database Optimization (Priority: 2, Effort: 8, Q1)
  │   └─ Feature: Caching Layer (Priority: 3, Effort: 5, Q2)
  └─ Subproject: UI Components (Priority: 1)
      ├─ Feature: Chat Interface (Priority: 1, Effort: 21, Q1)
      └─ Feature: Code Editor Integration (Priority: 2, Effort: 13, Q2)
        

📅 Time Unit Planning (NEW)

Roadmap Planner now supports flexible time unit planning, allowing you to plan in quarters, months, weeks, or days depending on your project needs.

Available Time Units

How to Switch Time Units

1. Locate the "Time Unit" dropdown in the actions bar (above the table)
2. Select your desired time unit (Quarters, Months, Weeks, or Days)
3. The Gantt chart and delivery columns will automatically update to show the new time scale
4. Existing period assignments are automatically converted (e.g., Q1 → Jan-Mar)

Automatic Period Conversion

When you change time units, the app intelligently converts your existing assignments:

• Q1 (Quarter) → Jan, Feb, Mar (Months) → Weeks 1-13 → Days 1-90
• Q2 → Apr, May, Jun → Weeks 14-26 → Days 91-181
• Q3 → Jul, Aug, Sep → Weeks 27-39 → Days 182-273
• Q4 → Oct, Nov, Dec → Weeks 40-52 → Days 274-365

🎯 Multi-Period Selection (NEW)

Features can now span multiple periods, allowing you to represent work that takes longer than a single quarter, month, or week.

How to Select Multiple Periods

1. When adding or editing a feature, find the "Delivery (Period)" dropdown
2. Hold Ctrl (Windows/Linux) or Cmd (Mac) while clicking
3. Select multiple periods (e.g., Q1, Q2, Q3)
4. The feature will span all selected periods in the Gantt chart

When to Use Multi-Period Selection

• Long-running features: Infrastructure projects, major refactors, multi-phase rollouts
• Continuous work: Ongoing maintenance, support, research activities
• Phased deliveries: Beta (Q1) → Pilot (Q2) → General Availability (Q3)
• Cross-quarter dependencies: Features that block or enable other work over multiple periods

Visual Representation

In the Gantt chart:

• Single period: Shows as a bar within one column (e.g., just Q1)
• Multiple periods: Shows as a continuous bar spanning multiple columns (e.g., Q1-Q2-Q3)
• Color coding: Bar color matches the parent project

Combining with Time Units

Multi-period selection works seamlessly with time unit switching:

• Select Q1-Q2 in Quarters view → automatically becomes Jan-Jun in Months view
• Select Weeks 10-15 in Weeks view → automatically becomes Mar-Apr in Months view
• Conversions preserve the span and relative positioning of your features

🎯 Prioritization System

Roadmap Planner uses an automatic prioritization algorithm to rank features and assign them to quarters.

Priority Scale (1-5)

Lower numbers = higher priority. Each level (project, subproject, feature) has its own priority:

Composite Score Calculation

Features are automatically ranked using this formula:

Effort Weight is calculated as: Math.ceil(effort / 10)

• Lower scores rank higher (scheduled earlier)
• Larger effort = slightly lower ranking (assumes longer tasks should start earlier)
• This creates a balanced distribution across Q1-Q4

Automatic Quarter Assignment

After scoring, features are distributed:

• Top 25% → Q1
• 25-50% → Q2
• 50-75% → Q3
• Bottom 25% → Q4

➕ Adding Projects, Subprojects & Features

Adding a Project

1. Find the "1. New Project" section in the left panel
2. Enter project name (e.g., "Mobile App 2026")
3. Set priority (1-5, default is 3)
4. Click "Add Project" button

Adding a Subproject

1. Find the "2. New Subproject" section
2. Select the parent project from dropdown
3. Enter subproject name (e.g., "Authentication System")
4. Set priority (1-5)
5. Click "Add Subproject" button

Adding a Feature

1. Find the "3. New Feature" section
2. Select project from first dropdown
3. Select subproject from second dropdown (updates based on project)
4. Enter feature name
5. (Optional) Add description for hover tooltip
6. Set priority (1-5)
7. Set effort in story points (e.g., 1, 2, 3, 5, 8, 13, 21)
8. (Optional) Set specific quarter or leave blank for automatic
9. Click "Add Feature" button

📊 Using the Gantt Chart

The Gantt chart provides a visual timeline of your roadmap across Q1-Q4.

Viewing the Gantt Chart

• Mini preview: Visible in the main app below the table
• Full-screen mode: Click "Open Gantt (popup)" button to open in new window

Understanding the Chart

• Rows: Each row represents a project
• Colored bars: Show which quarters have features scheduled
• Bar position: Aligned to Q1, Q2, Q3, Q4 columns
• Bar width: Spans single or multiple quarters if features cross quarters
• Colors: Each project gets a unique color from predefined palette

Gantt Chart Legend

💾 CSV Import & Export

Since Roadmap Planner doesn't store data on servers, CSV export is your primary save mechanism.

Exporting to CSV

1. Click the "Export CSV" button in the app
2. A file named roadmap_export.csv will download
3. This file contains all projects, subprojects, and features
4. Can be opened in Excel, Google Sheets, or any text editor

CSV File Structure

The exported CSV contains these columns:

• Type - "project", "subproject", or "feature"
• ID - Unique identifier (p1, s1, f1, etc.)
• Name - Item name
• Priority - 1-5 value
• ParentID - Links subprojects to projects, features to subprojects
• Effort - Story points (features only)
• Quarter - Q1, Q2, Q3, Q4, or ranges
• Description - Optional description text

Importing from CSV

1. Click the "Import CSV" button
2. Select your previously exported CSV file (or create one following the structure)
3. The app will parse and load all items
4. Warning: Importing replaces all current data. Export first if needed!

Editing CSV in Excel/Sheets

You can bulk-edit your roadmap:

1. Export CSV from the app
2. Open in Excel or Google Sheets
3. Edit priorities, efforts, quarters, add/remove features
4. Save as CSV (not XLSX)
5. Import back into the app

🖱️ Drag & Drop Reordering

You can manually reorder features by dragging rows in the table.

How to Use Drag & Drop

1. Make sure you're in "Features" view mode (default)
2. Click and hold on any feature row
3. Drag the row up or down
4. Release to drop in new position
5. The app will automatically recalculate priorities based on new order

Priority Recalculation

After dropping a row, the app assigns new priorities:

• Top 20% of features → Priority 1
• 20-40% → Priority 2
• 40-60% → Priority 3
• 60-80% → Priority 4
• Bottom 20% → Priority 5

Limitations

• Only works in Features view mode (not in Subprojects or Projects aggregation views)
• Changes are lost on page refresh unless you export CSV
• Drag & drop overrides automatic priority scoring

👁️ View Modes

Switch between 3 different aggregation levels to see your roadmap at different granularities.

1. Features View (Default)

• Shows individual features as separate rows
• Most detailed view
• Enables drag & drop reordering
• Best for day-to-day planning and feature management

2. Subprojects View

• Groups features by subproject
• Shows aggregated effort (sum of all features in subproject)
• Shows averaged score
• Shows quarter span (earliest to latest feature quarter)
• Good for workstream-level planning

3. Projects View

• Groups features by project (top level)
• Shows total effort across entire project
• Shows averaged score
• Shows full quarter span
• Best for executive summaries and high-level roadmaps

Switching Views

Use the view mode selector (usually radio buttons or dropdown) to switch between modes. The table and Gantt chart will update automatically.

💼 Use Cases & Examples

Use Case 1: Startup Annual Planning

Scenario: A SaaS startup needs to plan 2026 product development

1. Create 3 projects: "Core Platform", "Mobile App", "Enterprise Features"
2. Break each into subprojects (e.g., Core Platform → Backend, Frontend, API)
3. Add all feature ideas with rough effort estimates
4. Let automatic prioritization assign quarters
5. Review Gantt chart with team
6. Manually drag high-priority features to Q1
7. Export CSV and share with stakeholders
8. Re-import monthly to track progress and adjust

Use Case 2: Product Manager Quarterly OKRs

Scenario: PM needs to align features with quarterly OKRs

1. Create one project per OKR objective
2. Add subprojects for key results
3. Add features as initiatives supporting each key result
4. Set priorities based on OKR weights
5. Set effort based on team capacity (velocity)
6. View in Projects mode to see OKR-level summary
7. Export for quarterly review presentations

Use Case 3: Dev Team Sprint Planning

Scenario: Engineering team converting backlog to quarterly sprints

1. Import existing backlog from CSV (exported from Jira/Linear)
2. Group tickets into logical subprojects (epics)
3. Assign story point efforts
4. Set priorities based on business value
5. Let automatic quarter assignment distribute work
6. Drag & drop to fine-tune sprint assignments
7. Use Gantt chart in standups to show progress

Use Case 4: Freelancer Client Projects

Scenario: Freelancer managing multiple client deliverables

1. Create one project per client
2. Add subprojects for each engagement/contract
3. Add features as specific deliverables
4. Set effort in estimated hours (convert to points)
5. View Gantt to identify capacity conflicts
6. Export CSV to send timeline to clients