Web Design Agency Platform
A full-stack agency platform with an interactive Project Planner, mixed Stripe checkout, automated project lifecycle, and a client dashboard — built to eliminate manual quoting and admin overhead.
The Challenge
Agency websites typically use static service pages and contact forms, creating a slow, manual sales process. Prospective clients have no way to self-scope or self-price a project, resulting in long delays before a deposit is paid and work begins. The goal was to collapse the gap between "interested" and "project started" with a structured, self-serve experience backed by real automation.
Our Solution
Project Planner Tool
The core of the platform is an interactive Project Planner where clients select services and add-ons to receive a live cost breakdown and a CMS-generated project roadmap. Phases, deliverables, and product associations are managed entirely in Payload — no code changes needed to update the planner for new services.
Mixed Checkout & Payment Automation
The cart handles one-time deposits and recurring subscriptions simultaneously, validated server-side against Payload before a Stripe session is created. On payment, a webhook automatically creates a Project record linked to the client and their purchased services, moving the project to kickoff status without any manual admin.
Balance Invoice Flow
When a project is marked Completed, a Payload hook auto-generates a Stripe Invoice for the outstanding balance and emails it directly to the client. Payment triggers the invoice.paid webhook, which closes the order — fully automated from deposit to final settlement.
Client Dashboard
Authenticated clients access a dashboard to view their active projects, track status updates, and download invoice history — replacing the need for manual status emails from the agency team.
Technical Architecture
The platform is built on Next.js 16 with the App Router and React 19, with Payload CMS 3 running on Postgres via Drizzle ORM as the unified backend for content, commerce, and user management. Stripe is integrated via the official Payload Stripe Plugin, which syncs products and prices bidirectionally.
Frontend state for the cart is managed with Zustand, and all planner filter selections are persisted in URL search parameters for shareability. The admin panel is used entirely for managing services, timeline phases, portfolio content, and blog posts — no hardcoded content.
Design System
All UI is built on a custom design system (accessible at /design-system) built with Tailwind CSS v4 — covering colour palette, typography scale, spacing system, and component conventions used consistently across every page of the platform.
Business Impact
- Replaced a multi-day manual quoting process with a self-serve flow that ends with an automatically created, paid project record
- Eliminated manual invoicing for project balance payments
- Created a transparent, professional client experience that builds trust before discovery calls
- Reduced onboarding admin overhead significantly per new project
