Nairametrics Website Evolution Roadmap

Last Updated: 2025-10-11
Status: Active Development
Current Phase: Phase A (Imminent)

📚 Documentation: This is a simplified overview. For detailed implementation, see:

Comprehensive Roadmap - Full technical details

Phase Documents - Deep implementation guides

Architecture Documentation - Technical architecture

Executive Summary

This roadmap outlines Nairametrics’ phased migration from a traditional WordPress site to a modern, scalable platform. The journey is divided into three strategic phases that deliver incremental value while minimizing risk:

Phase A (Imminent): Custom WordPress Theme Redesign
Phase B (Next): Headless CMS with Cross-Platform Frontend
Phase C (Future): Complete Laravel Migration

Why This Approach?

Incremental Risk: Each phase delivers value independently
Business Continuity: Editorial team continues using familiar tools
Testing Ground: Validate architecture changes before full migration
Data Preservation: Content remains accessible throughout transition

Phase Comparison

📊 Detailed Comparison: See Roadmap Phase Comparison for comprehensive analysis

Phase	Timeline	Risk	Budget	Key Deliverable
A	2-3 months	🟢 LOW	[Budget TBD]	Modern WordPress theme with improved performance & UX
B	4-6 months	🟡 MEDIUM	[Budget TBD]	Headless architecture with Next.js web + Expo mobile apps
C	6-9 months	🔴 HIGH	[Budget TBD]	Full Laravel CMS with Filament admin (WordPress decommissioned)

Architecture Evolution

CURRENT STATE
┌─────────────────────────────────┐
│    WordPress Monolith           │
│  • Content + Presentation       │
│  • JNews    Theme               │
│  • WPBakery Page Builder        │
│  • Server-Side Rendering        │
└─────────────────────────────────┘

        ↓ PHASE A (2-3 months)

┌─────────────────────────────────┐
│  WordPress + Redesigned Theme   │
│  • Modern UI/UX                 │
│  • Better Performance (PSI 90+) │
│  • Improved SEO & Accessibility │
│  • Foundation for decoupling    │
└─────────────────────────────────┘

        ↓ PHASE B (4-6 months)

┌──────────────────┐     ┌────────────────────┐
│  WordPress CMS   │────▶│  Laravel REST API  │
│  (Content Only)  │     │  • Business Logic  │
└──────────────────┘     │  • Analytics       │
                         │  • Caching Layer   │
                         └────────┬───────────┘
                                  │
                ┌─────────────────┼──────────────┐
                │                 │              │
          ┌─────▼────┐     ┌─────▼────┐  ┌─────▼────┐
          │ Next.js  │     │   Expo   │  │   APIs   │
          │   Web    │     │  Mobile  │  │(3rd Party)│
          └──────────┘     └──────────┘  └──────────┘

        ↓ PHASE C (6-9 months)

┌──────────────────────────────────────┐
│      Full Laravel Platform           │
│  ┌────────────┐   ┌────────────────┐ │
│  │  Filament  │   │    Laravel     │ │
│  │   Admin    │   │    Backend     │ │
│  └────────────┘   └────────┬───────┘ │
└──────────────────────────────┼─────────┘
                               │
           ┌───────────────────┼──────────────┐
           │                   │              │
     ┌─────▼────┐       ┌─────▼────┐  ┌─────▼────┐
     │ Next.js  │       │   Expo   │  │   APIs   │
     │   Web    │       │  Mobile  │  │(3rd Party)│
     └──────────┘       └──────────┘  └──────────┘

Phase A: Custom WordPress Theme Redesign (IMMINENT)

Timeline: 2-3 months (12-13 weeks)
Risk Level: 🟢 LOW
Status: Ready to start

Overview

Modernize the user experience and performance without changing editorial workflows or backend architecture. Build a production-ready theme using a modern wordpress stack.

Technology Stack

🏗️ Technical Details: See Architecture Documentation for complete implementation details

• Sage (WordPress theme framework)
• Bud.js (build tool with HMR)
• TailwindCSS (utility-first CSS)
• Alpine.js (lightweight JavaScript)
• Blade (templating)

What Changes

