SecureCompass Product Page Design

Date: 2026-04-27 Branch context: homepage-refresh Status: Design approved, ready for implementation plan

Goal

Create a SecureCompass marketing/positioning page on the base2Services website at /products/securecompass/. The page exists to position SecureCompass as a base2-owned product, building credibility for base2 as a hybrid services-and-products firm.

Primary job: brand and IP positioning. Plant the flag that base2 has product IP and isn't only a services firm. The managed-services buyer is the target audience; their interest is "does base2 have IP?" more than "I need a security scanner today."

Not the primary job: SaaS lead generation. The signup funnel for SecureCompass stays on securecompass.io; this page links out for trials. Avoiding dual-purpose lets the messaging stay focused.

On CTAs: the page is brand-led but provides a concrete trial CTA at the close (section 7) so the buyer who is ready to try the product has somewhere to go. This is not a contradiction with brand-first positioning — the IP framing sits across sections 1-6, and the trial exit is one of two equal exits in section 7 (SaaS trial vs. talk-to-base2). Implementers should not promote talk-to-base2 to primary across the page thinking it serves the brand-first intent; the trial CTA is correct as specified.

Audience

Primary: managed-services buyers on the base2Services site (SaaS / ISVs / mid-market). They land here from the V2 home benchmark partial, footer, or service-page cross-links.

Secondary: SaaS evaluators who arrive via the product page directly. They're served by the trial CTA but the page isn't optimised around them.

URL and navigation

Page structure

Seven sections. Variant A + B + C (lean structure plus cross-sell strip plus trust strip) was approved.

Section 1 — Hero

H1: See your AWS security posture, scored.

Sub: 228 controls against the AWS Well-Architected Security Pillar. Public exposure across 22 resource types. Period-over-period trends with risk-ranked findings.

Visual: lift hero-landing.webp from ~/development/base2dashboard/public/brand/ (1280px and 1920px sizes available). Copy the file into /images/products/securecompass/ on the base2 site.

CTAs: - Primary: Run a free assessment → https://securecompass.io/auth?redirect=scanner - Secondary: How base2 uses it → anchor #built-by-base2 (section 4)

Section 2 — Headline stat

Centred contrast panel. Stat is the only content; no competing elements.

Source: lifted from ~/development/base2dashboard/src/pages/LandingPage.vue lines 31-37.

Section 3 — What it does

Two capability blocks with mini-mockups. Alternating image position (block 1 mockup right, block 2 mockup left). Mockups built inline in HAML/SCSS like the V2 benchmark partial — no external images.

Block 1 — Security Pillar Assessment (copy left, mockup right)

Block 2 — Public Exposure Scanner (mockup left, copy right)

Source: lifted from ~/development/base2dashboard/src/pages/LandingPage.vue lines 41-117.

Section 4 — Built by base2Services

Brand-gravity moment. Visual treatment: dark base2 teal background with white text, like the V2 engine section. Anchor id built-by-base2.

H2: Built by base2Services.

Lead paragraph: SecureCompass started as the tool we used to assess every new customer's AWS environment. We made it available as a SaaS so you can run the same instrument we run.

Body paragraph: base2Services is an AWS Advanced Consulting Partner specialising in platform engineering and DevOps. SecureCompass is part of how we work, not a side project. It plugs into our managed services so the score is more than a report. It's a prompt for engineers who can act on it.

Visual: base2Services logo + "AWS Advanced Consulting Partner" badge alongside the SecureCompass logo. Conveys parent-product relationship.

Inline CTA: See how base2 manages AWS → → /cloudmanagement/

Section 5 — Trust strip

Light grey panel between section 4 and the cross-sell. Two sub-rows.

Sub-row 1 — Customers - Eyebrow: Trusted by AWS teams at - Logos: IWT_logo.svg, PXB-logo.svg, imagemaster.png from ~/development/base2dashboard/public/brand/ - Mono-tone treatment (greyscale or single base2-blue tone) - Logo width approx 80-100px each, comfortable spacing

Sub-row 2 — Compliance standards - Eyebrow: Maps to - Badges: gdpr.svg, hipaa.svg, nist.svg, pci.svg, soc2.svg from ~/development/base2dashboard/public/brand/standards/ - Native colour treatment (these are recognised standards badges) - Badge width approx 60-80px each

Verification flag: confirm IWT, PXB, and imagemaster logos are cleared for marketing use on base2's site. Drop or swap any that are case-by-case before shipping.

Section 6 — Cross-sell strip

Bridge from "you've seen our IP" to "here's the service relationship."

H2: More than a score.

