08.04.Product Roadmap Next Steps

08.04. Product Roadmap Next Steps

Car Pulse Tracker

Created: 2026-02-06

🎯 Strategic Goal

Transition from Tesla-only to multi-brand EV reporting platform

Current state: UI heavily focused on Tesla Target state: Multi-brand platform with Tesla as first supported manufacturer

📋 Required Changes

1. Multi-Brand UI Updates 🚗

1.1 Landing Page - Supported Manufacturers Section

Goal: Show we're a multi-brand platform, not just Tesla

Requirements: - Add "Supported Manufacturers" section on landing page - Display car brand logos in a grid/carousel - Visual distinction between: - ✅ Currently Supported (Tesla) - Full color, active state - ⏳ Coming Soon (Others) - Grayscale/muted, "Coming Soon" badge

Brands to Include: - ✅ Tesla (ACTIVE) - ⏳ Volkswagen (VW ID series) - ⏳ BMW (iX, i4, i5) - ⏳ Mercedes (EQS, EQE, EQC) - ⏳ Audi (e-tron, Q4 e-tron) - ⏳ Porsche (Taycan) - ⏳ Nissan (Leaf, Ariya) - ⏳ Hyundai (Ioniq) - ⏳ Kia (EV6, EV9) - ⏳ Polestar - ⏳ Ford (Mustang Mach-E, F-150 Lightning) - ⏳ Rivian

Design Considerations: - Logos should be high quality (SVG preferred) - Responsive grid layout (3-4 columns desktop, 2 mobile) - Hover effects showing "Available Now" vs "Coming Soon" - Optional: Timeline showing when brands will be added

Technical Tasks: - Collect/create SVG logos for all brands - Create SupportedBrands.vue component - Add grayscale filter CSS for inactive brands - Add translation keys for brand status (en/fi/sv)

2. Landing Page Refactor 🎨

2.1 "How It Works" Section

Goal: Explain the service process clearly and visually

Content Structure:

How Car Pulse Tracker Works
============================

Step 1: Choose Your Plan
- Select report type (Basic/Pro/Bulk)
- Clear pricing, no subscriptions

Step 2: Secure Payment
- Multiple payment options (Stripe, PayPal, etc.)
- SSL encrypted, secure checkout

Step 3: Connect Your Car
- One-time OAuth authorization
- You control what data to share
- Token discarded after generation

Step 4: Generate Report
- Automated data collection
- Battery health analysis
- Service history compilation
- Charging statistics

Step 5: Download PDF Report
- Professional PDF document
- Ready for used car sales
- Perfect for documentation

Visual Design: - Step-by-step numbered process (1 → 2 → 3 → 4 → 5) - Icons for each step - Progress indicator/timeline visual - Mobile-friendly responsive design

Technical Tasks: - Create HowItWorks.vue component - Add step icons (payment, car, report, download) - Add animation on scroll (optional) - Translation keys for all content (en/fi/sv)

2.2 Landing Page Layout Reorganization

Current sections: - Hero - (Missing: How It Works) - (Missing: Supported Brands) - (Missing: Example Report Preview) - Get Started button

Proposed new layout:

1. Hero Section
   - Main headline
   - Tagline
   - Primary CTA: "Get Started"

2. Supported Brands Section
   - "Currently Supporting Tesla, More Coming Soon"
   - Brand logo grid

3. How It Works Section
   - 5-step process visualization
   - Clear, simple explanation

4. Example Report Preview
   - Screenshot/mockup of sample report
   - "See What You Get" preview
   - CTA: "View Sample Report"

5. Pricing Section (existing PaymentStep simplified)
   - Basic/Pro/Bulk cards
   - Clear pricing

6. Final CTA
   - "Generate Your Report Today"
   - Get Started button

3. Marketing Materials 📹

3.1 Demo Video - "How to Use Car Pulse Tracker"

Goal: Show potential customers how easy the service is

Video Content (60-90 seconds): 1. Landing page → Choose plan (5s) 2. Payment process (5s) 3. Tesla OAuth connection (10s) 4. Data being collected (5s - animated loader) 5. Report generated (5s) 6. PDF download and preview (10s) 7. Show PDF content highlights (20s) 8. End screen with CTA