✅ Frontend UI/UX redesign
✅ Theme architecture modernization
✅ Performance optimization (PSI 90+ mobile)
✅ Mobile responsiveness
✅ Accessibility (WCAG 2.1 AA)

What Stays the Same

✅ WordPress as CMS
✅ Existing content structure
✅ Editorial workflow
✅ Admin interface
✅ Hosting setup

Implementation Timeline

Week	Focus	Deliverables
1-2	Discovery & Planning	Current state document, design brief, technical spec
3-5	Design Phase	Wireframes, high-fidelity designs, component library
6-10	Theme Development	Complete theme with all templates and components
11	Performance Optimization	Image optimization, caching, asset optimization
12	Testing & QA	Functional, performance, SEO, accessibility testing
12-13	Deployment & Launch	Production deployment and monitoring

Success Metrics

📈 Testing Details: See Testing Strategy for complete testing approach

Performance Targets:

PageSpeed Score: 90+ (mobile), 95+ (desktop)
LCP (Largest Contentful Paint): < 2.5s
INP (Interaction to Next Paint): < 200ms
CLS (Cumulative Layout Shift): < 0.1

User Experience:

Bounce Rate: < 60%
Pages per Session: > 2.5
Avg Session Duration: > 2 minutes

Business Goals:

Maintain or improve SEO rankings
Maintain or improve ad revenue
Increase newsletter signups
Zero editorial workflow disruption

Key Deliverables

📄 Full Details: See Phase A Documentation for complete implementation plan

✅ Design Assets

Complete design system in Figma
Component library
Style guide

✅ Code

Production-ready WordPress theme
Optimized build pipeline
Comprehensive documentation

✅ Foundation for Phase B

Clean, modular codebase
API-ready structure
Modern tooling in place

Phase B: Headless CMS + Unified Frontend (NEXT)

Timeline: 4-6 months
Risk Level: 🟡 MEDIUM
Status: Depends on Phase A completion

Overview

Decouple the frontend from WordPress while maintaining WordPress as the CMS. Build a Turborepo monorepo with Next.js web application and Expo mobile apps, all consuming a unified Laravel API layer.

Architecture

🏗️ Infrastructure: See Infrastructure Architecture for deployment details

🔐 Security: See Security Architecture for security controls

Turborepo Monorepo Structure:

Nairametrics/
├── apps/
│   ├── web/              (Next.js 14+ App Router)
│   ├── mobile/           (Expo + React Native)
│   └── api/              (Laravel 11 REST API)
│
├── packages/
│   ├── global/           (Global utilities, hooks, store)
│   ├── auth/             (Authentication & authorization)
│   ├── blog/             (Blog content & comments)
│   └── media/            (Media management)
│
└── turbo.json

Technology Stack

🧭 Technology Decisions: See Tech Choices for decision rationale

Web Frontend (Next.js):

Next.js 14+ with App Router
TypeScript
TailwindCSS (utility-first CSS)

Mobile Frontend (Expo):

Expo SDK 51+
React Native
TypeScript
Shared UI components

Backend API (Laravel):

Laravel 11 (Acorn)
Laravel Sanctum (authentication)
Laravel Horizon (queue management)
Redis (caching & queues)

Content Source:

WordPress (headless CMS)
WordPress REST API

What Changes

✅ New Next.js web frontend (SSR/SSG/ISR)
✅ New Expo mobile apps (iOS + Android)
✅ Laravel API layer (business logic, analytics, caching)
✅ WordPress becomes content-only
✅ 70-80% code reuse via shared TypeScript packages

What Stays the Same

✅ WordPress admin interface
✅ Editorial workflow
✅ Content structure
✅ Content in WordPress database

Implementation Timeline

Month	Focus	Deliverables
1	Planning & Architecture	Technical architecture, API design, monorepo setup
2-3	Laravel API Development	Complete REST API, WordPress integration, analytics
3-5	Next.js Web Frontend	Web application with SSR/ISR, SEO optimization
4-6	Expo Mobile Apps	iOS + Android apps with native features
6	Testing & QA	End-to-end testing, performance optimization

Success Metrics

Technical KPIs:

