Homepage Lead-Gen Refresh — Design Doc

Date: 2026-04-10 Branch: master (after performance optimization work) Status: Draft for review

Context

base2Services has completed a major strategic repositioning (March 2026). The company is moving from generalist "DevOps as a Service" messaging to a specialist position: Platform Engineering for the AI Era, targeting regulated financial services companies building on AWS.

The current homepage (index.html.haml + _partials/front_page/*) still reflects the old positioning. The lead-gen-refresh git branch contains 22 commits of earlier hero redesign work but its messaging is now outdated compared to the latest strategy docs (in ~/development/claude/base2services/strategy-output/).

This design defines an interim homepage refresh that:

• Applies the new positioning and practitioner brand voice
• Introduces the Agent + Engagement Engineer delivery model visually
• Integrates the live SecureCompass (securecompass.io) assessment product as the primary conversion entry point
• Demotes "DevOps as a Service" language to minor references (fully removed in a later iteration)
• Is implemented on master (preserving the performance optimizations already shipped)
• Uses "bridge messaging" — new positioning leads, but does not alienate existing non-FinTech visitors

Goals

1. Replace generic messaging with the new strategic positioning on the homepage
2. Show, not tell, what the service delivers (dual-interface visual: leadership dashboard + engineer view)
3. Present services as modular paths that can be mixed and matched, not mutually exclusive tiers
4. Provide a working self-serve conversion path via SecureCompass
5. Preserve all recent mobile performance fixes from 2026-04-08-site-performance-optimization

Non-Goals

• Full site-wide messaging overhaul (inner pages, navigation, service sub-pages stay unchanged this round)
• New Platform Engineering L1/L2 landing pages — "Learn more" links go to /contact/ for the interim
• Deep compliance messaging rework — flagged for future iteration
• Visual brand/design system overhaul — reuses existing typography, colour palette, and button styles

Page Structure

Eight sections, top to bottom:

1. Hero (all-in-one)

Dark background. Contains the kicker, headline, subheadline, delivery-channel chips, CTAs, and an inline dual-interface visual (leadership dashboard + engineer view) within the same hero container.

Desktop layout (≥801px): Single-column centred layout. Copy (kicker, headline, subheadline) sits at the top, dual-interface visual sits immediately below, CTAs sit below the dual interface. Maximum content width 1200px, centred. Tablet (481–800px): Same single-column order as desktop, reduced padding and font sizes. Mobile (≤480px): Same single-column order — kicker → headline → subheadline → dual interface → CTAs. Dual interface builds conviction before the ask.

The entire page uses this single stacking order across all breakpoints. Side-by-side layouts are inside the dual-interface visual (Leadership view next to Engineer view) and collapse to stacked vertically ≤480px.

Copy (practitioner voice): - Kicker: AWS Advanced Partner · 15 years on AWS - H1: The infrastructure layer for AI-era software teams. - Subheadline: Findings in your pull requests. Compliance in your dashboard. An engineer who knows your environment. For teams shipping regulated software on AWS.

CTAs: - Primary: Start Your Assessment → https://securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=hero - Secondary: Book a Call → /contact/

Dual-interface visual (inline in hero):

Two panels side-by-side (stacked on mobile):

• Leadership view: Benchmark score circle (e.g. "78"), labelled "Benchmark Score ↑ 12 this quarter", followed by a three-column strip showing IAM / Cost / PCI scores with colour coding (green/amber/green).
• Engineer view: Two message cards. First: base2-agent · PR #247 with text "IAM: Lambda role has s3:* on arn:aws:s3:::*. Scoped to s3:GetObject." and a "✓ Ready to merge" badge. Second: #infra with text "Cost anomaly: RDS +40% this week. Reserved instance expired."

These are illustrative — rendered in HTML/CSS, not real screenshots. They do not need to match the live SecureCompass UI pixel-for-pixel; they communicate the two outputs the service produces.

2. Proof Bar

Thin horizontal strip, light background. Certification and partnership list:

ISO 27001 · CPS 234 · AWS Advanced Partner · DevOps Competency · SaaS Competency

No images required — can be text badges for simplicity in the interim.

3. Service Paths (Hybrid A+B layout)

White background. Section heading: "Three paths. One specialist team." Subheading: "Mix and match — start where your problem is most urgent. Every path leads to the same outcome: infrastructure your team can ship into, safely."

This copy explicitly reinforces the modular purchase model — services can be combined, not chosen exclusively.

Layout:

• Platform Engineering — full-width dark hero card with a "Primary" badge. Inside, two columns showing L1 (Infrastructure Lens) and L2 (Full Platform Engineering). Each column has a level label, name, short description, and "Learn more →" link to /contact/.
• Assessment + Cloud Management — two equal white cards below. Each has its own label, name, description, metadata chips (e.g. "One week · Fixed price" for Assessment; "AU · EU · US · Fixed monthly" for Cloud Management), and a dedicated CTA link.
  • Assessment CTA: Start Your Assessment → → SecureCompass URL (same as hero)
  • Cloud Management CTA: Explore Cloud Management → → /cloudmanagement/

4. How We Deliver (NEW)

Dark slate background. Section heading: "No tickets. No reports. Just fixes." Subheading: "The Engagement Engineer + Agent Fleet model."

Three equal cards in a row (stacked on mobile ≤480px):

Icons are rendered as inline SVG (simple geometric shapes or abstract line art) rather than emoji, to avoid cross-platform rendering inconsistencies. No external icon font; SVG is inlined in the partial.

5. Audited. Certified. Compliant.

Reuses the existing _partials/front_page/scroller_compliance.html.haml. The partial is heavy (97KB of inline SVG logos) but visually valuable and already performs well because it's below the fold. Reframe the heading copy only:

• Current: "Audited. Certified. Compliant." / "Designed for compliance, trusted by Software Product companies."
• New: "Audited. Certified. Compliant." / "The same standards your auditors look for. The same standards we hold ourselves to."

6. Customer Evidence

Reuses the existing _partials/front_page/testimonials.html.haml. Reframe the section heading to "What they shipped with us." Individual testimonial copy left unchanged for the interim — can be swapped page-by-page later.

7. Resources / Articles

Reuses the existing _partials/front_page/articles.html.haml unchanged. Keep the current articles feed, just updated heading if needed.

8. Dropped Sections

The following are removed from the homepage for this refresh:

• Event banner (_partials/front_page/event.html.haml) — can come back when a relevant event needs promoting
• Outcomes / services columns (_partials/front_page/outcomes.html.haml, services_columns.html.haml) — redundant with new Service Paths section
• Three-button row (Book a Call · See How We Work · Why Choose Us) — redundant with hero CTAs
• Video section (_partials/front_page/video.html.haml) — outdated, not strategy-aligned

Partials themselves are not deleted. They're left on disk and simply not included from index.html.haml. This keeps rollback cheap and keeps them available for other pages.

Implementation Plan

Files to Create

• _partials/front_page/hero_refresh.html.haml — new hero with inline dual-interface visual
• _partials/front_page/service_paths.html.haml — Platform Engineering primary card + Assessment + Cloud Management cards
• _partials/front_page/how_we_deliver.html.haml — three-card Agent + Engineer + Progress section
• _partials/front_page/proof_bar.html.haml — thin certification strip

Files to Modify

• index.html.haml — rewire to use the new partials and drop the removed sections (frontmatter title/description updated)
• _layouts/home.html.haml — update page title and meta description defaults to match the new positioning
• scss/site/_front-page.scss — add styles for new hero, service paths, how-we-deliver, proof bar. Keep existing styles for compliance scroller, testimonials, articles
• _partials/front_page/banner-aws-devops.html.haml — kept on disk but no longer included; old banner retained for rollback
• _partials/front_page/scroller_compliance.html.haml — update only the intro heading copy (lines 1–4)
• _partials/front_page/testimonials.html.haml — update only the section heading copy

Files Preserved Unchanged

• All performance optimization work from the 2026-04-08 spec
• The typewriter script (unused in new hero — can be deleted later)
• SecureCompass dashboard — not modified. Only linked to.

Page Title and Meta Description

New frontmatter in index.html.haml:

• Title: Platform Engineering for the AI Era | base2Services
• Description: Infrastructure intelligence for software teams on AWS. Findings in your pull requests, compliance in your dashboard, an engineer who knows your environment. AWS Advanced Partner. ISO 27001. APRA CPS234.

SecureCompass Link Convention

All "Start Your Assessment" buttons link to:

https://securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=<section>

Where <section> is one of: hero, service_paths, cta_footer. This allows conversion tracking in GA4 (via the new GTM container) to identify which homepage section drives the most assessment signups.

Styling Notes

• Reuse existing SCSS variables and colour palette ($base2-turquoise, dark navy, etc.)
• Hero uses #020c18 background with #2dd4bf accents for consistency with the lead-gen-refresh branch's direction
• Typography: HelveticaNeue/Arial Black for headlines (existing), system-ui fallback for UI chrome in the dual-interface visual
• Mobile: all multi-column layouts collapse to single column ≤480px
• Accessibility: dual-interface visual is decorative — include descriptive aria-label and role="img" on containers, but primary information is conveyed in the headline and subheadline above it

Performance Considerations

The page must not regress mobile performance from the 2026-04-08 optimization work:

• Hero image srcset (480w, 800w, 1200w, 1660w) is preserved (if the new hero uses a background image) or the hero is pure dark colour with CSS gradient (no image) — the implementation plan will decide based on visual impact trade-off
• No new external JS
• Dual-interface visual is pure HTML/CSS — no images, no JS, no emoji
• "How We Deliver" icons are inline SVG — no external icon font, no HTTP requests
• New sections use inline CSS classes, no webfonts beyond the existing Open Sans subset

Testing and Validation

Before merging the branch:

1. Lighthouse mobile audit must score ≥58 on Performance (current baseline after 2026-04-08 work). Regressions block merge.
2. Visual QA on ≤480px, 768px, and ≥1200px breakpoints using Chrome DevTools device emulation.
3. Verify SecureCompass link fires correctly with the UTM parameters attached, visible in the GA4 DebugView via the new GTM container (GTM-K53VC92S).
4. Verify "Book a Call" and "Explore Cloud Management" links resolve to the correct existing pages.
5. Screen reader pass — the dual-interface visual must not announce every mock number; use role="img" with an aria-label like "Illustration of benchmark dashboard and engineer pull requests".
6. Rollback test — confirm that reverting index.html.haml to its previous version restores the old homepage without needing to revert the new partial files.

Out of Scope / Future Iterations

• Dedicated Platform Engineering L1 and L2 landing pages
• Inner-page messaging refresh (/devops/, /cloudmanagement/, /security/, etc.)
• Navigation menu restructure
• Benchmark score live integration with SecureCompass data
• Customer evidence reworked with specific metrics per the strategy brand-voice guide
• Deeper compliance messaging (flagged by user as needing further work)
• Full removal of "DevOps as a Service" references across the site (this iteration only demotes homepage mentions)

Risks

1. Dual-interface visual looks fake. Static mockups risk feeling like marketing fluff rather than proof. Mitigation: keep it intentionally abstract (small icons, muted colours) so it reads as an illustration of outputs, not a product screenshot.
2. Bridge messaging dilutes the FinTech focus. The strategy is clear that regulated financial services is the target. Bridge messaging risks softening that. Mitigation: use "regulated software" phrasing and lean on the proof bar (APRA CPS234) to signal the audience without alienating non-FinTech visitors.
3. SecureCompass traffic spike. This homepage becomes a funnel into securecompass.io. If that product isn't ready for the volume, the CTA fails. Confirm with the SecureCompass team before launch.
4. Modular purchase model not obvious enough. The copy "Mix and match — start where your problem is most urgent" and the three distinct CTAs (not a single "Talk to us") signal modularity, but visitors may still perceive the Service Paths section as "pick one." Mitigation: watch user testing / analytics and iterate copy if conversion is low.