Video Style: - Screen recording with voiceover - Animated overlays/callouts - Professional but approachable - Subtitles for accessibility

Tools Recommended:

Option 1: Loom (Easiest) - ✅ Free tier available - ✅ Screen + camera recording - ✅ Built-in editing - ✅ Easy sharing - 🔗 https://www.loom.com

Option 2: OBS Studio + DaVinci Resolve (Professional) - ✅ Free and open source - ✅ Professional quality - ⚠️ Steeper learning curve - 🔗 https://obsproject.com - 🔗 https://www.blackmagicdesign.com/products/davinciresolve

Option 3: ScreenFlow (Mac only, paid) - ✅ Screen recording + editing in one - ✅ Professional quality - ⚠️ $169 one-time - 🔗 https://www.telestream.net/screenflow/

Option 4: Camtasia (Cross-platform, paid) - ✅ All-in-one solution - ✅ Easy to use - ⚠️ $299.99 one-time - 🔗 https://www.techsmith.com/video-editor.html

Recommendation: Start with Loom for quick demo, upgrade to OBS+DaVinci if you need more control.

Hosting: - Upload to YouTube (unlisted or public) - Embed on landing page - Share on social media

3.2 Example PDF Report (Sample/Mockup)

Goal: Show potential customers what they'll receive

What to Include in Example Report:

Cover Page: - Car Pulse Tracker branding - Vehicle image (Tesla Model 3 example) - Report type: "Professional Vehicle Report" - Date generated - VIN: T*****1234 (partially redacted for privacy)

Page 2: Vehicle Information - Make: Tesla - Model: Model 3 Long Range - Year: 2021 - VIN: 5YJ*****234 - Mileage: 45,000 km - Software Version: 2024.38.4

Page 3: Battery Health - Battery Capacity: 82 kWh (nominal) - Current Capacity: 78.5 kWh (95.7% health) - Degradation: 4.3% (excellent for age) - Chart: Battery degradation over time - Estimated remaining range: 480 km

Page 4: Service History - Last Service: 2024-11-15 - Service Type: Annual inspection - Next Service Due: 2025-11-15 - No active service alerts - Software updates: Up to date

Page 5: Charging Statistics - Total charging sessions: 342 - Supercharger usage: 23% - Home charging: 77% - Average charge level: 65% - Chart: Charging frequency over time

Page 6: Recent Alerts - No critical alerts - Tire pressure checked: 2026-01-15 - All systems nominal

Back Page: - Report generated by Car Pulse Tracker - Data sources disclaimer - Contact information - Website URL

Creation Options:

Option 1: Design in Figma/Canva (Recommended) - Create mockup design - Export as PDF - ✅ Professional looking - ✅ Easy to iterate - 🔗 https://www.figma.com - 🔗 https://www.canva.com

Option 2: Use Actual Report Generator (When ready) - Generate report with mockup data - Use Tesla mockup data service - Real implementation preview

Option 3: InDesign/Affinity Publisher (Professional) - Professional layout software - ✅ Publication quality - ⚠️ Paid software - ⚠️ Learning curve

Recommendation: Use Figma (free for individuals) to create initial mockup, then replace with real generated PDFs when ready.

Usage: - Add "View Sample Report" link on landing page - Download link for potential customers - Show in demo video - Use in sales/marketing materials

📊 Linear PM Issues Breakdown

Epic: Multi-Brand Platform Transition

Issue #1: UI - Add Supported Brands Section

Title: Add "Supported Manufacturers" section to landing page Type: Feature Priority: High Estimate: 3 story points

Description: Create a new section on the landing page showing all EV manufacturers, with Tesla as "Currently Supported" and others as "Coming Soon".

Acceptance Criteria: - [ ] Component created: SupportedBrands.vue - [ ] All 12 brand logos collected (SVG format) - [ ] Active/inactive states implemented - [ ] Responsive grid layout (3-4 columns desktop, 2 mobile) - [ ] Hover effects show status - [ ] Translation keys added (en/fi/sv) - [ ] Integrated into landing page