API Response Time (p95): < 200ms
Web LCP: < 2s
Mobile App Launch: < 3s
API Uptime: 99.9%
Cache Hit Rate: > 80%
Code Reuse: 70-80%

User Metrics:

Mobile App Downloads: Track growth
Session Duration: > 3 minutes
Bounce Rate: < 50%
Return Users: > 40%

Business Goals:

Editorial workflow unchanged
Zero content loss/corruption
Ad revenue maintained/improved

Key Deliverables

📄 Full Details: See Phase B Documentation for complete implementation plan

📋 API Examples: See API Documentation for API specs and examples

✅ Laravel REST API

Complete REST API
WordPress adapter layer
Authentication system
Analytics & tracking
Caching layer

✅ Next.js Web Application

Modern web frontend
SEO optimized (SSR/SSG/ISR)
Fast page loads
Responsive design

✅ Expo Mobile Apps

iOS app
Android app
Push notifications
Offline support
Native performance

✅ Shared Packages

UI component library
TypeScript types
Utilities & helpers
Consistent branding

Phase C: Complete Laravel Migration (FUTURE)

Timeline: 6-9 months
Risk Level: 🔴 HIGH
Status: Future phase (requires Phase B success)

Overview

Replace WordPress entirely with Laravel + Filament admin panel. This phase should only proceed if Phase B proves successful and the business case is validated.

What Changes

✅ WordPress completely replaced
✅ Laravel with Filament admin panel
✅ Complete data migration from WordPress
✅ New editorial workflows and training
✅ Mature Next.js + Expo applications
✅ Zero dependency on WordPress

What’s Challenging

Content migration (all posts, media, users, metadata)
Training editorial team on new system
Custom admin panel development
Ensuring complete feature parity
Zero downtime migration strategy
SEO preservation during transition

Technology Decisions

Admin Panel Options:

Option	Pros	Cons	Recommendation
Filament	Free, highly customizable, modern UI	More setup required	⭐ Recommended
Laravel Nova	Beautiful UI, Laravel-native	Commercial ($99/site)	Alternative
Custom Admin	Complete control	Time-consuming	Not recommended

Implementation Timeline

Month	Focus	Deliverables
1-2	Planning & Assessment	Requirements, architecture, migration strategy
2-3	Database Design	Laravel schema, Eloquent models, relationships
3-5	Filament Admin Panel	Complete admin interface, content management
5-7	Content Migration	Migrate all content, media, users
7-8	SEO Preservation	URL redirects, sitemap, metadata
8-9	Training & Change Mgmt	Editorial team training, documentation
9	Soft Launch	Phased rollout, monitoring

Migration Strategy

🔄 Migration Details: See Migration Plan for comprehensive migration strategy

📄 Transformation Guide: See Phase C Transformation Guide for detailed migration steps

Three-Phase Approach:

Parallel Running (1 month)
- Both WordPress and Laravel running
- Content synced bidirectionally
- Test with small user group
Read-Only WordPress (1 month)
- New content only in Laravel
- WordPress for historical content
- Gradual migration of old content
Full Migration (1 month)
- All content in Laravel
- WordPress decommissioned (kept as backup)
- 301 redirects in place

Success Metrics

Technical Success:

Zero data loss during migration
SEO rankings maintained
Error rate < 0.1%
Performance improved or maintained
All features have parity with WordPress

Editorial Success:

Team comfortable with new system
Publishing workflow faster or same speed
Positive feedback from editors
Training completion: 100%

Business Success:

Revenue maintained or grown
Traffic maintained or grown
Editorial costs reduced
Technical debt reduced
Platform scalability improved

Key Deliverables

📄 Full Details: See Phase C Documentation for complete implementation plan

✅ Full Laravel CMS

Complete content management system
Filament admin panel
All features migrated

✅ Content Migration

All posts migrated (100% fidelity)
All media migrated
All users migrated
URL redirects in place
SEO preserved

✅ Documentation

Technical documentation
User guides
Training materials
API documentation

✅ Team Readiness

Editorial team trained
Support documentation
Change management completed

Decision Points & Go/No-Go Gates

📊 Project Management: See PM Artifacts for project management templates

