Skip to main content

Web Design Project Delivery Workflow

This guide documents the complete client project lifecycle — from initial inquiry to handoff and maintenance — specifically for code-first web designers using CSS + AI + WordPress. Use this as your operating procedure for every client engagement.

1. Project Stages Overview​

Stage 1: Discovery     → Understand what the client actually needs
Stage 2: Scoping       → Define deliverables, timeline, and price
Stage 3: Design        → Establish design direction and approval
Stage 4: Development   → Build HTML + CSS + WordPress
Stage 5: Review        → Client review and revisions
Stage 6: Launch        → Deploy, test, go live
Stage 7: Handoff       → Documentation and training
Stage 8: Maintenance   → Ongoing retainer or support

2. Stage 1: Discovery — Client Intake​

Questions to Ask Every Client​

Business Questions:
□ What does your business do?
□ Who is your target customer? (age, tech-savvy, mobile/desktop user?)
□ What action should the website make visitors take?
□ Who are your main competitors? Share 2–3 URLs.
□ What do you like and dislike about your current site?

Design Questions:
□ Share 3 websites you like — what do you like about each?
□ Do you have brand guidelines? (logo, colors, fonts)
□ Do you prefer dark or light design?
□ Any design styles you specifically DON'T want?
□ Any colors that must or must never be used?

Technical Questions:
□ Does the site need a blog / news section?
□ Does the site sell products? (eCommerce — expect more complexity)
□ Do you need contact forms? How many?
□ Do you need a booking / appointment system?
□ Will YOU be updating the content? (affects CMS choice and complexity)
□ Do you have hosting already? Is it WordPress-compatible?
□ Do you need SEO setup?

Content Questions:
□ Do you have a copywriter or do you provide the text?
□ Do you have photos / images or need stock photography sourced?
□ How many pages do you need?
□ Target launch date?

Red Flags to Note​

⚠ "I want something like Apple's website" → unrealistic budget expectation
⚠ "My nephew said it should cost $200" → education needed on pricing
⚠ "I need it done in 2 days" → rush fee or decline
⚠ "I'll know what I want when I see it" → needs more discovery upfront
⚠ "Can you just copy this other site?" → explain IP + what you recreate vs copy
⚠ "I'll give you the content later" → content delay = project delay (get in writing)

3. Stage 2: Scoping — Define and Price the Project​

The Project Scope Document​

Send a written scope before starting any work. Use this template:

──────────────────────────────────────────────────
PROJECT SCOPE: [Client Name] Website
──────────────────────────────────────────────────
Date: [DATE]
Prepared by: [YOUR NAME]
──────────────────────────────────────────────────
DELIVERABLES

Pages included:
  ✓ Home page
  ✓ About page
  ✓ Services page (3 services listed)
  ✓ Contact page with form
  ✓ Privacy Policy (template)

Technical:
  ✓ WordPress setup on your hosting
  ✓ GeneratePress theme + child theme
  ✓ Contact Form 7 (email form)
  ✓ Mobile-responsive (all screen sizes tested)
  ✓ Page speed optimization (image compression, caching)
  ✓ SSL setup (if not already active)
  ✓ Google Analytics / Search Console setup

Design approach:
  ✓ Design in browser (CSS-first, no separate Figma mockup phase)
  ✓ Dark theme with brand colors: [CLIENT COLORS]
  ✓ Font: [CHOSEN FONT]
  ✓ Client approval required before development begins

NOT included (available as add-ons):
  ✗ Blog/news system — Add $X if needed
  ✗ WooCommerce/ecommerce — Add $X if needed
  ✗ Copywriting / photo sourcing
  ✗ Logo design
  ✗ Domain registration/transfer
  ✗ Ongoing maintenance (see retainer option below)

TIMELINE
  Discovery complete:       [DATE]
  Design approval:          [DATE + 5 business days]
  Development complete:     [DATE + 10 business days]
  Client review period:     5 business days
  Launch:                   [TARGET DATE]

