# The Product Management Framework Atlas — Project Plan

## Product intent

The Atlas is an extensible, local-first learning platform for product practitioners. It distinguishes frameworks from methods, canvases, processes, metric systems, principles, and mental models; shows when each is useful; and helps learners move from recognition to applied judgment.

## Architecture

- Static HTML5 with shared CSS and dependency-free JavaScript.
- `data/frameworks.json` is the canonical catalog. Entries use `complete` or `planned` status; only complete entries are presented as lessons.
- `tools/build.mjs` generates independently readable framework pages from reviewed content records.
- `assets/js/app.js` progressively enhances search, filters, bookmarks, progress, theme, comparison, quizzes, calculators, and one-chapter-at-a-time lesson navigation.
- Local storage keys are namespaced with `pm-atlas:` and the site remains usable when storage is unavailable.
- `tools/validate.mjs` checks duplicate slugs, required files, complete-page links, citations, placeholder text, headings, skip links, and case-study labels.

## Design system

The direction is a field notebook crossed with a folding atlas: warm paper (`#f4efe4`), deep ink (`#17211f`), muted graphite (`#5f6863`), and category-specific route colors. Editorial Georgia headings are paired with a compact system sans for navigation and annotations. The signature element is the “decision compass”: a map-like discovery surface that routes a learner from a problem to a framework, rather than presenting a generic card dashboard.

Published lessons are visual-first: each framework has a distinct explanatory model (for example an OKR evidence stack, Scrum learning loop, or heuristic interface scan), followed by a compact input → reasoning → output diagram. The long-form reference is split into focused chapters so the learner sees one topic and one decision at a time; printing still expands the complete reference.

The learning sequence assumes no prior product-management vocabulary. Core concepts are taught as a plain-language term plus a short explanation of the decision it changes. Motion reveals relationships in diagrams and lesson stages once, rather than decorating the interface; reduced-motion preferences remove those transitions. Desktop, iPad landscape, iPad portrait, and narrow-phone layouts each have a deliberate type and layout tier.

Category colors are semantic and always paired with text labels. The layout uses a 12-column field grid on large screens, a readable single column on mobile, visible focus rings, print styles, and reduced-motion fallbacks.

## Catalog and taxonomy

The complete catalog lives in `data/frameworks.json` and currently spans nine practical categories:

1. Discovery & customer understanding
2. Product strategy
3. Prioritization & decisions
4. Roadmapping & planning
5. Execution & delivery
6. Metrics, growth & experimentation
7. UX, behavior & design
8. Market, launch, pricing & lifecycle
9. Leadership, teams & organization

Aliases and overlaps are explicit. Examples: Jobs to Be Done / Jobs Theory; User Story Mapping / Story Mapping; Team Topologies appears in execution and organization but has one canonical entry; Hook Model is classified in behavior with a growth cross-category; BCG Matrix and Growth–Share Matrix share one canonical entry. Planned entries remain visible in the master catalog but are not represented as completed lessons.

## Research and citation strategy

- Prefer original authors, first-party methodology sites, standards bodies, books, papers, and official company publications.
- Each source records title, author, publisher, URL, publication date where known, access date, and claim supported.
- Every published framework is triangulated with at least two sources: the original or official definition first, followed by an independent or complementary implementation source.
- Case studies are labeled `Documented case study`, `Evidence-based reconstruction`, or `Illustrative fictional scenario`.
- Interpretations are written as editorial analysis; invented operational data is labeled illustrative.
- No long quotations or copied diagrams. Visuals are original HTML/CSS/SVG representations.

## Implementation phases

### Phase 1 — foundation (current)

- [x] Taxonomy and extensible catalog schema
- [x] Shared navigation and responsive design system
- [x] Searchable/filterable homepage with bookmarks and progress
- [x] Comparison foundation, glossary, learning paths, cases, sources, and methodology pages
- [x] Ten representative, independently readable framework lessons
- [x] Interactive calculator/exercise/quiz patterns
- [x] Guided four-stage deep dives on every published lesson
- [x] Framework-specific problem workbenches with structured decision results
- [x] Explain-first five-minute primers with framework machines, before/after contrasts, and decision-reveal stories
- [x] Framework-specific visual models and focused chapter navigation on every published lesson
- [x] Aspirant-friendly concept explanations, instructional motion, and dedicated tablet/mobile layouts
- [x] Automated static validation

### Phase 2 — discovery and strategy depth

- [ ] Research and publish 15 discovery lessons
- [ ] Research and publish 15 strategy lessons
- [ ] Add dedicated confusion-pair explainers and category landing pages

### Phase 3 — planning, delivery, and organizational systems

- [ ] Publish roadmapping and planning batch
- [ ] Publish execution and delivery batch
- [ ] Publish leadership and organization batch

### Phase 4 — metrics, UX, market, and lifecycle

- [ ] Publish remaining topic batches
- [ ] Add richer simulations and downloadable SVG/CSV templates
- [ ] Full citation and external-link audit

## Quality checklist

- [x] Semantic landmarks, heading hierarchy, skip links
- [x] Keyboard-accessible controls and visible focus
- [x] Light/dark theme and reduced motion
- [x] Touch-friendly responsive layouts
- [x] Print-friendly framework pages
- [x] Dynamic results announced to assistive technology
- [x] No hotlinked images or decorative emoji icons
- [x] Every completed lesson has sources and a labeled scenario
- [ ] Manual checks in multiple production browsers
- [ ] Screen-reader pass with VoiceOver and NVDA

## Progress tracker

As of 2026-08-19: foundation complete; 10 lessons published; remaining catalog entries planned. Completed lessons: Double Diamond, Jobs to Be Done, Opportunity Solution Tree, RICE, WSJF, OKRs, Scrum, AARRR, Nielsen’s Usability Heuristics, and Value Proposition Canvas.

To continue: add a reviewed content record to `completeFrameworks` in `tools/build.mjs`, change the corresponding catalog status to complete, run `npm run check`, and manually review the generated page at mobile and desktop widths.