👥 Communication: See Stakeholder Communication Plan for communication strategy

After Phase A

Proceed to Phase B if:

✅ Performance targets met (PSI 90+ mobile)
✅ No critical bugs after 2 weeks
✅ SEO rankings maintained or improved
✅ Positive stakeholder feedback
✅ Editorial team satisfied

Pause if:

❌ Performance below targets
❌ Critical bugs unresolved
❌ SEO rankings dropped
❌ Budget constraints

After Phase B

Proceed to Phase C if:

✅ API performance meets SLA (< 200ms p95)
✅ Mobile apps successful (downloads, engagement)
✅ User engagement metrics improved 10%+
✅ Editorial team comfortable with headless approach
✅ Strong business case for full migration
✅ Budget approved

Stay on Phase B if:

⚠️ Metrics show Phase B is sufficient
⚠️ Editorial team not ready for change
⚠️ Budget constraints
⚠️ WordPress still meeting needs

Risk Management

⚠️ Detailed Risk Analysis: See individual phase documents for comprehensive risk mitigation strategies:

Phase A Risks

Phase B Risks

Phase C Risks

Phase A Risks

Risk	Likelihood	Impact	Mitigation
Design delays	Medium	Low	Timeboxed reviews, weekly checkpoints
Performance regressions	Low	Medium	Establish baseline, continuous testing
Browser compatibility	Low	Low	Cross-browser QA via Browserstack
Accessibility gaps	Medium	Medium	AxE audits, WCAG 2.1 AA checklist

Phase B Risks

Risk	Likelihood	Impact	Mitigation
API performance issues	Medium	High	Load testing, caching strategy, monitoring
Mobile app store approval delays	Medium	Medium	Follow guidelines, early submission
Code reuse challenges	Low	Medium	Shared TypeScript packages, early integration
Editorial workflow disruption	Low	High	Transparent communication, training

Phase C Risks

Risk	Likelihood	Impact	Mitigation
Data migration issues	High	Critical	Thorough testing, backup strategy, rollback plan
SEO ranking drops	Medium	High	URL redirects, metadata preservation, monitoring
Editorial team resistance	Medium	High	Change management, training, support
Feature parity gaps	Medium	High	Detailed requirements, phased rollout

Success Metrics Overview

📊 Complete Metrics: See Roadmap Success Metrics for detailed KPI definitions

✅ Testing Strategy: See Testing Strategy for measurement approach

Technical KPIs

Metric	Phase A Target	Phase B Target	Phase C Target
Page Load Time (LCP)	< 2.5s	< 2s	< 1.5s
API Response Time (p95)	N/A	< 200ms	< 150ms
Error Rate	< 1%	< 0.5%	< 0.1%
Uptime	99.5%	99.9%	99.95%
PageSpeed Score	90+	90+	95+

Business KPIs

Metric	Phase A Target	Phase B Target	Phase C Target
Traffic Growth	Maintain	+10-20%	+20-30%
Session Duration	+10%	+20%	+30%
Bounce Rate	-10%	-15%	-20%
Mobile Traffic	Track	+30%	+50%
Ad Revenue	Maintain	Maintain+	+10-20%

FAQ

❓ More Questions: See roadmap/ FAQ for additional frequently asked questions

Why not skip directly to Phase C?

Answer: Too risky. Phase B validates the headless architecture with minimal disruption. It gives the editorial team time to adapt and proves the technical approach works before full WordPress replacement.

Why Turborepo monorepo for Phase B?

Answer: The Turborepo approach provides:

Best SEO: Next.js SSR/SSG for optimal Google rankings
Native Performance: Full Expo power without web compromises
Maximum Code Reuse: 70-80% shared via TypeScript packages
Independent Optimization: Each platform optimized separately
Team Scalability: Web and mobile teams can work independently

What if a phase fails?

Answer: Each phase is independently valuable:

Phase A fails: You have a better theme, stop there
Phase B fails: Revert to Phase A theme, APIs still useful
Phase C fails: Stay on Phase B (headless WordPress)

How long until we see ROI?

Answer:

