Products Map

Now that you've mapped the people, it's time to map the products. The Products Map shows how and where your design system can be integrated and used across your organization's product portfolio.

Copy link

Building Your Products Portfolio Structure

Start with the highest level and work your way down:

Copy link

Portfolio Level

Organization Structure

• Identify all product portfolios in your organization
• Show multiple portfolios as umbrellas when applicable
• For public companies: Use AI to understand how the organization structures product portfolios

Example Structure:

Organization
├── Consumer Products Portfolio
├── Enterprise Products Portfolio
├── Internal Tools Portfolio
└── Platform Services Portfolio

Copy link

Product Level

Within each portfolio, map individual products and their adoption status:

Adoption Categories:

Non-Adopters

• Products not using the design system
• Reasons for non-adoption
• Migration potential
• Priority ranking

Early Adopters

• Products beginning integration
• Percentage of adoption
• Current progress
• Support needs

Strong Adopters

• Products fully integrated
• Success metrics
• Best practices
• Reference implementations

Detractors

• Products that tried but left
• Reasons for departure
• Technical or organizational blockers
• Re-engagement opportunities

Copy link

Platform Coverage Mapping

Capture the complete technical landscape for each product:

Copy link

Platform Identification

Web Platforms

• Website domains
• Web application URLs
• Public vs authenticated experiences
• Subdomain structure

Mobile Platforms

• iOS app IDs in App Store
• Android app IDs in Play Store
• App bundle identifiers
• Platform-specific versions

Other Platforms

• Desktop applications
• Smart TV apps
• Watch apps
• Browser extensions
• Embedded experiences

Copy link

Platform Layer Analysis

Visualize the underlayer of all platforms to identify coverage gaps:

Example Analysis:

This visualization helps you identify patterns like:

• "We're covering web but not mobile"
• "Mobile-first products need different support"
• "Platform parity gaps across products"

Copy link

Integration Points & Technical Connections

Connect your Products Map to actual implementation data:

Copy link

GitHub Integration

Repository Connections

• Link products to GitHub repositories
• Map component usage across repos
• Track version adoption
• Monitor breaking changes impact

GitHub Analytics

• Commits touching design system code
• Pull requests using components
• Issues related to design system
• Contribution patterns

Copy link

Design Tool Integration

Figma Connections

• Link to Figma files
• Track component usage
• Monitor design file health
• Identify design-dev drift

Copy link

Unified Analytics Dashboard

Cross-Platform View

• Combine data from Figma, GitHub, and Infa
• See adoption across all products in one place
• Track implementation consistency
• Measure design system health

Key Metrics:

• Design system component usage per product
• Adoption percentage per page
• Platform coverage percentage
• Version alignment across products

Copy link

Capturing Key Bridges in Products

For each product, identify and highlight your key bridges:

People to Connect:

• Advocates: Champions within the product team
• Partners: Technical leads and designers
• Friends/Colleagues: Informal relationships
• Contributors: Active participants

Why This Matters:

• Highlights where your bridges are
• Shows relationship strength per product
• Helps prioritize support and engagement
• Enables collaborative adoption planning

Keep it Open:

• Share your Products Map with teams
• Let them enrich with their insights
• Collaborate on adoption planning
• Update as relationships evolve

Copy link

Products Map Template

Portfolio: Consumer Products
│
├── Product A (Strong Adopter)
│   ├── Platforms
│   │   ├── Web: example.com (95% adoption)
│   │   ├── iOS: com.company.app (90% adoption)
│   │   └── Android: com.company.app (90% adoption)
│   ├── Technical
│   │   ├── GitHub: org/product-a-web
│   │   ├── Figma: Product A Design System
│   │   └── Analytics: Connected
│   └── Key Bridges
│       ├── Advocate: Jane (Design Lead)
│       ├── Partner: John (Engineering Manager)
│       └── Contributor: Sarah (Frontend Dev)
│
├── Product B (Early Adopter)
│   ├── Platforms
│   │   └── Web: productb.example.com (40% adoption)
│   ├── Technical
│   │   ├── GitHub: org/product-b
│   │   ├── Figma: Product B Designs
│   │   └── Analytics: In progress
│   └── Key Bridges
│       └── Friend: Mike (Product Manager)
│
└── Product C (Non-Adopter)
    ├── Platforms
    │   ├── Web: legacy.example.com
    │   └── Mobile: Legacy codebase
    ├── Technical
    │   ├── GitHub: org/legacy-product
    │   └── Status: Migration planned Q2
    └── Blockers
        └── Legacy technology stack

Copy link

Creating Your Unified View

Combine people and products mapping for complete visibility:

Stakeholder × Product Matrix

• Which stakeholders own which products?
• Where are your strongest relationships?
• Which products lack champions?
• Where to focus adoption efforts?

Example Matrix: