ilia
94c49d43e7
Add a problem-first "sound familiar?" section, rework the hero and terminal signature to lead with business outcomes instead of tool names, add an FAQ for people who can't name their problem yet, and add an email-capture form (Listmonk) for visitors who aren't ready to book a call. Design decisions recorded in docs/design-brief-smb-refresh.md.
2.6 KiB
Design brief — SMB-owner refresh (2026-07-25)
Written against the frontend-design skill's two-pass process (brainstorm → critique → build) before touching index.html.
Brief
- Subject: AutoBank — automation and AI-enablement consulting, currently pitched as dev-to-dev.
- Audience shift: small/medium business owners and operators who haven't identified their manual work as an "automation problem" yet. Not engineers. Don't know n8n, CI/CD, or webhooks, and don't need to.
- Page's one job: get them to book the free 15-min call. Secondary job: capture an email from visitors who read but aren't ready to book.
Token system (existing — kept)
- Color:
#0c0c0cbg,#33ff33accent (phosphor green),#c8e6c8ink,#9fdf9fink-soft,#ffb86bwarn,#ff6b8adanger. - Type: JetBrains Mono (display/headings) + Inter (body).
- Layout: hero → proof strip → sections, terminal-window signature element in the hero.
Critique
The skill's own calibration list flags "a near-black background with a single bright acid-green accent" as one of three generic AI-default looks. This site's palette sits close to that description. Two things argue against a full re-skin anyway:
- The brief here (
AutoBank, a banking/ledger pun run through an automation console) actually earns the terminal aesthetic — it's not an arbitrary default, it's the name made literal. Re-skinning to a warmer, "friendlier" palette to chase approachability would trade a justified signature for a different generic default (the cream/terracotta look the skill also warns about). - The actual audience-mismatch problem isn't the visual language, it's what the signature demonstrates. A green terminal that scrolls tool names (
Connecting Gmail, Slack, Notion, HubSpot, Stripe…) reads as "built by an engineer, for engineers." A green terminal that scrolls business outcomes (Invoice follow-ups: automated. Saved: 6 hrs/week.) reads as "built by an engineer, for you" — same signature, same tokens, different content.
Decision: keep the token system and the terminal signature unchanged. Change what the terminal narrates (business outcomes, not tool names), add a problem-first section ahead of the tool-driven "What I build" grid, and rewrite the hero lede so pain points precede jargon. Jargon (n8n, CI/CD, webhooks) stays — it's credibility signal for technical readers who do land here — but it's demoted out of the first screen, per the brief.
Copy pass
Rewritten copy ran through the humanizer skill (file mode) before commit: no em dashes reintroduced, no rule-of-three padding, no "not just X, it's Y" constructions, active voice on CTAs.