Most “business & consulting” themes look great in screenshots but stall when you try to wire them to real content, real performance budgets, and a team of non-engineers. I rebuilt two consulting sites and a boutique agency homepage around Doob with a developer-first cadence: tokens before vibes, patterns over pixels, and a one-hour draft ritual that marketers can run without breaking the grid. This playbook is the working note I hand to collaborators so we can ship pages that sell services and still pass audits.
What a consulting site actually has to do (beyond “look clean”)
- Clarify offers in one scroll: who we help, which problems we solve, what outcomes we promise.
- Navigate painlessly: three clicks max from homepage → service → proof → contact.
- Survive mobile first: short headlines, stable hero, readable pricing blocks.
- Prove credibility with concise case tiles and one measured metric per story.
- Stay fast under a builder: predictable LCP, no layout jumps, sane script budget.
- Enable iteration by non-engineers, without style drift.
Page grammar I use with Doob
- Sections: Hero / Value props / Proof / Offer ladder / Process / CTA
- Rows: 1–3 columns, locked to a 12-column mental model
- Modules: text, media, quote, stats, CTA, FAQ, form
Rule: copy changes freely, layout changes by library patterns only. This keeps pages consistent and diff-friendly.
Token set (write once, reuse everywhere)
- Spacing: 24 / 32 / 48 / 72 vertical rhythm
- Type: H1 40/48, H2 32/40, H3 24/32, body 16/28
- Color: brand / accent / neutral-high / neutral-low
- Radius: 8 for cards, 24 for heroes
- Shadow: subtle for cards, none for lists
- Button: solid accent primary, text secondary
Save these in the theme presets so new blocks inherit them. Drift becomes obvious.
The one-hour landing page ritual
0–10 min — Skeleton
- Drop five Sections from the library (Hero, Value prop trio, Proof, Offer ladder, CTA).
- Keep lorem for copy; confirm grid and rhythm.
10–25 min — Copy pass
- H1: outcome in one breath.
- H2/H3: verbs + objects; avoid filler adjectives.
- Value props: 2-word label + 12-word line each.
- CTA: outcome-labeled (“Book a discovery call”).
25–40 min — Media & proof
- Replace hero with a static poster (no autoplay).
- Add 6–9 logos or 2 short testimonials (≤ 20 words).
- One case tile with a single believable metric.
40–50 min — Mobile & polish
- Tighten lines, shorten buttons, trim ornaments.
50–60 min — Performance & a11y
- Intrinsic sizes for images; lazy-load below the fold.
- Contrast check; focus rings visible; labels on inputs.
Ship the draft. Iterate later.
Information architecture for service sites
- Homepage → 3 key offers + 1 anchor case; one CTA.
- Service (one URL per problem): promise, proof, process, pricing model, CTA.
- Case study: context → intervention → outcome; single metric; timeline; CTA.
- About: positioning statement + team tiles; no bios longer than 80 words.
- Contact: 4 fields max; response time promise; alternate channel for urgent.
Breadcrumbs optional; top-nav with ≤ 6 items is usually enough.
Offer ladder (how to productize consulting)
1) Audit (fixed scope, fast turn)
2) Pilot (time-boxed, outcome-bounded)
3) Retainer (cadence + artifacts)
4) Training (repeatable workshop)
Each ladder rung has its own page section with scope, deliverables, timeline, and one measured outcome. Doob’s cards and pricing tables map cleanly to this structure.
Proof that fits a scroll
- Logo wall: monochrome, single line weight.
- Case micro-tile: client archetype, problem, one metric, one sentence of “how.”
- Quote: 12–20 words, role + initials; link to full case only if it adds clarity.
- Badge: one certification or NPS figure, not five.
Pricing that doesn’t scare buyers
- Display ranges or starting points; avoid “contact us for pricing” on commodity work.
- For retainers, say cadence (“biweekly working session + async review”).
- Anchor each price with deliverables; never sell a bucket of hours.
Forms that get completed
- Fields: name, email, project type, message (or goal).
- Success page states next step and response window.
- Turn off captcha for the first submit; challenge only on suspicious patterns.
- Provide a secondary channel (calendar link or phone window) for urgent cases.
Performance guardrails (theme + builder)
- Hero: static image ≤ 180 KB; H1 above the fold; avoid video autoplay.
- CLS: set width/height or aspect-ratio on media; no late layout shifts.
- Scripts: remove counters and novelty modules; load only what’s used.
- Fonts: system stack or one hosted family with display-swap.
- Images: WebP where possible; compress; define sizes in markup.
- Lighthouse sanity: fix the top three issues; don’t chase 100 for vanity.
Accessibility hygiene (also improves conversions)
- Labels outside inputs; descriptive button text.
- Color contrast AA+ for text on brand areas.
- Keyboard navigation works; visible focus states.
- Reduced-motion media queries respected.
Editing workflow (so non-engineers can help without chaos)
- Roles: creators edit copy/media; maintainers edit layout/styles.
- Notes: add “editor notes” blocks hidden on publish to explain guardrails.
- Cloning: new page = clone approved template; never start blank.
- Friday grid review: view new pages as thumbnails; fix spacing and type drift.
Reusable blocks library (Doob-friendly)
- Hero variants: centered, split, poster + CTA
- Value prop trio: icon + 2-line copy
- Proof: logo wall, case micro-tile, quote
- Offer ladder: 3-step with CTA per card
- Process: 4-step timeline with verbs
- FAQ: 6 items, short answers
- CTA: solid primary + reassurance line
Save presets; version them just like code.
Copy patterns that ship
- Headlines: “Verb + object + constraint” → “Cut reporting time from hours to minutes.”
- Bullets: one benefit per line; no subordinate clauses.
- CTAs: outcome-named (“Get the audit plan”).
- Case metrics: one number, one timeframe, one context.
Case study template (fits one screen, expands if needed)
- Context: who, industry, constraints
- Bottleneck: the friction that mattered
- Intervention: 3 concrete moves
- Outcome: one metric + confidence note
- Screenshot: one annotated visual
- CTA: “Ask for the same playbook”
Migration notes (switching from an older theme)
- Freeze URLs first; set 301s for any slug changes.
- Rebuild top 3 pages in the new grammar; don’t mass-convert.
- Map old modules to new blocks; remove decorative dead weight.
- Measure before/after vitals and conversion; roll out in slices.
Content cadence (keeps the site fresh without bloat)
- Monthly: 1 case, 1 how-to article, 1 teardown.
- Quarterly: update offer pages with new FAQ or proof.
- Semiannual: audit navigation and hero copy.
Pre-launch checklist (short, ruthless)
- Headlines promise outcomes; subheads give context.
- H1/H2 length tested on mobile.
- Proof exists above the fold (logos or metric).
- Primary CTA visible, scannable, and specific.
- Forms work; success message says what happens next.
- Page passes basic performance and a11y checks.
FAQ (the things clients ask)
Do we need a blog to rank?
Not always. Strong service pages + a handful of detailed cases go a long way. Add articles when you have repeatable insights.
How many templates should we keep?
Four to six: homepage, service, case, about, article, landing. More templates = more drift.
What about multilingual?
Mirror structure; keep tokens the same; translate proof carefully (metrics and roles).
Can we hand this to a junior PM?
Yes—after a 30-minute walkthrough of tokens, patterns, and the one-hour ritual.
If I started tomorrow
- Define tokens first; save them as presets.
- Ship one approved pattern set; clone it for new pages.
- Keep offers productized; write outcomes, not features.
- Review in a grid every Friday; fix drift early.
- Optimize the top three performance issues, then move on.
— gplpal
Top comments (0)