See how a client journey can move from quote to payment and project progress in one place.
This walkthrough shows how a project can move from an internal quote to a client proposal, staged payments and ongoing project communication without relying on scattered emails and spreadsheets.
The workflow begins with a real client and a clearly defined project.
Instead of building a quote in isolation, the project becomes the central place for scope, pricing, client communication and delivery.
Website workflow and client experience
Scope and pricing become a structured proposal instead of a loose document.
Features, services and external costs can be combined into one clear quote with a defined project total.
The customer sees the scope, price and next step without needing a separate PDF thread.
The proposal can be reviewed online and accepted directly from the client-facing experience.
Client Portal Redesign
Prepared by Hanneke Verhoef
- Client accounts and secure portal access
- Digital proposal and acceptance
- Staged payment workflow
- Project progress and client feedback
Includes VAT and agreed project scope.
Secure client accessPayment stages stay visible instead of disappearing into separate invoices and email threads.
The client can see what has been paid, what comes next and how each stage relates to the project.
The portal keeps project progress, requests and feedback connected to the work.
Clients can see what is happening, where input is needed and what has already been completed.
Requirements and project direction confirmed.
Review the first working client portal structure.
Connect workflows, payments and client communication.
“The structure looks good. Can we move the payment overview above the project notes?”
Need a client experience that fits the way your business actually works?
I build focused portals and business tools around real processes, customer journeys and internal workflows.
Tell me about your project →From manual project scoping to a structured quote and client workflow
The Quote & Client Portal is a working web application I designed and developed to turn project scoping, pricing, proposals and client communication into one structured workflow.
What started as a focused internal quote builder developed into a connected application covering client records, projects, pricing logic, quote versioning, proposals, structured intake, project progress and a secure client-facing portal.
The goal was not to reproduce a generic CRM or invoicing platform. The application was built around a specific business problem: producing consistent, explainable project quotes without losing the context, pricing decisions and history behind them.
Pricing a custom application is more than choosing a number.
A project quote needs to reflect scope, complexity, functionality, testing, risk and external costs while still being clear enough to explain to a client.
Pricing inconsistency
When project types, features and prices live in notes, spreadsheets or individual documents, it becomes easy to forget an item or calculate similar projects differently.
Lost project context
A final price does not show why that price was reached. Requirements, complexity decisions, dependencies and revisions need to stay connected to the quote.
Disconnected client workflow
Scoping, quoting, proposal review, payment and project updates can easily become separate processes. That creates extra manual work and fragmented information.
One connected workflow instead of separate tools.
I designed the application around the natural lifecycle of a client project rather than around isolated database screens.
The pricing engine was designed to stay understandable.
Instead of asking AI to invent a project price, the application uses deterministic business rules and stored pricing data.
Database-driven catalogue
Project types and features use stable identifiers and database records. Public names, descriptions and prices can change without breaking the underlying application logic.
Complexity-aware pricing
Features can support simple, standard and complex pricing where needed, while other items can use a single base price.
Pricing settings
Global settings support factors such as complexity, testing, discovery, risk, revisions, VAT and quote validity rather than scattering those rules throughout the interface.
Frozen quote snapshots
A saved quote retains the pricing values used at the time it was created. Changing the catalogue later should not silently rewrite the commercial history of an earlier quote.
Built as an application, not as a static prototype.
The interface sits on top of a relational data model so clients, projects, quotes, proposals and project activity stay connected.
Two different users. Two different experiences.
Internal application
The management side uses authenticated access with email and password login, protected application routes, logout and password recovery.
Internal screens contain business information that should never be exposed through the client experience.
Client-facing portal
The client portal uses controlled token-based access so a client can view the information relevant to their project without receiving access to the internal administration environment.
The portal separates client-facing content from internal notes, pricing logic and administrative controls.
Some of the important work is invisible in the interface.
Keep pricing separate from presentation
Pricing values were moved into structured database records instead of being hardcoded into React components. This makes the system easier to maintain and allows the same catalogue to be reused by multiple workflows.
Preserve quote history
Quotes use version-aware logic rather than overwriting previous commercial decisions. New versions can be created while earlier versions remain part of the history.
Freeze commercial values
Key client, project and pricing information is stored as snapshots with the quote. Historical proposals therefore remain tied to the values that were actually presented at that time.
Protect customer history
Quote deletion logic checks for proposal publications, responses and accepted payment plans before deciding whether a version can safely be permanently removed.
Separate internal and public workflows
The internal quote environment and the client-facing portal use separate routes and access patterns. Clients see only the information intended for them.
Turning requirements into usable project data.
A quote becomes more useful when the information feeding it is structured before pricing begins.
Versioned intake forms
Questions, options and form versions can be stored as structured data rather than being permanently embedded in a single form.
Conditional questions
Visibility rules make it possible to show relevant questions based on earlier responses instead of presenting every question to every project.
Mapping rules
Answers can be connected to suggested project types, features, complexity and scope signals, creating a bridge between project discovery and the internal quotation workflow.
The calculated quote becomes something a client can understand.
Internal pricing detail and customer-facing communication are not the same thing. The proposal layer translates the project into a clearer client experience.
Proposal content
The client can review the project overview, objectives, included scope, investment and payment schedule through a dedicated proposal view.
Response workflow
The portal can hand the client into the appropriate proposal response flow while keeping the displayed financial data tied to the frozen proposal version.
Payment structure
Accepted proposals can be connected to structured payment plans and payment stages, including VAT values, due conditions and payment status.
Project visibility
Project phases and client-facing updates extend the portal beyond the initial quote and allow the same application to support the project after acceptance.
Built iteratively from business problem to working system.
Define the workflow
I started with the business process rather than the UI: what information is needed, where pricing decisions happen and what needs to remain connected throughout the project lifecycle.
Model the data
Clients, projects, project types, pricing features, quotes and quote items were separated into related data structures so the application could grow without turning one screen into the entire system.
Build the core quotation flow
The first usable workflow connected login, dashboard, client, project, quote creation, pricing calculation and saved quote detail.
Add commercial safeguards
Pricing snapshots, quote versions, lifecycle rules and customer history were added so later edits could not casually destroy the meaning of earlier quotes.
Extend into the client workflow
Proposal publication, client access, response handling, payments and project visibility turned the internal quote builder into a broader Quote & Client Portal.
Test, debug and refine
The application was developed iteratively, reviewing behaviour, correcting workflow issues and refining the data and application logic as later phases introduced new requirements.
A working business application, not a portfolio mock-up.
The result is a connected application that manages the path from initial client and project information to pricing, quotation, proposal and client-facing project activity.
The project demonstrates my approach to application development: start with a real operational problem, break it into understandable workflows and data structures, build a focused first version and expand it without losing the integrity of the original system.
The live demo above shows the interface. This case study shows the application architecture and decisions behind it.