MPINarada Wireframes

Wireframe Template Library

12 wireframe templates for the MPI website redesign, built with the MPI brand system.

Start with Homepage → Talk to an Engineer (Key Template) AI Data Centers (Priority Page)
Design Rationale

The Three Decisions That Drive These Templates

1. Lead with 10,000 Cycles, Not Liquid Cooling

Tesla, Sungrow, EnerSys — all use liquid cooling or have no message at all. No competitor publicly states a 10,000-cycle claim. This is genuinely unoccupied territory. Liquid cooling is the mechanism; cycle life is the claim.

2. "Talk to an Engineer — Not a Sales Rep" is First-Class

5 specialist reviews independently flagged the missing middle tier. The quote form is too commitment-heavy for engineers 30–90 days into research on a 180–365 day purchase. Engineer call = the load-bearing conversion.

3. /markets/ai-data-centers/ = Technical Reference Document

Tesla's data center page is a 404. Sungrow has no data center vertical. EnerSys says "gaming and streaming" — not AI. This is the fastest-growing power procurement segment and the window to establish first-mover presence is open now.

Four-Tier CTA Hierarchy — Applied Across All Templates

Tier 1 — Discovery "Download LFP vs. VRLA Guide"
Homepage secondary, resource pages.
No form. No gate.
Tier 2 — Evaluation "Download Specification Sheet"
Product pages (primary CTA there).
No form. Direct PDF.
Tier 3 — Validation "Talk to an Engineer — Not a Sales Rep"
Product + market pages (secondary).
6 fields. No reCAPTCHA v2.
Tier 4 — Commercial "Request Project Pricing"
Quote form destination only.
11 fields. Phone required.
NEVER use "Request a Quote" as primary CTA on market pages. NEVER use "Contact Us" anywhere as a primary or secondary CTA.
All 12 Templates

Click Any Template to Open

01
Homepage
/ (root)
Hero with 10,000-cycle headline. Proof bar with footnoted metrics. Market routing tabs (5). Primary differentiator block with inline cycle-life math. Overlap-card case studies. Marquee band. CTA card. Wordmark footer.
  • Product names absent from hero — routing cards are for product selection, not hero
  • Primary CTA above fold = "Request Project Pricing" (secondary = Guide download)
  • "Talk to an Engineer" CTA in Scroll Zone 10 only — after 3+ scroll zones of content
  • Proof bar: every number has a test standard citation — no unanchored claims