REVISIONS
  Included: 2 rounds of revisions after client review
  Additional revisions: $[X]/hour after included rounds used

INVESTMENT
  Project total: $[PRICE]
  Payment: 50% upfront, 50% at launch
  Payment methods: [Bank transfer / PayPal / Stripe]

WHAT I NEED FROM YOU
  □ Signed scope approval (reply "Approved" to this email)
  □ 50% upfront payment
  □ All logo files (SVG + PNG preferred)
  □ Brand colors (if any)
  □ All page content (text + images) by [DATE]
  □ WordPress hosting access (or I set up on your behalf)
──────────────────────────────────────────────────

Pricing Framework​

Landing Page (1 page, conversion-focused):
  Basic: $800 – $1,200
  Premium (animations, dark mode): $1,200 – $2,000

Small Business Site (4–6 pages):
  Basic: $2,000 – $3,500
  Premium (custom components, animations): $3,000 – $5,000

WooCommerce Store (store + 5 static pages):
  Basic setup: $3,500 – $5,500
  Custom design (checkout, cart, products): $4,500 – $8,000

Rush surcharge (< 2 weeks deadline): +30%
Content creation add-on: +$50–150/page
Monthly maintenance retainer: $300 – $600/month

4. Stage 3: Design — Direction and Approval​

CSS-First Design Process (No Separate Figma Phase)​

Step 1: Establish design tokens (30 min)
  → Choose colors (primary, secondary, neutrals)
  → Choose fonts (heading + body)
  → Approve spacing scale, border radius, shadows
  → Document in :root block

Step 2: Style tile (1 hour)
  → Create a single HTML page showing:
     - Color palette with all tokens
     - Typography scale (h1–h4, body, small)
     - Button variants (primary, outline, ghost)
     - Card example
     - Form input example
  → Client approves the style direction BEFORE full pages are built
  → This prevents rebuilding entire pages after "I don't like the blue"

Step 3: Home page first (2–4 hours)
  → Build the home page with all section types
  → Client approves this before other pages (they set the pattern)
  → Other pages are much faster once home is approved

Step 4: Remaining pages (1–2 hours each)
  → Reuse components from home page
  → Only page-specific layouts to build from scratch

Style Tile HTML Template​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>[CLIENT NAME] Style Direction</title>
  <style>
    /* Paste your :root block here */
    :root {
      --color-primary:   #6c63ff;
      --color-bg:        #0f0f0f;
      --color-surface:   #1a1a1a;
      --color-text:      #f0f0f0;
      --color-text-muted:#888888;
      --font-heading:    'Playfair Display', serif;
      --font-body:       'Inter', sans-serif;
    }

    /* ── Style tile layout ── */
    body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); padding: 3rem; max-width: 900px; margin: 0 auto; }
    section { margin-bottom: 4rem; }
    h2 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }

    /* Color swatches */
    .swatches { display: flex; gap: 1rem; flex-wrap: wrap; }
    .swatch { width: 80px; text-align: center; }
    .swatch__color { height: 60px; border-radius: 8px; margin-bottom: 0.5rem; }
    .swatch__name { font-size: 0.7rem; color: var(--color-text-muted); }
  </style>
</head>
<body>
  <h1 style="font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 3rem;">
    [CLIENT NAME] — Style Direction v1
  </h1>

  <section>
    <h2>Colour Palette</h2>
    <div class="swatches">
      <div class="swatch">
        <div class="swatch__color" style="background:var(--color-primary)"></div>
        <div class="swatch__name">Primary</div>
      </div>
      <!-- Add all colors -->
    </div>
  </section>

  <section>
    <h2>Typography</h2>
    <!-- Show h1-h4 + body examples -->
  </section>

  <section>
    <h2>Buttons</h2>
    <!-- Show button variants -->
  </section>

  <section>
    <h2>Components</h2>
    <!-- Show card + form input -->
  </section>
