Download my website re-design and development proposal template that outlines how I wrote and charged for a £19k project.
After reading this blog post you will have a better understanding of how to write a website proposal and how much to charge for a website or web design.
The web design proposal elements written in black text and my commentary notes written in purple.
You can download this proposal template in Google Docs format and edit the black text and remove my commentary.
Table of Contents
- Website project overview
- Return on Website Investment
- Web site re-design will solve these problems
- Phase 1: Web Design
- Phase 2: Web functionality scoping
- Phase 3: Web Development
- Project Duration
- Project Hours
- Web Design Process
- Website Project Management
- Out of Scope
- Estimated Costs
- Payment Terms
- Website Proposal delivery and signoff
Website project overview
A website project is more than re-designing your website.
It’s about making improvements in usability, website traffic and conversion that ultimately generate new client leads, new leads and additional revenue.
As your business has grown so have your needs, requirements, communication and web resourcing.
In turn, things take more time for us to scope, design, development and implement.
About the introduction to a website proposal
I want the client to know there are business benefits to re-designing the website.
Hence the inclusion of improving “traffic and conversions leading to new potential clients, leads and revenue.”
“As your business has grown so have your needs …”
This line was included as I am setting the prospective client up for a website price that is much higher than he’s paid previously for web work.
ps: for prospective clients are reading this section, if web professionals are proposing to build a website that is too low in price they could actually be hurting your business in the short and long term.
Return on Website Investment
When presenting this website proposal we do so with your business in mind and are not simply designing and coding to make your look prettier.
We want to your business to get a return on this web investment.
If this project can persuade 5 new clients to hire you in 12 months, you’ll see a return on your investment.
About the ROI section
To get to the stage of proposing a website, you will have to have had a series of conversation and meetings.
You may have even charged the client a discovery fee.
Some of the main discovery questions are :
- What do you charge/average order value?
- What are the consumer, or end user benefits of your product or service?
- Who are your competitor and the alternative product or service end users use?
- What’s your value proposition?
- Why do you need a website designed (re-designed)?
- What is the goal or objective of the website?
- What is the website visitor to enquiry conversion rate?
- What percentage of enquiries convert to sales?
The last paragraph is crucial to the success of this website proposal.
“persuade one new client to hire you to fill 5 vacancies, you’ll see a return on investment”.
The sales technique I’m using is called anchor pricing.
It goes like this.
If 5 new clients deliver £8,000 each that’s £40,000 in revenue.
This website will cost £19,000.
The prospective client will be focused on the revenue as opposed to the cost of the website and realise 5 new clients is easy to achieve.
I had previous asked questions in my discovery and in client conversations about what the client revenue per customer is and researched their industry.
The average salary in their industry is £50,000, and a recruitment company typically earns 17.5% commission when they find and place a candidate for their hiring client; that’s £8750 of revenue.
Web site re-design will solve these problems
Usability and mobile
We identified that people spend considerably less time on your website on a phone compared to a desktop; and yet mobile traffic represents 30% of total traffic.
You have to address this issue now as mobile is only going to grow.
The registration and apply forms on a mobile device are long and fairly difficult to use therefore we need to address those issues.
I looked at the Audience – Mobile report in Google Analytics.
Every client or prospect should provide read only access to Google Analytics as part of your discovery.
I also added Hotjar to the client’s website to get a bird’s eye view of web form usage.
Using quantitative and visual data demonstrates to the client we’re focused on core challenges.
Completing a long, complex form affects the conversion rates; the more prospects who register the better.
6.5% of visitors to the website register their details.
Doubling that conversion rate equates to nearly 5,000 new prospects on your database in a year.
2.2% of visitors apply for vacancies on your website.
Doubling that rate equates to 1900 more applicants per year.
Website Conversion explanation
I have access to the client’s Google Analytics so I had these statistics.
I have done my proposal research to explain the business benefits of improving web conversion.
Website Traffic and Visibility in Google
Google want your page content to be front and centre of the page so the user can read the first paragraph without scrolling.
In addition, you want more of your existing pages to rank for more than one keyword; thus increasing your website traffic.
Website Audit and Keyword Research
We shall audit the website with both Screaming Frog and Ahrefs to identify any issues and opportunities
We shall identify some new keywords for great articles you should create and backlinks you should seek to help you rank higher for those keywords.
If we can boost website traffic from natural search by 20% per month by identifying highly searched relevant search terms with low competition, that’s another 600 new candidates per year.
About the site audit and keyword research section of a proposal
Including a site audit in the project demonstrates you want to improve the client’s website.
The client could be talking to another web professional and the inclusion of a site audit and keyword research could be your point of difference in sealing the deal.
Pure value add.
Redesigning a website is an ideal occasion to identify new opportunities.
I have explained a business benefit of doing this work; 20% more traffic equates to 600 new leads.
Phase 1: Web Design
We shall design 16 new pages (based on website influences you presented) as well as a 1-column and 2-column layout to be used for all the existing and additional static pages.
Whilst we have assets from the current site that we can use, this is a much more comprehensive web design project.
We need to design the list pages, detailed pages, selection options, how they work and function in all browsers and a detailed user-friendly contact and registration form.
Web Pages To Design
As per our meeting, we shall design the following:
- Home Page Web Design
- Candidates page
- Clients page
- Service List – new layout with filtering options
- Service Details – new layout and application form
- About Us – new layout
- Staff List – new layout and filtering
- Staff Detail
- Register Form
- News List/Detail – new design layout
- Blog Post List/Detail – new layout
- Contact/Find Us – new layout
- One Column Template – new design for all site wide pages
- Two Column Template – new design for all site wide pages
As part of the dialogues with the client I discovered the number of pages he needed designed and then I got an estimate from my web designer.
Then I listed the pages to be designed as the part of the proposal.
Time frame for front end design
Such is the demand for front end UX web designers we only have a 3-week design slot available whereby designs are created, presented, feedback sought and amendments made.
“only a 3 week design slot” – that’s a fear of missing out message to prompt the prospect to agree to the deal.
Once the front end designs are signed off, we have a web friendly working prototype and these files are exported to the backend developers.
About the web design section of the proposal
The beauty of designing in the browser with tools like Webflow is that the client can see, touch and interact.
No more static Photoshop files and less surprises and changes during the web development phase.
Phase 2: Web functionality scoping
When web designs are complete, we have a further 4 working days.
This is to wrap up the designs, test the site speed and write the functionality for the back end development team to integrate within the CMS.
We present the designs to you and how the content can be added or changed in the CMS.
Once the functionality is signed off we commence web development.
About the web functionality scoping section
I have estimated it will take me 4 days to write the back end functionality based upon the final designs.
The web developers need an exact specification on what to do with the design files within the CMS.
Phase 3: Web Development
Based on the knowledge we have at the moment, we estimate that you should budget 270 development hours.
- New Development – 230 hours
- Migration to Original Site – 30 hours
- Testing – 10 hours
At this stage, here is an outline of the development work involved.
Web Development – New Web Apps to create
- Home Page Slider
- Home Page Secondary content
- New People Web App
- New Pages Web App
- Main menu
- Footer menu
- Inner/right side menu
- Create content holders to host content and this will be determined after we completed the front-end design (phase 1).
News and Blog Post List and Detail Layouts
These 4 layouts will need to be re-styled and modified.
We shall preserve the content but recoded the layouts and, for example, with the blog post list we can introduce blog images in line with the new designs.
Create Web Apps
The following web app list view, advanced and details view will need to be coded to suit the new web designs.
Design Website Search Functionality
We’ll be introducing a new search function for vacancies that requires styling and designed.
There are essentially 4 different layouts for each web app; the list view, detailed view, alternative view and custom view; so 20 layouts to code.
New 1 or 2 column templates
The following web pages will need the new 1 or 2 column templates applied (or redundant pages removed)
The web development section of the proposal
I summarised the number of development hours required and then summarised the scope of work for each design section that required to be coded.
You will want to edit each of the sub headers of this section and summarise the web development work.
The design phase of the project will take 3 working weeks and one week for scoping and functionality.
The web development and integration with Business Catalyst will take around 8 weeks and the project to be completed for the end of June.
About the project duration section of the proposal
By including a section about project duration I am setting client expectations and communicating my expertise.
Web projects are notorious for missing deadlines and I don’t want this website project to interfere with the client’s other commitments.
Design hours will be 9am to 5pm during the design window.
Development hours are generally 6am until 2.30pm.
Revisions are best communicated after those hours and considerations/alterations the next business day.
Project hours are 9am till 5.30pm.
About the project hours section
I am setting expectations with the client when we will be working on the project.
This section is redesigned to reduce risk so that the client knows he can contact me.
My web development team in India work different hours from me so it’s important to communicate when work and revisions occur and are implemented.
Web Design Process
We expect a design window of 3 weeks (15 business days) and an estimated 52 hours of design time.
Designs will be added to a test server for your perusal and feedback as before.
About the design process section
Because I use an external freelance UX and web designer I only have a window of his time.
Clients can be distracted with internal meetings, external events or holidays and I need to reign in the client to a timeframe; hence the wording.
Website Project Management
All design and development work should be communicated through Basecamp (but we’ll still use the telephone too).
Both front and back end development teams are on Basecamp so you are talking to Platonik as team, not just Fraser McCulloch.
About the project management section of the proposal template
I am controlling the project and demonstrating project leadership by specifying the software use for managing the project.
I don’t want to have to learn a project tool like Asana or MS Project.
Out of Scope
Work may arise or be requested during the project that is out of scope from the functionality we present and that’s perfectly normally.
Excessive revisions, changes, communication or out of scope work requested shall be advised before proceeding and these costs will be added to the next billing cycle.
Mid project I will meet with you at your offices for a project update meeting.
Design and development hours for additional or out of scope of work shall be billed at £60 per hour (this includes the project hours we now accommodate ).
Why I included out of scope within the proposal template
Including an out of scope section in the website proposal protection you against incurring costs and work you never budgeted for.
But notice the wording “work my arise that is out of scope” and “that’s perfectly normal”
I’m informing the client new ideas it’s only to be expected new ideas may during the project but you shall have to pay.
Then I am stating there is a charge per hour for out of scope work so the client isn’t surprised should out of scope arise.
Phase 1 is a known deliverable and accurate price whereas Phase 2 is an estimate based on what we know at the moment.
We shall be in a better position after we have completed phase 1.
- Phase 1: Web Design and project management – – 78 hours – £3120
- Phase 2: Web Development and project management- 405 hours – £16200
Project hours equate to 50% of design or development hours.
Such project work includes writing the functional specification, wireframes, managing the communication between designers and developers, created and editing images, making CMS adjustments, phone call and email communication.
Why estimated costs and not a fixed cost with the proposal template
The client needs to know this is an estimation based on our hourly; not a fixed price.
What is designed can impact on what is developed and I have communicate this.
Also notice how I explained how project management time is included in the estimate.
By reiterating what’s included in the price I am justifying the number of hours multiplied by the rate I charge.
We recommend fortnightly billing cycle split evenly over a 12-week period.
Explanation of the payment terms section of the proposal
Many employees and contractors are paid on a weekly or fortnightly basis and I believed fortnightly payments would be mutually beneficial for both myself and the client.
In the past, I have offered 50% to start the project and 50% upon completion.
But that caused cashflow issues.
Relying on a client to keep to the project timeline and supplying content always delays the final payment.
If you do not recommend fortnightly payments, then propose 50% to start a project, 25% 30 days later and 25% 30 days later.
Do not project a fee upon completion; as completion is impossible to define.
Website Proposal delivery and signoff
I will typically create the proposal in Word or Google Docs and then upload the proposal to EchoSign for a digital signature.
Whilst this terms of the proposal are never legally binding it provides you with a reference point should the scope of project or pricing change or alter.