BPI Portal Redesign · Audit & Concepts

Neighbourhood & City Portal Templates

Five world-class newspaper/community portal concepts. Each mockup includes neighbourhood + city variants with dual-segment condo/freehold panels, dramatic CTAs to MyPropertyScout, MyStreetValue, and Coach House Wizard.

Concept 01 · USA Today Grid

Three-Column News Grid

USA Today–inspired layout: left secondary stories, centre hero feature, right headline rail + product CTAs. Best for desktop discovery and SEO depth.

Desktop-firstDual segment3-column

Concept 02 · Magazine Hero

Magazine Front Page

Dramatic above-the-fold headline, dual homeowner/buyer CTAs, "the fold" transition. Emotional editorial + data credibility.

Dual segmentEmotional hookDual CTA

Concept 03 · Community AI Hub

Community Intelligence Hub

AI ask bar ("Ask about Waterfront C1"), lifestyle insights, FAQ blocks for AI SEO. Positions BPI as the community resource.

Dual segment FAQAI SEOSegment panels

Concept 04 · Market Command

Market Command Center

Data-forward dashboard: price anchors, momentum gauges, insider deal ticker, neighbourhood comparison table. Power-user appeal.

Dual anchorSegment KPIsCompare table

Concept 05 · Mobile Pulse

Mobile-First Pulse Feed

Sticky product CTAs, card feed, swipeable listing stories, bottom nav. Optimized for mobile engagement and shareability.

Condo/Freehold tabsMobile-firstStory cards

Audit Summary — Current vs Target

What's working today

Template-driven section system (DB-configurable) — keep this architecture
SEO answer paragraph, schema.org, FAQ schema, sitemap — strong foundation
Live intel: floor/baseline/ceiling, momentum, insider counts
Cross-links to Scout, MSV, Coach House Wizard already wired

Ultimate Neighbourhood Guide (bot template)

Template mockup: bpi-neighbourhood-guide-template.html — live market layer + 18 guide sections
Two layers: Live (SQL/PropTx hourly) + Guide (Haiku/GeoIntel, incremental)
Option A: Hide guide sections until bot enriches them — no empty placeholders
Schools map: GeoIntelligence ArcGIS (free) + Mapbox pins; Google Embed optional
Existing bot: scripts/generate-neighbourhood-takes-v2.ts (Haiku) → extend to full guide

Typography · friendly newspaper stack

Headlines: Newsreader — warm editorial serif (replaces Playfair)
Body: Source Serif 4 — readable newspaper body text (replaces DM Sans)
Labels/UI: Source Sans 3 — clean section headers (replaces Oswald)

Scout map (scout_map_embed)

Yes — one Mapbox pin per listing on neighbourhood pages (see map in each concept)
Production component: BpiNeighbourhoodMap — Mapbox GL, Deal Score on pins, segment filter → Scout
Mockups use Mapbox static tiles + CSS pins; production is live interactive map
City pages: neighbourhood overview map or link to Scout citywide — not 12K pins on one embed

Dual-segment design (Option A)

Two panels: Condo + Freehold — each with own floor/baseline/ceiling, stats, insider count, Scout CTA
Market mix bar: Visual split (e.g. Waterfront C1: 70% condo · 30% freehold)
Option A rule: Show only segments with data — no empty panels (Kanata = freehold-only, pure condo towers = condo-only)
Reference data: Waterfront C1 — 518 condos ($585K baseline) · 223 freehold ($1.42M baseline) · 87 insider (62·25)
Shared CSS: bpi-portal-cta-shared.css — .bpi-segment-panel, .bpi-market-mix, .bpi-segment-listings

Critical gaps (from live Waterfront C1 screenshot)

Production blends condo + freehold into one baseline — mockups now show dual-segment panels
Single-column vertical scroll — no visual hierarchy like USA Today 3-column grid
Weak above-the-fold CTAs — Scout/MSV/CHW buried mid-page
No hero imagery, map, or lifestyle content — feels like a data dump not a community portal
Legacy components (HeroStats, DualCTA, Map, GoldCTABand) exist but aren't wired into V2
City pages lack neighbourhood discovery grid, market comparison, or editorial voice
Mobile: long repetitive listing list without story breaks or sticky conversion paths

CTA source (production components)

Scout — BpiBuyerScoutCard · scout_cta bar · Insider strip
MSV — BpiHomeownerValCard · GoldCTABand · ValCTAStrip · msv_cta inline
CHW — CoachHomeWizardLaunchCard (card + band variants)
Shared CSS — bpi-portal-cta-shared.css · blocks: bpi-portal-cta-blocks.html

Recommended template sections (both page types)

Universal: masthead, breaking intel bar, product nav rail, answer_para (with mix), market_mix_bar, segment_anchors, segment_stats, dramatic_dual_cta, bryons_take, data_transparency, segment_faq, bottom_cta_band
Neighbourhood-only: segment_listings, segment_insider_cta, segment_scout_cta, deal_of_week, scout_map_embed, lifestyle_insights, recently_sold_gated
City-only: city_segment_stats, neighbourhood_grid (condo + freehold baselines, dominant type), hot_neighbourhoods, cross_city_compare

CTA hierarchy (every template)

Primary: MyPropertyScout — "Browse 741 live listings" / Insider Deals gold band
Secondary: MyStreetValue — "What's your home worth?" dramatic card with Val
Tertiary: Coach House Wizard — classified-style ad for coach house / ADU potential
Utility: Call Bryon, mobile bottom nav (Search · Home Value · Call)