KickOff Product Page Design

Date: 2026-04-27 Branch context: homepage-refresh Status: Design approved, ready for implementation plan Sister spec: 2026-04-27-securecompass-product-page-design.md (template source)

Goal

Create a KickOff marketing/positioning page on the base2Services website at /products/kickoff/. The page exists to position KickOff (the AI Readiness Assessment tool at ai.base2services.com) 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 for the AI services market specifically. The managed-services / AI buyer is the target audience.

Not the primary job: SaaS lead generation. The signup funnel for KickOff stays on ai.base2services.com; this page links out for trials.

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 assessment has somewhere to go. The IP framing sits across sections 1-6, the trial exit lands in section 7. 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 and AI buyers on the base2Services site (SaaS / ISVs / mid-market plus regulated industries). They land here from cross-links on /artificialintelligence/* pages, the footer, or direct URL.

Secondary: people who want to evaluate the assessment tool itself. Served by the trial CTA but the page isn't optimised around them.

URL and navigation

Page structure

Seven sections. Mirrors the SecureCompass template with KickOff-specific content swaps and one structural delta: section 5 is an Industries strip (single row) rather than a two-row Trust strip, since KickOff has no customer logos and the industry-specific benchmarks are the real social proof.

Section 1 — Hero

H1: Find out if your business is ready for AI.

Sub-line: Score your governance across the 6 Essential Practices from the Australian Government's Guidance for AI Adoption. Quick Check in 5 minutes, or Full Preparation in 15.

Visual: lift og-image.svg from ~/development/future-process-guide/public/ as the hero banner. If the rendered visual is not hero-quality (e.g., text-heavy OG image, not a hero shot), fall back to a simple branded panel rendering the KickOff wordmark on a dark teal background as the layout banner. Implementer can decide after eyeballing the asset.

CTAs: - Primary: Run a free assessment → https://ai.base2services.com/ - Secondary: How base2 uses it → anchor #built-by-base2

Section 2 — Headline stat

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

Source: derived from the FAQ on ~/development/future-process-guide/src/pages/Index.tsx line 253: "A consultant charges $10-50K and takes 4-8 weeks. This gives you 80% of the answer in 5 minutes, for free."

Section 3 — What it does

Two capability blocks with mini-mockups, alternating image position. Mockups built inline in HAML/SCSS (no external images).

Block 1 — Readiness scored across 6 Essential Practices (copy left, mockup right)

Block 2 — Industry benchmarks + action plan (mockup left, copy right)

Section 4 — Built by base2Services

Brand-gravity moment. Visual treatment: dark base2 teal background with white text, mirroring the SC page. Anchor id built-by-base2.

H2: Built by base2Services.

Lead paragraph: KickOff was built so we could give every customer a clear, defensible answer to one question: are you ready for AI yet? We made it free so the answer doesn't depend on hiring us.

Body paragraph: base2Services is an AWS Advanced Consulting Partner specialising in AI implementation, platform engineering, and DevOps on AWS. KickOff is part of how we scope every AI engagement, not a side project. The same framework that scores you here is the one we use to plan delivery.

Visual: KickOff wordmark + base2Services logo + AWS Advanced Consulting Partner badge alongside.

Inline CTA: See how base2 builds AI → → /artificialintelligence/aifactory/

Section 5 — Industries strip

Replaces the SC page's Trust strip. KickOff has no customer logos; industry-specific benchmarks are the real social-proof signal.

Light grey panel between section 4 and the cross-sell. Single horizontal row.

Treatment: styled text labels for v1, dot-separated or in a row of small panels. Match the existing service-modern aesthetic. Adding industry icons is a follow-up improvement, not part of v1 scope — keeps the page shippable without sourcing or licensing icon imagery.

Section 6 — Cross-sell strip

H2: More than a score. (parallel to SC, builds the brand pattern across product pages)

Sub-line: KickOff tells you where you stand. base2's AI services build what comes next.

Two text-led cards in a 2-col grid. No background images.

Card 1 — AI Factory (left) - Body: Productised AI platform in your AWS environment. 60+ guardrails, MLOps, and the governance baked in. - Link: Learn more → → /artificialintelligence/aifactory/

Card 2 — Generative AI (right) - Body: Production-grade AI engagements on AWS. From scoped pilot to managed deployment. - Link: Learn more → → /artificialintelligence/generativeai/

Section 7 — Closing CTA

Treatment matches the SC page's closing CTA section (centred block, dark teal or aqua-tinted background). Reuse the same SCSS pattern.

H2: Take the assessment now.

Sub: Quick Check in 5 minutes, or Full Preparation in 15. Free, no account needed.

Primary CTA: Run a free assessment → https://ai.base2services.com/

Secondary inline links (smaller, beneath primary, dot-separated): - Talk to base2 → /contact/ - See base2's AI services → /artificialintelligence/aifactory/ - Why we built it → #built-by-base2

Voice and visual consistency

Page matches the existing service-modern design system and parallels the SecureCompass page. The same .product-securecompass-style page wrapper class (.product-kickoff for this page), the same SCSS organisation, the same section treatments and animations.

ASCII-only SCSS. No em-dashes in any HAML copy.

File structure

products/ kickoff/ index.html.haml # The page itself images/ products/ kickoff/ hero.svg # Lifted from future-process-guide/public/og-image.svg (or fallback) kickoff-logo.svg # If exportable from KickOffLogo.tsx; else use wordmark fallback scss/ site/ _kickoff.scss # New file, scoped to .product-kickoff

Page is intentionally inline (one big index.html.haml file), matching the SC pattern. The _kickoff.scss file mirrors the SC SCSS structure section by section so the two pages stay symmetric and maintenance is easy.

Sharing SCSS with the SecureCompass page

Since both pages share most of the same section patterns (hero CTAs, stat panel, capability blocks with mockups, dark Built-by section, cross-sell cards, closing CTA), some SCSS could be shared. Two options:

Option 1 — Each page has its own SCSS file (proposed default). _securecompass.scss and _kickoff.scss each carry a full set of section styles, scoped to their respective page-wrapper classes. Some duplication, but each page is self-contained and easy to evolve independently.

Option 2 — Extract a shared _product-page.scss with section patterns shared across all /products/* pages, plus thin per-page files for branding overrides. Less duplication but adds a layer of indirection and couples the two pages.

Decision: Option 1. Two pages do not justify a shared abstraction (rule of three). Revisit when a third product page lands.

Image and asset dependencies

No new customer logos or compliance badges to copy. The Industries strip uses text labels (or icons if available).

Out of scope

Open implementation decisions (deferred to plan)

Follow-on work