Web Design Agency Platform
The Problem With "Contact Us for a Quote"
Most agency websites follow the same playbook: showcase work, list vague service tiers, and end with a contact form. The client submits. You email back. A discovery call is scheduled. A proposal PDF is drafted manually. Two weeks later, you're still waiting on a deposit.
This friction is costly in both directions — prospective clients leave before converting, and agencies waste hours on admin before a single pixel is designed.
The Project Planner: Self-Serve Scoping
The centrepiece of our platform is the Project Planner — an interactive tool that lets clients build and price their own project before speaking to anyone. They choose their core service (a Bespoke Website, Managed Hosting, or Maintenance Retainer), layer on any add-ons they need, and receive a live breakdown of their deposit due today, monthly ongoing costs, and the remaining balance due on completion.
The entire planner is CMS-driven. Phases, deliverables, durations, and product associations are all managed in Payload — so adjusting the roadmap for a new service type requires no code changes. Client selections are reflected in URL parameters, making plans shareable and resumable.
From Planner to Paid: The Checkout Flow
When a client is ready, they click "Add to Project" and their selections land in a cart that handles both one-time deposits and recurring subscriptions in parallel. The checkout is backed by Stripe, with server-side price validation against our Payload database before any session is created — so client-side price manipulation is structurally impossible.
On a successful payment, a Stripe webhook fires and a Payload afterChange hook automatically creates a Project record linked to the client's user account, their order, and the specific services purchased. The project status moves to "Kickoff Ready" without any manual intervention.
The Balance Invoice
Projects are structured around a deposit model. When a Project is marked Completed in Payload, a hook creates and sends a Stripe Invoice for the outstanding balance directly to the client's email. They pay via Stripe's hosted invoice page. When payment lands, the invoice.paid webhook closes the order. No chasing, no manual invoicing.
Client Dashboard
Authenticated clients log in to a protected dashboard where they can view their active projects, check status, and access invoice history. This replaces the typical "email us for an update" pattern and gives clients a clear, professional window into their work.
Stack & Architecture
- Next.js 16 (App Router, React 19) for the frontend
- Payload CMS 3 with Postgres + Drizzle ORM as the unified backend
- Stripe + Payload Stripe Plugin for payment and subscription sync
- Zustand for client-side cart state
- Tailwind CSS v4 for styling
- Resend for transactional email
Design System
The UI is underpinned by a custom design system built on Tailwind CSS v4 — covering colour tokens, typography scale, spacing, and component conventions. It is publicly accessible at /design-system and serves as the living reference for all UI decisions across the platform.
What This Solves
The platform collapses what is typically a multi-day process — scoping, quoting, contracting, invoicing — into a guided self-serve flow that ends with a paid, data-rich Project record created automatically. It shortens the path from "interested" to "paid and in the queue" dramatically, and removes most of the administrative overhead from the agency side.