▶ Must Be Live at Launch Open →
02
Market Page — AI Data Centers
/markets/ai-data-centers/ (all /markets/*)
Technical reference document format. Qualification header with proof column. HTML technical requirements table. Product fit routing. FAQ block with FAQPage schema. 3-tier CTA block. Highest-priority page in the site — no competitor has this content.
  • Written as a technical reference, NOT as a marketing page — AI systems don't cite marketing language
  • Primary CTA = "Request System Specifications" — never "Request a Quote" on market pages
  • No hero image — full-width dark header band with qualification column
  • TechArticle + FAQPage schema applied to this template
▶ Must Be Live at Launch (AI Data Centers) Open →
03
Product Category Hub
/products/lfp-36-800v/ (all 4 hubs)
Hub header with category metrics. URL-based filterable product card grid. Each card: spec table, application tags, "View Specifications" + "Download Datasheet" links. Chemistry overview with "When VRLA wins" block. Cross-market bar. Two-tier CTA.
  • Cards contain specs, model numbers, and application tags ONLY — zero marketing copy
  • No quote CTA on hub pages — buyers are still narrowing product selection
  • Filter state is URL-based (e.g. ?application=ups&voltage=48v) — bookmarkable, shareable
  • Hub's job is routing to individual product pages — not conversion
▶ Must Be Live at Launch Open →
04
Individual Product Page
/products/[category]/[product]/
Product header with 4-tier CTAs visible above fold. HTML spec table at position one (BEFORE any prose). Technical feature sections (mechanism → outcome → proof). Application compatibility table. FAQ block. Related products row. Full 4-tier CTA block at page bottom.
  • Critical: Spec table appears BEFORE any marketing copy — engineer arrived with a technical question, answer it first
  • HTML spec tables — not PDF links, not images of tables. AI systems cannot cite PDFs.
  • "dateModified" visible as readable text, not schema-only
  • Inline context-sensitive CTAs after each feature section (text links, not buttons)
▶ HTML Spec Tables Required at Launch Open →
05
LFP vs. VRLA Guide
/resources/lfp-vs-vrla-guide/ (all guides)
Technical reference format. Author + date prominently displayed. Executive summary + jump navigation above fold. Full HTML comparison table (never PDF-only). "When VRLA Wins" section (load-bearing credibility). TCO framework with example calculation. FAQ with FAQPage schema. Three-option end-of-guide CTA block.
  • "When VRLA Wins" section cannot be omitted, moved below fold, or softened — it's the credibility signal that makes everything else believable
  • Zero gatekeeping on guide content. No pop-up forms. No exit-intent overlays.
  • Three-option CTA block at end — all three options present, no pressure toward any one
  • Jump nav serves engineers AND AI systems parsing structured navigation
▶ Must Be Live at Launch (Homepage secondary CTA) Open →
06
Technical Library + Glossary
/resources/technical-library/ & /resources/glossary/
Open access policy stated at top. Search bar. URL-based server-rendered filters (chemistry / market / type). Document grid: title, type badge, date, format, view/download. Gating policy stated on page. "Request a Document" form for gaps. Glossary variant: alpha nav + DefinedTerm schema.
  • Critical: Server-side rendered — full filtered result set in initial HTML. No AJAX-only filtering.
  • Datasheets and certs = ungated. App guides = 3-field soft gate. Never gate spec sheets.
  • Every document card shows last-updated date — undated technical documents destroy trust
  • No "Talk to an Engineer" above fold — this is a self-service tool, not a funnel entry
▶ Glossary (20+ terms) at Launch Open →
07
Talk to an Engineer
/contact/talk-to-an-engineer/
H1 = "Talk to an Engineer — Not a Sales Rep." Promise block appears BEFORE the form. Agenda block with concrete call scope (engineers don't schedule open-ended calls). 6-field form (max). Honeypot spam prevention (NO reCAPTCHA v2). Credential statement, not testimonials. Confirmation page preview included.
  • Critical layout rule: Promise block before form — form-first layout consistently underperforms
  • "Not a Sales Rep" qualifier is load-bearing — do NOT truncate to just "Talk to an Engineer"
  • No phone required field. No budget, project size, or timeline fields.
  • No reCAPTCHA v2 — it creates friction and repels technical buyers
▶ Must Be Live at Launch Open →
08
Quote Request Form
/contact/request-quote/
H1 = "Request Project Pricing" (NOT "Request a Quote"). Qualification sentence redirects pre-commercial buyers to Talk to Engineer. What-happens-next block before form. 11-field form with "Not Yet Defined" options mandatory on technical spec dropdowns. Exit ramp to Talk to Engineer below submit button.
  • "Project Pricing" signals bespoke proposal. "Get a Quote" implies catalog price — wrong for this buyer.
  • "Not Yet Defined" dropdown option is mandatory — early-stage commercial buyers are valid leads
  • Phone required here (commercial form). Not required on Talk to Engineer (mid-funnel).
  • Cross-link to Talk to Engineer below submit button — routes premature visitors to the right path
▶ Must Be Live at Launch Open →
09
OEM Page
/oem/
4 OEM capability stats in header (answer first 4 engineering questions). Partnership framing ("not a catalog supplier"). What OEM partners get (specific deliverables). BMS/PCS compatibility matrix (HTML table — no competitor publishes this). Integration spec downloads (ungated). OEM-specific inquiry form (7 fields, includes volume and BMS protocol).
  • Documentation IS the product of this page — without BMS specs and compat matrix, nothing to share internally
  • No quote CTA above fold — OEM engineering teams don't begin with commercial conversations
  • OEM inquiry form is different from quote form — includes application, BMS protocol, volume estimate
  • Compatibility matrix is the single highest-value content element on the page — bookmark-worthy
▶ First 90 Days Open →
10
Company / About
/company/* (all sub-pages)
Primary variant: /company/narada-partnership/ — proactive Narada disclosure framed as supply chain advantage, not defensive clarification. Certifications variant: HTML table with verification links to UL iQ / TÜV / Bureau Veritas. Leadership variant: Person schema on each individual, named authorship cross-reference.
  • Narada disclosure page exists at launch — sophisticated buyers find SH:600884 anyway
  • Every certification has a verification link — "Certified to UL 1973" is a claim; a link to UL File E[X] is verifiable
  • Disclosure tone = confident advantage, not defensive clarification — these are very different documents
  • Person schema on leadership enables citation of named technical authorities in search results
▶ Narada Disclosure Must Be Live at Launch Open →
11
Contact Index
/contact/
Routing page for buyers who don't know which path to take. Three-path card layout: Talk to an Engineer (primary), Request Project Pricing (secondary), Meet With Us (trade shows). Includes trade show schedule with meeting scheduler, OEM inquiry callout, and press/careers/general contacts.
  • No generic "Contact Us" form — every path names what the buyer receives
  • Talk to an Engineer card is the primary action — highest-value mid-funnel conversion
  • Trade show schedule must be current — stale event listings undermine North American presence claim
  • No home address or virtual office — undermines the North American support claim
▶ Must Be Live at Launch Open →
12
Events
/events/
Full events hub: featured upcoming show with inline booth meeting booking form, upcoming events grid (trade shows + webinars), standing virtual call strip, webinar schedule with on-demand archive, past event recaps with photos, and email announcement capture. Server-side rendered — URL-filtered by type and status.
  • Booth meeting form is inline on the page — not a separate page. Reduces friction for warm show leads
  • Events prove North American physical presence — do not hide this page or let it go stale
  • Webinar recordings are ungated — live in Technical Library, no form required
  • Past event recaps must use real booth photos — stock trade show photography is not acceptable
▶ Must Be Live at Launch Open →
Cross-Template Rules

Rules That Apply Everywhere

Rules That Cannot Be Violated on Any Template

  • Every claim must be anchored to a number, test standard, or verifiable third-party reference
  • "Talk to an Engineer — Not a Sales Rep" is the exact phrase — do not truncate
  • No "Contact Us" CTA anywhere — every CTA must name what the buyer receives
  • No reCAPTCHA v2 on any high-value form — honeypot fields only
  • datePublished and dateModified are visible text, not schema-only
  • Server-side rendering on all filterable content — no AJAX-only filtering
  • No unanchored superlatives — "industry-leading," "world-class," "best-in-class"
  • Narada is named on every page where product origin is relevant
  • "When VRLA wins" framing appears in abbreviated form on market pages and FAQ sections
  • HTML spec tables on all product pages — PDFs are not indexable or searchable

Things That Must Not Appear Anywhere on the Site

  • "Industry-leading," "world-class," or "best-in-class" without a specific number
  • Anonymous testimonials ("Facilities Manager, Major Data Center")
  • "Request a Quote" as primary CTA on any market page
  • reCAPTCHA v2 on Talk to Engineer or Quote Request forms
  • JavaScript-only AJAX filtering in the Technical Library
  • "Same liquid cooling technology as Tesla Megapack" — makes Tesla the reference point
  • Gated spec sheets or certification documents
  • Pop-up forms on the LFP vs. VRLA Guide page
  • Budget, project size, or timeline fields on the Talk to Engineer form
  • Obscured or missing Narada disclosure