Sub-line: SecureCompass tells you what's wrong. base2's managed services keep it right.

Two text-led cards in a 2-col grid. No background images (heavy imagery elsewhere on the page).

Card 1 — Compliance & Reliability (left) - Body: ISO 27001, CPS 234, PCI DSS. Continuous posture monitoring. Audit-ready, always. - Link: Learn more → → /security/

Card 2 — Cloud Management (right) - Body: 24/7 follow-the-sun ops. Findings shipped as PRs your team approves. - Link: Learn more → → /cloudmanagement/

Platform Engineering deliberately omitted — less direct overlap with SecureCompass.

Section 7 — Closing CTA

Treatment matches V2 home CTA section (centred block, dark teal or aqua-tinted background).

H2: Try it on your AWS account.

Sub: 15 minutes from sign-up to first findings. Read-only AWS access.

Primary CTA: Run a free assessment → https://securecompass.io/auth?redirect=scanner

Secondary inline links (smaller, beneath primary, dot-separated): - Talk to base2 → /contact/ - See how base2 manages AWS → /cloudmanagement/ - Why we built it → #built-by-base2

Verification flags: - Confirm "Read-only AWS access" matches the actual SecureCompass IAM permissions. Adjust copy if write access is required for any feature. - Confirm "15 minutes from sign-up to first findings" against actual time-to-value. Adjust the number if the real value differs.

V2 home benchmark partial integration

The existing _partials/front_page/benchmark.html.haml requires updating to match SecureCompass's actual scope and link to the new product page.

Variant B selected: tighten partial to match SC scope (Security Pillar + Public Exposure), use existing SaaS mockup labels, hybrid visual that keeps the big-score-and-sparkline rhythm.

Copy updates: - H2: See your AWS security posture, scored. - Body: 228 controls against the AWS Well-Architected Security Pillar. Public exposure across 22 resource types. Trend lines you can take to the board. - Replace Powered by SecureCompass. with A SecureCompass product. linked to /products/securecompass/ - Keep primary CTA Get your free 15-minute snapshot → /contact/ - Optional secondary link: Or try SecureCompass free → → https://securecompass.io

Mockup updates (Option 2 hybrid — keep big-score visual, swap labels): - Header: Security Snapshot (was Environment Snapshot) + Live indicator stays - Big number: 82, relabelled Security Posture Score (was Environment Health Score) + sparkline kept - Stat grid (was IAM / Cost / Reliability / Compliance): replace with SEC01 · SEC02 · SEC03 · Exposure with score percentages - Caption stays: Illustrative example. Live snapshots are generated against your environment.

Voice and visual consistency

Page matches the existing service-modern design system (per feedback_design_consistency.md). No alternative aesthetics or brand treatments. Hero treatment, section layout, and card patterns mirror the V2 home and existing service pages.

ASCII-only SCSS (per project_sass_ascii_only.md). No em-dashes in any copy on the page (per feedback_no_em_dashes.md).

File structure

products/ securecompass/ index.html.haml # The page itself _partials/ products/ securecompass/ hero.html.haml # Section 1 stat.html.haml # Section 2 capabilities.html.haml # Section 3 built_by.html.haml # Section 4 trust_strip.html.haml # Section 5 cross_sell.html.haml # Section 6 cta.html.haml # Section 7 images/ products/ securecompass/ hero-landing.webp # Lifted from base2dashboard logo.svg # Lifted from base2dashboard iwt-logo.svg # Customer logos pxb-logo.svg imagemaster.png standards/ # Compliance badges gdpr.svg hipaa.svg nist.svg pci.svg soc2.svg scss/ site/ _securecompass.scss # New file, scoped to .page-products-securecompass

Partial decomposition is recommended (not mandatory). For a single-page product like this, sections can also live inline in index.html.haml if preferred. Decision deferred to implementation plan.

Out of scope

Dependencies

Verification flags summary

Items to confirm before or during implementation:

  1. Customer logos cleared for base2 site marketing use (IWT, PXB, imagemaster)
  2. Read-only AWS access claim matches actual SC IAM requirements
  3. 15 minutes from sign-up to first findings matches actual time-to-value

Follow-on work (separate spec)

The KickOff product page (task #7) will use the same seven-section structure as a template: - Hero, headline stat, two capability blocks, built-by-base2Services, trust strip, cross-sell, closing CTA - Content swaps: AI Readiness Assessment scope, KickOff stat, KickOff capability blocks, KickOff CTA target (ai.base2services.com) - Visual treatment same; copy and mockups bespoke to the AI Readiness story

Open implementation decisions (deferred to plan)