Phase A: Immediate (better UX, SEO)
Phase B: 6-12 months (app downloads, engagement)
Phase C: 12-24 months (reduced technical debt, flexibility)

Can we change the timeline?

Answer: Yes! Timeline is flexible. You can:

Slow down if needed
Skip features (marked as LOW priority)
Overlap phases if resources allow
Pause between phases to evaluate

Getting Started

📋 Current State: Review Current State Baseline before starting

🎯 Quick Overview: See Phase Highlights for executive one-pager

Immediate Next Steps

Review this roadmap with key stakeholders
Read detailed Phase A Documentation
Review Current State Baseline
Create project team (minimum: 1 developer, 1 designer)
Set up project tracking (Jira, Linear, Asana, etc.) - see PM Artifacts
Review Technology Choices with technical team
Begin Phase A Discovery (see detailed phase docs)

Communication Plan

👥 Detailed Communication Strategy: See Stakeholder Communication Plan

Weekly: Team standups
Bi-weekly: Stakeholder updates
Monthly: Phase review meetings
Quarterly: Strategic roadmap review

Additional Resources

Core Documentation

📋 Documentation Index - Main navigation hub
📄 Comprehensive Roadmap - Full technical roadmap
📄 Current State Baseline - Current environment documentation
🎯 Phase Highlights - Executive one-pager

Phase Documentation

📁 Phase Documents Overview - Phase navigation and comparison
📄 Phase A: Theme Redesign - Complete Phase A implementation guide
📄 Phase B: Headless + Expo - Complete Phase B implementation guide
📄 Phase C: Laravel Migration - Complete Phase C implementation guide
📄 Phase C Transformation Guide - Migration patterns and data mapping

Architecture & Technical

🏗️ Architecture Documentation - Complete technical architecture
📋 API Documentation - API examples and OpenAPI specs
💻 Code Examples - Example implementations

Technical Specifications

Process & Governance

Meta Documentation

📝 Documentation TODO - Outstanding documentation tasks
🧩 Diagrams Guide - Diagram notation and conventions

External Resources

🔗 Laravel Documentation - Laravel framework
🔗 Roots/Sage Documentation - Sage WordPress theme framework
🔗 Acorn Documentation - Laravel in WordPress
🔗 Bud.js Documentation - Build tool and HMR
🔗 Expo Documentation - Expo and React Native
🔗 Next.js Documentation - Next.js framework
🔗 Filament Documentation - Filament admin panel
🔗 Turborepo Documentation - Monorepo tool

Document Updates

Date	Version	Changes	Author
2025-10-11	3.0	Created simplified single-document roadmap	AI Assistant
2025-10-09	2.1	Updated Phase B to Turborepo monorepo	AI Assistant
2025-10-09	2.0	Reorganized into separate phase documents	AI Assistant

Questions? Review the detailed phase documents or consult with your development team.

Last Updated: 2025-10-11

Nairametrics Website Evolution Roadmap

Executive Summary

Phase Comparison

Architecture Evolution

Phase A: Custom WordPress Theme Redesign (IMMINENT)

Overview

Technology Stack

What Changes

What Stays the Same

Implementation Timeline

Success Metrics

Key Deliverables

Phase B: Headless CMS + Unified Frontend (NEXT)

Overview

Architecture

Technology Stack

What Changes

What Stays the Same

Implementation Timeline

Success Metrics

Key Deliverables

Phase C: Complete Laravel Migration (FUTURE)

Overview

What Changes

What’s Challenging

Technology Decisions

Implementation Timeline

Migration Strategy

Success Metrics

Key Deliverables

Decision Points & Go/No-Go Gates

After Phase A

After Phase B

Risk Management

Phase A Risks

Phase B Risks

Phase C Risks

Success Metrics Overview

Technical KPIs

Business KPIs

FAQ

Why not skip directly to Phase C?

Why Turborepo monorepo for Phase B?

What if a phase fails?

How long until we see ROI?

Can we change the timeline?

Getting Started

Immediate Next Steps

Communication Plan

Additional Resources

Core Documentation

Phase Documentation

Architecture & Technical

Technical Specifications

Process & Governance

Meta Documentation

External Resources

Document Updates

Contents