How Greenlight IT was made

Concept

Greenlight IT is the status LED every business wants to see: all systems green. The audience is the practice manager whose server closet nobody understands, the 12-person engineering firm sick of pay-by-the-hour surprises, the accountant who cannot afford a down day in tax season. The page has one job — book a free IT health check — and it sells uptime, not dread: zero hoodie-hacker clichés, zero fear-mongering, competence as quiet as a well-run network.

Conversion decisions

• The Plan Builder shares the fold with the hero. Managed IT's biggest sales objection is opaque pricing, so the signature is the pricing made transparent — a live status wall plus an honest monthly card, visible in the first 750px at 1200 wide (asserted in the hardening pass, bounding-box top at 128px).
• Two CTAs, one job. "Book a free IT health check" leads everywhere (header, hero, builder card, sticky bar); the call link is the secondary path because IT enquiries are considered purchases, not emergencies — the reverse of the towing site in this wave.
• Builder → form handoff. "Book a health check with this plan" copies the configured scenario (seats, plan, add-ons, monthly figure) into the enquiry, fills the seat count, and drafts the message — the demo interaction becomes a warmer lead.
• Form fields: name, phone, suburb, seat count, and one free-text "what's not working". Seat count is the one qualifying fact an MSP needs before the first call; everything else waits for the health check. All five validate locally with per-field messages; the confirmation is a designed local state that says plainly nothing was sent.
• Honest clamps as sales copy. The stepper refuses to go below 5 seats and says why ("under that, ad-hoc at $150/hr is the honest answer") — the disabled control is the trust signal.

Palette — NOC-morning green

Argued from a monitoring wall in an office with actual windows. The bright uptime green is a LINE/MARK token only — LEDs, spark-lines, the CTA surface — never body text; two darker greens were derived for type and buttons per the collection's ink/line split.

Type

• Sora (display) — a technical geometric with warmth; the masthead and headings. The hero's green clause is the one typographic flourish.
• Albert Sans (body, UI) — plain-spoken and legible at 16.5px; the workhorse.
• JetBrains Mono (statuses, counts, prices) — every number on the page is set in mono, so the pricing reads like telemetry: measured, not marketed.

Techniques — the Plan Builder status wall

Everything is procedural: no raster images, no canvas, no rAF loop — the page is SVG, CSS gradients and CSS animation only, calm on a 4G phone. The status wall is a single SVG rebuilt from state on every interaction: the tile grid's column count is computed from the device total (seats + VoIP handsets) to roughly fill a 16:9 field, each seat tile gets a green LED and a CPU spark-line whose points are seeded deterministically from the tile index (so the wall is stable frame to frame), and handset tiles render in signal blue. The spark-line flow is a CSS stroke-dashoffset animation applied to an inner <polyline> whose geometry lives in attributes the CSS never touches — positions stay on outer <g transform> groups, per the collection's SVG-attribute-vs-CSS rule. The nightly-backup toggle draws a marching dashed ring around the wall; the security bundle raises a pulsing shield whose opacity floors at 0.6, so the signature never reads dead at any capture instant. Reduced motion stops every loop and leaves the wall fully rendered and priced.

The Perth service-area map is hand-drawn SVG: coastline, Swan River, and fourteen named suburbs rendered as status nodes linked back to the Subiaco hub — the NOC metaphor carried into geography.

Pricing model — shape and derivations

The model is deliberately flat: a per-user rate that does not taper with seat count. That flatness is the product ("one flat line, every month") — volume pricing at 50+ seats is a real-client conversation, and the stepper says so at its ceiling. All anchors below are the spec's pinned figures; the builder computes seats × rate + add-ons and nothing else.

Item	Anchor
Essentials — helpdesk, patching, monitoring, AV (min 5 seats)	$65/user/mo
Managed — + EDR, M365 management, quarterly vCIO (min 5 seats)	$110/user/mo
Microsoft 365 backup	+$6/user/mo
Security bundle — MFA, phishing sim, dark-web monitoring	+$18/user/mo
Managed VoIP (own handset count, defaults to seats)	$30/handset/mo
Ad-hoc support (min 1 hr)	$150/hr
Microsoft 365 migration	from $1,600
Security audit & baseline	from $950

Measured worked examples (from the running page, verified against an independently reimplemented oracle in the QA harness):

• Rest state: 12 seats, Managed, M365 backup ON → 12 × $110 = $1,320 plan line + 12 × $6 = $72 → $1,392/month total, $110/user plan rate, $116/user all-in.
• Cheapest output: 5 seats, Essentials, no add-ons → 5 × $65 = $325/month — equal to the services grid's "from $65/user/month" floor, per-user figure $65 exactly (floor contract holds).
• Driven scenario: 20 seats, Managed + backup + security + VoIP (20 handsets) → 20 × ($110+$6+$18) + 20 × $30 = $3,280/month; handsets stepped to 8 → $2,920/month.

Local SEO we'd implement for the real business

This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real client we'd ship LocalBusiness + Review schema fed by their actual details and live review stream:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Greenlight IT",
  "description": "Managed IT support for small business — Subiaco and Perth metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "url": "https://www.example.com.au",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Suite X, XX Example St",
    "addressLocality": "Subiaco",
    "addressRegion": "WA",
    "postalCode": "6008",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.95, "longitude": 115.82 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:30", "closes": "18:00"
  }],
  "areaServed": ["Subiaco","West Perth","Perth","Leederville","Nedlands","Osborne Park"],
  "priceRange": "$$",
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real client name" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live review feed, never hand-typed."
  }]
}
</script>

What would change for the real client

• HaloPSA — the health-check form books straight into ticketing, with the Plan Builder scenario attached to the opportunity; contracts and per-seat billing live there too.
• NinjaOne RMM — the status wall stops being a metaphor: real device counts, real patch status, a client-facing "how green are we" widget fed from monitoring.
• Microsoft 365 CSP portal — licence counts sync so the per-user figure on the site always matches the invoice.
• IT Glue — documentation behind the "server closet is a photo on my phone" promise.
• 3CX — the managed VoIP add-on wired to real handset provisioning and porting.
• Xero — recurring monthly invoicing matching the builder's line items exactly.
• Podium — the review strip becomes a live feed with genuine attribution, and the schema above goes live.
• Plus their real photos of the actual team (procedural art carries the demo; faces close managed-service deals), their licence and insurance numbers, and a booking calendar on the health check.

Iteration log