Technical Tasks: - Collect/create brand logos - Create component with grid layout - Add CSS filters for grayscale - Add hover animations - Add translations

Issue #2: UI - Landing Page "How It Works" Section

Title: Add "How It Works" section to landing page Type: Feature Priority: High Estimate: 5 story points

Description: Create a comprehensive "How It Works" section explaining the 5-step process from plan selection to PDF download.

Acceptance Criteria: - [ ] Component created: HowItWorks.vue - [ ] 5 steps designed and implemented - [ ] Step icons added - [ ] Visual flow/timeline indicator - [ ] Mobile responsive - [ ] Translation keys added (en/fi/sv) - [ ] Scroll animations (optional) - [ ] Integrated into landing page

Technical Tasks: - Design step-by-step flow - Find/create icons for each step - Implement component - Add scroll animations - Add translations

Issue #3: UI - Landing Page Refactor

Title: Reorganize landing page layout with new sections Type: Improvement Priority: Medium Estimate: 3 story points

Description: Reorganize the landing page to include: Hero → Supported Brands → How It Works → Example Report → Pricing → Final CTA

Acceptance Criteria: - [ ] New layout implemented - [ ] All sections properly ordered - [ ] Smooth scrolling between sections - [ ] Mobile responsive - [ ] Performance optimized

Dependencies: - Issue #1 (Supported Brands) - Issue #2 (How It Works) - Issue #4 (Example Report)

Issue #4: Marketing - Create Example PDF Report

Title: Create sample PDF report for marketing Type: Marketing Priority: High Estimate: 5 story points

Description: Design and create a professional example PDF report showing what customers will receive. Should look production-ready.

Acceptance Criteria: - [ ] Report designed in Figma/Canva - [ ] All 6+ pages created - [ ] Includes: cover, vehicle info, battery health, service history, charging stats, alerts - [ ] Charts and visualizations included - [ ] Branding consistent - [ ] Exported as PDF - [ ] Hosted and accessible - [ ] Link added to landing page

Technical Tasks: - Design in Figma/Canva - Create mockup data - Generate charts/visualizations - Export as PDF - Upload to hosting - Add download link to UI

Issue #5: Marketing - Create Demo Video

Title: Create "How to Use Car Pulse Tracker" demo video Type: Marketing Priority: Medium Estimate: 8 story points

Description: Create 60-90 second demo video showing the complete user journey from landing page to PDF download.

Acceptance Criteria: - [ ] Script written - [ ] Screen recording completed - [ ] Voiceover recorded - [ ] Video edited with overlays/callouts - [ ] Subtitles added - [ ] 60-90 seconds duration - [ ] Uploaded to YouTube - [ ] Embedded on landing page

Technical Tasks: - Write video script - Record screen using Loom or OBS - Record voiceover - Edit video (add overlays, transitions) - Add subtitles - Export final video - Upload to YouTube - Embed on website

Tool Recommendation: Start with Loom (free, easy)

Issue #6: Content - Update Copy to be Brand-Agnostic

Title: Update all UI copy to support multiple manufacturers Type: Improvement Priority: Medium Estimate: 2 story points

Description: Review and update all text/copy to be manufacturer-agnostic. Remove Tesla-specific language where appropriate.

Acceptance Criteria: - [ ] Hero copy updated - [ ] Features section updated - [ ] OAuth flow text generalized - [ ] Error messages brand-agnostic - [ ] Translation keys updated (en/fi/sv) - [ ] Tesla kept as "currently supported example"

Technical Tasks: - Audit all UI text - Update locale files (en.json, fi.json, sv.json) - Update CLAUDE.md documentation - Update README files

Issue #7: Brand Refresh - Replace CPT Product Logo

Title: Replace current CPT header/logo implementation from approved brand concept Type: Improvement Priority: Medium Estimate: 2 story points

Description: The current CPT product logo in the app is still a simple inline SVG in the header. We now have a stronger visual direction in /Users/petrisandholm/Downloads/cpt-brand2.html and need to convert that into a reusable product logo asset instead of leaving branding embedded in component markup.