</body>
</html>

5. Stage 4: Development — Build Checklist​

Before Writing Code​

□ WordPress installed and accessible
□ GeneratePress (or theme) installed and activated
□ Child theme created and activated
□ SSL active (https://)
□ Maintenance mode plugin activated (clients can't see WIP)
□ Google Fonts loaded in functions.php or <head>
□ :root design tokens added to child theme style.css
□ Git repository initialized (optional but recommended)

CSS Development Order​

Day 1: Foundation
  □ :root token system complete
  □ CSS reset and base element styles
  □ Typography scale set
  □ Button components
  □ Navigation component

Day 2: Core Sections
  □ Hero section
  □ Features/Services section
  □ About/Team section
  □ Testimonials (+ carousel if needed)

Day 3: Supporting Components
  □ Pricing section (if needed)
  □ Contact form (CF7 styled)
  □ Footer
  □ Blog card (if blog)

Day 4: Polish + Responsive
  □ All breakpoints tested (320px, 768px, 1024px, 1440px)
  □ Animation polish
  □ Dark mode (if included)
  □ Performance: image optimization, lazy load
  □ Focus states / accessibility check

6. Stage 5: Review — Managing Client Revisions​

Setting Up for Review​

□ Set up a password-protected staging URL for client
  (Maintenance mode → "Coming Soon" with password)
□ Record a 2–5 min Loom walkthrough of the site
  (Clients rarely read — video shows they're being taken care of)
□ Create a simple feedback document:

"To share your feedback:
1. Watch the 3-minute video walkthrough: [LOOM URL]
2. Write your feedback in this Google Doc: [DOC URL]
3. Note the page and section for each change
4. I'll implement Round 1 revisions within 3 business days"

Revision Categories​

In-scope revisions (included in price):
  ✓ Change text content
  ✓ Adjust colors within the agreed palette
  ✓ Change images
  ✓ Reorder sections
  ✓ Minor layout adjustments

Out-of-scope revisions (additional cost):
  ✗ Adding entire new pages
  ✗ Significant redesign of completed sections
  ✗ Adding features not in scope (new contact form, booking, etc.)
  ✗ Third round of revisions after 2 included

Politely respond to out-of-scope requests:
"That's a great idea! That falls outside our original scope,
so I'll send a quick quote for that addition."

7. Stage 6: Launch Checklist​

SEO & Analytics:
□ Title tags on every page (max 60 chars)
□ Meta descriptions on every page (max 160 chars)
□ Open Graph tags (Facebook/LinkedIn share preview)
□ Google Analytics 4 installed and verified
□ Google Search Console: site submitted, sitemap uploaded
□ Yoast or Rank Math plugin configured

Performance:
□ All images compressed (< 200KB where possible, WebP format)
□ Lazy load enabled for images
□ Caching plugin active (LiteSpeed Cache, WP Rocket, or W3 Total Cache)
□ CSS/JS minification enabled
□ Core Web Vitals checked (PageSpeed Insights: target > 90 mobile score)
□ CDN activated (Cloudflare or hosting CDN)

Security:
□ WordPress, theme, plugins all up to date
□ Default "admin" username changed
□ Strong admin password set
□ Limit Login Attempts plugin installed
□ Wordfence or security plugin activated
□ Backups scheduled (UpdraftPlus → daily, stored off-site)

Final Check:
□ All pages load correctly
□ Contact form sends and receives emails (test with real send)
□ Mobile tested on real device (not just DevTools)
□ Links all work (no 404s) — Broken Link Checker plugin
□ Maintenance mode DISABLED
□ DNS pointed to hosting (if domain transfer)
□ SSL still active after DNS change
□ 301 redirects set up for old URLs (if replacing existing site)

8. Stage 7: Handoff Documentation​

Client Handoff Package (Send as PDF or Google Doc)​

──────────────────────────────────────────
[CLIENT NAME] WEBSITE HANDOFF DOCUMENT
──────────────────────────────────────────

1. LOGIN CREDENTIALS
   WordPress admin: [URL]/wp-admin
   Username: [USERNAME]
   Password: [SEND SEPARATELY via secure link]

2. HOW TO UPDATE YOUR CONTENT
   2a. Edit page text: Pages → [Page Name] → Edit
   2b. Change images: [Describe where images are in Bricks/GP]
   2c. Add a blog post: Posts → Add New → [brief instructions]

3. WHAT NOT TO TOUCH
   ⚠ Do NOT update plugins without backing up first
   ⚠ Do NOT edit theme files directly (use child theme)
   ⚠ Do NOT delete the child theme
   ⚠ Do NOT disable caching without purpose

4. YOUR BACKUPS
   Automated daily backups via UpdraftPlus
   Backup destination: [Google Drive / Dropbox]
   How to restore: [brief instructions or "contact me"]

5. MAINTAINING YOUR SITE
   Check WordPress dashboard weekly for update notifications
   For plugin/theme updates: first backup, then update one by one
   For major WordPress version updates: contact me first

6. CONTACT FOR SUPPORT
   Email: [YOUR EMAIL]
   Response time: [24–48 hours business days]
   For urgent issues: [PHONE / WhatsApp]

7. HOSTING DETAILS
   Host: [HOSTING NAME]
   cPanel/hosting login: [URL]
   [Send credentials separately]

8. DOMAIN
   Registrar: [REGISTRAR NAME]
   Domain expiry: [DATE] — set to auto-renew!
   [Login details separate]
──────────────────────────────────────────

9. Stage 8: Maintenance Retainer​

Monthly Retainer Inclusions​

Basic Retainer ($300–400/month):
  ✓ WordPress core, theme, plugin updates (monthly)
  ✓ Off-site backup verification (monthly)
  ✓ Security scan (monthly)
  ✓ Uptime monitoring
  ✓ Up to 1 hour CSS/content changes per month
  ✓ Priority email response (24 hours)

Standard Retainer ($400–600/month):
  Everything in Basic, plus:
  ✓ Up to 3 hours CSS/design changes per month
  ✓ Monthly analytics report (Google Analytics summary)
  ✓ Quarterly performance audit (Core Web Vitals)

Premium Retainer ($600–900/month):
  Everything in Standard, plus:
  ✓ Up to 6 hours development/design per month
  ✓ New landing pages as needed (simple ones)
  ✓ Priority WhatsApp/phone support

Billing:
  Invoice sent on 1st of each month
  Cancel with 30 days notice
  Unused hours do NOT roll over

10. AI Assistance Throughout the Project Lifecycle​

Discovery stage:
  "Based on this client description, what questions am I missing? [paste notes]"
  "Write a professional scope document for: [paste project brief]"

Design tokens stage:
  "Generate a complete :root token system for a [TYPE] business.
   Brand color hinted: [COLOR]. Style: [MINIMAL/BOLD/ELEGANT]"

Development stage:
  "Build [COMPONENT] matching this design: [paste description/screenshot]"
  "Review this CSS for BEM compliance: [paste CSS]"
  "Make this responsive for [mobile/tablet/desktop]: [paste HTML+CSS]"

Review stage:
  "Rewrite this client feedback as a developer task list: [paste feedback]"
  "Is this change in or out of scope for: [paste scope]? Client request: [paste]"

Launch stage:
  "Write meta descriptions for these pages: [paste page titles + 1-line summaries]"
  "Review this CSS for performance issues: [paste CSS]"

Handoff stage:
  "Write plain-English WordPress documentation for: [paste component description]"
  "Create a FAQ for a non-technical client about managing their WordPress site"

Maintenance stage:
  "Is this WordPress plugin safe to update? What should I check: [paste plugin name]"
  "Diagnose this CSS issue the client reported: [paste description + screenshot]"