# Website Design Document

> **How to use this document:** Fill in every section below. Replace the `_[fill in]_` placeholders with your details and tick the checkboxes that apply. Anywhere you see **💡 Recommendation**, that's a suggested default — keep it, edit it, or replace it. The more detail you provide, the closer the final website will match your vision.

---

## 1. Project Snapshot

| Field | Your Answer |
|---|---|
| **Company name** | _[fill in]_ |
| **Legal entity name (if different)** | _[fill in]_ |
| **Primary domain** | _[e.g. acme.com]_ |
| **Working title for the project** | _[e.g. "Acme Website Redesign 2026"]_ |
| **Target launch date** | _[fill in]_ |
| **Budget range** | _[fill in]_ |
| **Document owner** | _[name + email]_ |
| **Last updated** | _[date]_ |

---

## 2. Company Overview

### 2.1 Who we are
- **What we do (one sentence):** _[fill in]_
- **Tagline / one-liner:** _[fill in]_
- **Elevator pitch (3–4 sentences):** _[fill in]_

### 2.2 Mission, vision, values
- **Mission:** _[Why we exist]_
- **Vision:** _[Where we're going]_
- **Core values:** _[List 3–6, e.g. Honesty, Craft, Speed]_

### 2.3 Company facts
- **Founded:** _[year]_
- **Headquarters:** _[city, country]_
- **Other offices / coverage areas:** _[fill in]_
- **Team size:** _[fill in]_
- **Industry / sector:** _[fill in]_
- **Stage:** _[ ] Pre-revenue   [ ] Early revenue   [ ] Growth   [ ] Established_

### 2.4 Our story
_Brief origin story — why the company was started, key milestones, what makes the journey notable. 100–250 words._

> _[fill in]_

### 2.5 Key milestones / achievements
- _[Milestone + year]_
- _[Award / press mention]_
- _[Notable client or partnership]_

---

## 3. Target Audience

### 3.1 Primary audience
- **Who they are:** _[e.g. operations managers at 50–500-person SaaS companies]_
- **Where they're based:** _[fill in]_
- **Age range:** _[fill in]_
- **Job titles / roles:** _[fill in]_
- **Industries:** _[fill in]_

### 3.2 Audience personas
Define 1–3 personas. Duplicate the block as needed.

**Persona 1 — _[name, e.g. "Ops Olivia"]_**
- Role / background: _[fill in]_
- Goals: _[What they want to achieve]_
- Pain points: _[What frustrates them today]_
- What they need from our site: _[e.g. proof we can scale, pricing clarity, a demo]_
- Triggers to convert: _[fill in]_

**Persona 2 — _[name]_**
- _[same fields]_

### 3.3 What we want visitors to do
Rank in priority order (1 = most important):
- [ ] Request a demo / consultation
- [ ] Buy a product or service
- [ ] Sign up for a free trial or newsletter
- [ ] Download a resource (whitepaper, case study)
- [ ] Contact sales
- [ ] Apply for a job
- [ ] Learn / build brand awareness
- [ ] Other: _[fill in]_

---

## 4. Goals, KPIs & Success Metrics

### 4.1 Business goals for this website
1. _[e.g. Generate 50 qualified leads per month]_
2. _[fill in]_
3. _[fill in]_

### 4.2 Measurable KPIs
| KPI | Current baseline | 6-month target |
|---|---|---|
| Monthly unique visitors | _[fill in]_ | _[fill in]_ |
| Conversion rate (visit → lead) | _[fill in]_ | _[fill in]_ |
| Average session duration | _[fill in]_ | _[fill in]_ |
| Demo / contact form submissions / month | _[fill in]_ | _[fill in]_ |
| Organic search traffic | _[fill in]_ | _[fill in]_ |

### 4.3 What "success" looks like 12 months after launch
> _[fill in]_

---

## 5. Competitor & Inspiration Landscape

### 5.1 Direct competitors
| Competitor | URL | What they do well | Where they fall short |
|---|---|---|---|
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |

### 5.2 Sites we love (any industry)
List 3–5 sites whose design, copy, or feel you admire. Note **why**.
- _[URL]_ — _[what you like: typography, color, motion, copywriting tone, layout, etc.]_
- _[URL]_ — _[why]_
- _[URL]_ — _[why]_

### 5.3 Sites we want to look nothing like
- _[URL]_ — _[why not]_

### 5.4 Our differentiators
What makes us genuinely different / better? Be specific.
1. _[fill in]_
2. _[fill in]_
3. _[fill in]_

---

## 6. Products & Services

For each offering, fill in the block. Duplicate as needed.

### Offering 1 — _[name]_
- **What it is:** _[fill in]_
- **Who it's for:** _[fill in]_
- **Key benefits (3–5):** _[fill in]_
- **Features / what's included:** _[fill in]_
- **Pricing model:** _[ ] Fixed   [ ] Tiered   [ ] Custom quote   [ ] Hidden until contact_
- **Price points (if shown):** _[fill in]_
- **Primary CTA:** _[e.g. "Book a demo", "Get a quote"]_
- **Supporting proof:** _[case studies, stats, testimonials to attach]_

### Offering 2 — _[name]_
_[same fields]_

---

## 7. Brand Identity

### 7.1 Logo
- [ ] We have a finalized logo (attach: _[file path / link]_)
- [ ] We have a logo but it needs cleanup
- [ ] We need a logo designed

### 7.2 Color palette
List hex codes. If you don't have a palette yet, describe the mood and we'll propose one.

| Role | Color | Hex | Notes |
|---|---|---|---|
| Primary | _[e.g. Deep blue]_ | `#______` | Used for CTAs, links |
| Secondary | _[fill in]_ | `#______` | _[fill in]_ |
| Accent | _[fill in]_ | `#______` | Used sparingly for emphasis |
| Neutral dark | _[fill in]_ | `#______` | Body text |
| Neutral light | _[fill in]_ | `#______` | Backgrounds |
| Success / Warning / Error | _[fill in]_ | `#______` | UI states |

> **💡 Recommendation:** Pick one primary brand color, one accent, and a neutral scale (5–7 grays). Avoid more than 3 saturated colors — it gets noisy fast.

### 7.3 Typography
- **Heading font:** _[e.g. Inter / Custom / "open to suggestion"]_
- **Body font:** _[fill in]_
- **Monospace (if used):** _[fill in]_

> **💡 Recommendation:** Use a pairing like **Inter** (headings + body) or **Fraunces + Inter** (editorial feel + clean body). Both are free, web-optimized, and load fast.

### 7.4 Imagery & illustration style
- [ ] Photography — real, candid people in our offices
- [ ] Photography — stock (specify style: _[bright & airy / moody / corporate / lifestyle]_)
- [ ] Custom illustration (style: _[fill in]_)
- [ ] 3D renders
- [ ] Icon-led, minimal imagery
- [ ] Mix — describe: _[fill in]_

### 7.5 Voice & tone
Pick 3–5 adjectives that describe how we sound:
- [ ] Authoritative   [ ] Friendly   [ ] Playful   [ ] Technical   [ ] Aspirational
- [ ] Witty   [ ] Calm   [ ] Direct   [ ] Warm   [ ] Bold
- Other: _[fill in]_

**Example phrases we'd say:**
> _[2–3 sample sentences in our voice]_

**Example phrases we'd never say:**
> _[fill in]_

### 7.6 Existing brand assets
- [ ] Brand guidelines doc — link: _[fill in]_
- [ ] Logo files (SVG / PNG)
- [ ] Photography library
- [ ] Existing website copy worth keeping

---

## 8. Site Structure (Information Architecture)

### 8.1 Sitemap
Tick the pages you want. Add custom ones at the bottom.

- [ ] **Home**
- [ ] **About** — story, team, values
  - [ ] Team / Leadership sub-page
  - [ ] Careers sub-page
- [ ] **Services** / **Products** — overview
  - [ ] Individual service / product pages (one per offering)
- [ ] **Case Studies** / **Work** / **Portfolio**
  - [ ] Individual case study pages
- [ ] **Pricing**
- [ ] **Blog** / **Resources** / **Insights**
  - [ ] Article template
  - [ ] Category pages
- [ ] **FAQ**
- [ ] **Contact**
- [ ] **Book a demo** / **Get a quote** (landing page)
- [ ] **Press / News**
- [ ] **Partners**
- [ ] **404 page**
- [ ] **Thank-you pages** (post-form)
- [ ] **Privacy Policy** _(required)_
- [ ] **Terms of Service** _(required)_
- [ ] **Cookie Policy** _(if EU/UK visitors)_
- Custom: _[fill in]_

### 8.2 Primary navigation
List the top-nav items in order:
1. _[fill in]_
2. _[fill in]_
3. _[fill in]_
4. _[fill in]_
5. **CTA button** — label: _[e.g. "Book a demo"]_

### 8.3 Footer
- [ ] Mini sitemap
- [ ] Contact info (address, phone, email)
- [ ] Social links: _[which platforms]_
- [ ] Newsletter signup
- [ ] Legal links (Privacy, Terms, Cookies)
- [ ] Company registration number / VAT (if required)
- [ ] Industry certifications / logos

---

## 9. Page-by-Page Content Brief

### 9.1 Home
- **Hero headline (max 10 words):** _[fill in]_
- **Hero sub-headline (1–2 sentences):** _[fill in]_
- **Primary CTA:** _[label + destination]_
- **Secondary CTA:** _[label + destination]_
- **Sections to include (in order):**
  - [ ] Hero with visual
  - [ ] Social proof bar (client logos / press)
  - [ ] What we do (3–4 service highlights)
  - [ ] How it works / process
  - [ ] Why us / differentiators
  - [ ] Featured case study or proof point
  - [ ] Testimonials
  - [ ] Stats / metrics
  - [ ] Recent blog posts
  - [ ] Final CTA block
- **Key visuals needed:** _[fill in]_

### 9.2 About
- Origin story: _[link to §2.4 or expand here]_
- Team intro: _[ ] full team grid   [ ] leadership only   [ ] no photos_
- Values block: _[link to §2.2]_
- Office / culture photos: _[ ] yes   [ ] no_
- Press / awards row: _[ ] yes   [ ] no_

### 9.3 Services / Products
For each offering, one page with:
- Hero with the offering name + one-liner
- The problem it solves
- How it works (steps or features)
- What's included
- Pricing or "request a quote"
- FAQs specific to this offering
- CTA

### 9.4 Case Studies / Work
- Number of case studies at launch: _[fill in]_
- Template per case study:
  - Client + industry
  - Challenge (the problem)
  - Approach (what we did)
  - Outcome (metrics, quotes)
  - Visuals: _[before/after, screenshots, photos]_

### 9.5 Pricing _(if applicable)_
- [ ] Show full pricing
- [ ] Show tiers, hide exact numbers
- [ ] "Contact us" only
- Tiers: _[list each tier with price + what's included]_
- Add-ons: _[fill in]_

### 9.6 Blog / Resources
- Launch with how many posts? _[fill in]_
- Categories: _[fill in]_
- Authors shown? _[ ] yes   [ ] no_
- Comments enabled? _[ ] yes   [ ] no_
- Newsletter signup on every post? _[ ] yes   [ ] no_

### 9.7 Contact
- [ ] Contact form (fields: _[name, email, company, message, ...]_)
- [ ] Direct email
- [ ] Phone number
- [ ] Physical address + map
- [ ] Office hours
- [ ] Calendly / booking link
- [ ] Live chat widget

### 9.8 Other pages
_[Add custom briefs as needed]_

---

## 10. Features & Functionality

Tick everything the site needs:

**Lead capture & forms**
- [ ] Contact form
- [ ] Demo request form
- [ ] Quote / estimate form
- [ ] Newsletter signup
- [ ] Gated content (downloads behind email)
- [ ] Multi-step / progressive forms

**Content & engagement**
- [ ] Blog with categories & tags
- [ ] Search
- [ ] Filtering on listings (case studies, blog)
- [ ] Comments
- [ ] Social share buttons
- [ ] RSS feed

**Booking & scheduling**
- [ ] Calendly / Cal.com embed
- [ ] Custom booking flow
- [ ] Event RSVPs

**Commerce / payments**
- [ ] One-off product checkout
- [ ] Subscription billing (Stripe)
- [ ] Invoice / quote generation

**Authentication / portal**
- [ ] Client login area
- [ ] Account dashboard
- [ ] File / document sharing

**Interactivity**
- [ ] Animations / scroll effects
- [ ] Video backgrounds
- [ ] Interactive product tour
- [ ] Calculator / configurator
- [ ] Live chat (Intercom / Crisp / HubSpot)
- [ ] Chatbot (AI / rules-based)

**Localization**
- [ ] Multi-language: _[which languages]_
- [ ] Multi-currency
- [ ] Region-aware content

**Other:** _[fill in]_

---

## 11. Design Direction

### 11.1 Mood
Pick the words that fit. Strike through ones that don't.
Minimalist · Bold · Elegant · Playful · Editorial · Corporate · Warm · Futuristic · Premium · Approachable · Technical · Human · Spacious · Dense · Quiet · Energetic

**Top 3 for our brand:** _[fill in]_

### 11.2 Layout preferences
- **Density:** _[ ] Spacious / lots of whitespace   [ ] Balanced   [ ] Dense / information-rich_
- **Width:** _[ ] Full-bleed / edge-to-edge   [ ] Contained (max ~1200–1400px)_
- **Page rhythm:** _[ ] One idea per scroll-section   [ ] Multi-column / magazine-style_

### 11.3 Motion & interactivity
- [ ] No motion — fast and static
- [ ] Subtle (fade-ins, hover states)
- [ ] Moderate (scroll-triggered reveals, parallax)
- [ ] Rich (custom animations, WebGL, video)

### 11.4 Devices to prioritize
- [ ] Mobile-first (most traffic on phones)
- [ ] Desktop-first (B2B sales context)
- [ ] Equal weight
- **Browser support:** _[modern evergreen / IE11 / specify]_

---

## 12. Tech Stack

### 12.1 Frontend framework
- [ ] **Next.js (React)** — 💡 Recommended for marketing sites that need flexibility, blog, and excellent SEO
- [ ] **Astro** — 💡 Recommended for content-heavy, mostly-static sites; fastest performance
- [ ] **SvelteKit** — modern, lean, great DX
- [ ] **Plain HTML/CSS/JS** — simplest, for very small sites
- [ ] Other: _[fill in]_

### 12.2 Styling
- [ ] **Tailwind CSS** — 💡 Recommended, fastest to iterate
- [ ] CSS Modules
- [ ] Styled Components / Emotion
- [ ] Vanilla CSS
- [ ] Other: _[fill in]_

### 12.3 CMS / Content management
Where will marketing edit content?
- [ ] **Sanity** — 💡 Recommended; flexible schemas, great editor UX
- [ ] **Contentful** — enterprise-friendly, more expensive
- [ ] **Strapi** — self-hosted, open source
- [ ] **WordPress (headless)** — familiar editor, huge ecosystem
- [ ] **Markdown in the repo** — for tech-savvy teams, no CMS overhead
- [ ] **Notion as CMS** — easy for non-technical teams
- [ ] No CMS — developers update content directly
- [ ] Other: _[fill in]_

### 12.4 Hosting & deployment
- [ ] **Vercel** — 💡 Recommended for Next.js; preview URLs, zero config
- [ ] **Netlify** — great for Astro / static sites
- [ ] **Cloudflare Pages** — fast, generous free tier
- [ ] AWS / GCP / Azure — if existing cloud commitments
- [ ] Other: _[fill in]_

### 12.5 Domain & DNS
- **Existing domain:** _[fill in]_
- **Registrar:** _[fill in]_
- **DNS provider:** _[ ] Same as registrar   [ ] Cloudflare   [ ] Other_
- **Email hosting:** _[Google Workspace / Microsoft 365 / other]_

### 12.6 Forms backend
- [ ] **HubSpot Forms** — if using HubSpot CRM
- [ ] **Formspree / Basin** — simple email-based handling
- [ ] **Custom API + database**
- [ ] CMS-native (Sanity, etc.)

### 12.7 Repository & CI
- **Code host:** _[ ] GitHub   [ ] GitLab   [ ] Bitbucket_
- **CI/CD:** _[ ] Vercel/Netlify built-in   [ ] GitHub Actions   [ ] Other_

---

## 13. Integrations

Tick everything that needs to talk to the website.

**Analytics & attribution**
- [ ] Google Analytics 4
- [ ] Plausible / Fathom (privacy-friendly) — 💡 Recommended if GDPR matters
- [ ] PostHog (product analytics)
- [ ] Hotjar / Microsoft Clarity (heatmaps & recordings)

**Marketing & CRM**
- [ ] HubSpot
- [ ] Salesforce
- [ ] Pipedrive
- [ ] Mailchimp / ConvertKit / Beehiiv (newsletter)
- [ ] Customer.io / Klaviyo

**Communication**
- [ ] Slack notifications on form submits
- [ ] Intercom / Crisp / HelpScout (live chat / helpdesk)

**Booking & payments**
- [ ] Calendly / Cal.com
- [ ] Stripe
- [ ] PayPal

**Other**
- [ ] Algolia / Meilisearch (search)
- [ ] Tag manager (GTM)
- [ ] reCAPTCHA / Turnstile (form spam)
- Custom API: _[fill in]_

---

## 14. SEO & Content Strategy

### 14.1 Target keywords
List 5–15 keywords / phrases you want to rank for.
1. _[fill in]_
2. _[fill in]_
3. _[fill in]_

### 14.2 Per-page meta
We'll fill these per page during build, but flag any **must-have** titles or descriptions here.
- _[fill in]_

### 14.3 Structured data
- [ ] Organization schema
- [ ] LocalBusiness schema (if relevant)
- [ ] Article schema (blog)
- [ ] FAQ schema
- [ ] Product / Service schema
- [ ] BreadcrumbList

### 14.4 Redirects / migration
If replacing an existing site:
- [ ] Old sitemap to preserve: _[link]_
- [ ] 301 redirect map needed: _[ ] yes   [ ] no_
- [ ] URL structure changing? _[fill in]_

### 14.5 Content production
- Who writes the copy? _[ ] We will   [ ] You / your team   [ ] External copywriter_
- Who edits the blog post-launch? _[fill in]_
- Cadence: _[posts per month]_

---

## 15. Accessibility, Compliance & Legal

### 15.1 Accessibility
- [ ] WCAG 2.1 **AA** target — 💡 Recommended baseline
- [ ] WCAG 2.1 AAA (stricter, for public-sector / health)
- [ ] No specific target

### 15.2 Privacy & data
- **Visitors from EU/UK?** _[ ] yes   [ ] no_  → if yes, GDPR applies
- **Visitors from California?** _[ ] yes   [ ] no_  → if yes, CCPA applies
- [ ] Cookie consent banner needed
- [ ] Privacy policy already exists — link: _[fill in]_
- [ ] Need privacy policy written
- [ ] Terms of service already exists — link: _[fill in]_
- [ ] Need ToS written
- **Data controller / DPO contact:** _[fill in]_

### 15.3 Industry-specific
- [ ] Healthcare (HIPAA) — _[fill in]_
- [ ] Finance / banking — _[fill in]_
- [ ] Children's products (COPPA)
- [ ] Other regulated: _[fill in]_

---

## 16. Performance & Quality Bar

### 16.1 Performance targets
- [ ] **Lighthouse score 90+** on mobile (performance, accessibility, SEO) — 💡 Recommended
- [ ] **LCP < 2.5s**, **CLS < 0.1**, **INP < 200ms** (Core Web Vitals "good")
- [ ] Page weight under _[e.g. 1 MB]_ on landing pages

### 16.2 Browser support
- Modern Chrome / Safari / Firefox / Edge (last 2 versions) — 💡 Recommended default
- [ ] Need IE11 / older support: _[describe]_

### 16.3 Quality assurance
- [ ] Cross-browser testing
- [ ] Mobile device testing (iOS Safari, Android Chrome)
- [ ] Accessibility audit (manual + automated)
- [ ] Performance audit (Lighthouse + WebPageTest)
- [ ] SEO audit pre-launch

---

## 17. Timeline & Milestones

| Milestone | Target date | Owner |
|---|---|---|
| Design document signed off | _[date]_ | _[name]_ |
| Wireframes approved | _[date]_ | _[name]_ |
| Visual designs approved | _[date]_ | _[name]_ |
| Content delivered | _[date]_ | _[name]_ |
| Development complete | _[date]_ | _[name]_ |
| QA / UAT | _[date]_ | _[name]_ |
| Soft launch / staging review | _[date]_ | _[name]_ |
| **Public launch** | _[date]_ | _[name]_ |

---

## 18. Budget

| Bucket | Estimate |
|---|---|
| Design | _[fill in]_ |
| Development | _[fill in]_ |
| Copywriting | _[fill in]_ |
| Photography / illustration | _[fill in]_ |
| CMS / hosting / SaaS (annual) | _[fill in]_ |
| Contingency (10–15%) | _[fill in]_ |
| **Total** | _[fill in]_ |

---

## 19. Post-Launch: Maintenance & Growth

### 19.1 Ownership after launch
- **Day-to-day content edits:** _[name / role]_
- **Bug fixes & dev support:** _[fill in]_
- **Hosting & DNS:** _[fill in]_

### 19.2 Ongoing work
- [ ] Monthly performance / analytics review
- [ ] Quarterly content refresh
- [ ] Annual design review
- [ ] SEO / content marketing retainer
- [ ] Paid acquisition (landing pages)

### 19.3 Roadmap (post-launch features)
Things we know we want but aren't launching with:
1. _[fill in]_
2. _[fill in]_
3. _[fill in]_

---

## 20. Stakeholders & Approvals

| Name | Role | Email | Sign-off needed on |
|---|---|---|---|
| _[fill in]_ | Project sponsor | _[fill in]_ | Final launch |
| _[fill in]_ | Marketing lead | _[fill in]_ | Copy, design |
| _[fill in]_ | Tech lead | _[fill in]_ | Stack, integrations |
| _[fill in]_ | Legal / compliance | _[fill in]_ | Privacy, ToS |
| _[fill in]_ | Design lead | _[fill in]_ | Visual direction |

---

## 21. Open Questions & Risks

Track anything unresolved here so it doesn't get lost.

- [ ] _[Question or risk]_ — owner: _[name]_ — due: _[date]_
- [ ] _[fill in]_
- [ ] _[fill in]_

---

## 22. Appendix: Asset Checklist

Before development starts, gather these:
- [ ] Logo (SVG + PNG, light + dark variants)
- [ ] Brand guidelines (if any)
- [ ] High-res photography (team, office, product)
- [ ] Client logos (for social proof bar) — with permission to use
- [ ] Testimonial quotes — with permission and attribution
- [ ] Case study source material
- [ ] Existing copy worth keeping
- [ ] Press logos / awards / certifications
- [ ] Video / motion assets
- [ ] Founder / team bios + headshots
- [ ] Social media handles & links
- [ ] Office address, phone, support email

---

_End of document. Once every section above is filled in, this is everything needed to design, build, and launch the website._