Acceptance Criteria: - [ ] Final CPT logo exported from the approved concept into reusable asset format - [ ] Header.vue no longer embeds the CPT product logo as inline SVG - [ ] Logo works on desktop and mobile header layouts - [ ] Existing OEM brand logos remain separate from CPT product branding - [ ] npm run build passes after the asset swap

Technical Tasks: - Export CPT logo asset(s) from /Users/petrisandholm/Downloads/cpt-brand2.html - Add the asset under src/vue/app/src/assets/images/branding/ - Replace the inline logo in src/vue/app/src/components/Header.vue - Update related header/logo CSS in src/vue/app/src/style.css - Verify whether visible naming remains Car Pulse Tracker or changes to a CPT lockup only

🎨 Design Assets Needed

Logos (12 brands):

[ ] Tesla (have)
[ ] Volkswagen
[ ] BMW
[ ] Mercedes-Benz
[ ] Audi
[ ] Porsche
[ ] Nissan
[ ] Hyundai
[ ] Kia
[ ] Polestar
[ ] Ford
[ ] Rivian

Format: SVG (preferred) or high-res PNG Size: ~200x100px (consistent sizing) Style: Official brand logos, transparent background

CPT Product Branding:

[ ] CPT logo exported from approved concept HTML
[ ] Icon-only variant
[ ] Full lockup variant for dark backgrounds
[ ] Monochrome fallback
[ ] Favicon/app icon derived from the same mark

Icons (5 steps):

[ ] Step 1: Shopping cart / price tag (Choose Plan)
[ ] Step 2: Credit card / lock (Secure Payment)
[ ] Step 3: Car / key (Connect Vehicle)
[ ] Step 4: Chart / analytics (Generate Report)
[ ] Step 5: Download / document (Get PDF)

Format: SVG Style: Line icons, consistent stroke weight

Sample Vehicle Images:

[ ] Tesla Model 3 (for example report)
[ ] Generic EV silhouette (for coming soon brands)

📅 Suggested Implementation Order

Phase 1: Foundation (Week 1)

✅ Service Agreement implementation (DONE)
Create example PDF report mockup
Collect all brand logos and icons
Replace current CPT inline header logo with reusable brand asset

Phase 2: UI Updates (Week 2)

Implement SupportedBrands.vue component
Implement HowItWorks.vue component
Update copy to be brand-agnostic

Phase 3: Integration (Week 3)

Refactor landing page layout
Add example report preview/download
Testing and refinement

Phase 4: Marketing (Week 4)

Create demo video
Upload and embed video
Final polish and launch

❓ Questions to Answer

Business Questions:

[ ] Which brands should we prioritize after Tesla?
[ ] Do we have API partnerships with other manufacturers?
[ ] What's the timeline for adding each new brand?
[ ] Pricing strategy for different brands?

Technical Questions:

[ ] Can we use official brand logos (trademark considerations)?
[ ] Where to host video (YouTube, Vimeo, self-hosted)?
[ ] Where to host example PDF (S3, GCS, CDN)?
[ ] Do we need different reports for different brands?

Design Questions:

[ ] Should "Coming Soon" brands be clickable (waitlist)?
[ ] How much detail in "How It Works" section?
[ ] Video style: professional voiceover or casual?
[ ] Example report: real data or clearly marked as example?

📝 Missing Items / Additions

Based on your requirements, I'd also suggest:

Additional Considerations:

Testimonials Section
Social proof for credibility
"As seen on" logos (if applicable)
Customer reviews/ratings
FAQ Section
Common questions about the service
Technical questions about data access
Pricing clarifications
Trust Badges
SSL certificate badge
Payment security badges
Data privacy compliance (GDPR)
Email Waitlist for Unsupported Brands
Allow users to sign up for notifications
When clicking "Coming Soon" brands
Builds email list for launch
Blog/Resources Section (Future)
EV buying guides
Battery health tips
SEO content

🎯 Success Metrics

Track these metrics after changes: - Conversion rate (landing → payment) - Bounce rate on landing page - Time on page - Video play rate - Sample report download rate - Waitlist signups for other brands

Ready to create Linear issues for each item above!