rising-web/design-document.md

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.