How to Estimate Cost and Timeframe for Website Design Project
Designing and building a website requires prudent planning when it comes to estimated costs and delivery. Both timeframe and the final invoice should be established from the outset to ensure that the project is considered a success for both the client and the design studio. Good estimates can mean the difference between a profitable project and an over-priced failure.
For over the last 10 years, our Vintage team has finished over 350 web design projects. Many of them were recognized as world's best sites, the others made our clients unbelievably successful.
In this article, we are going to take a look at how the project pricing looks from the inside of the web design company. You won't find exact numbers here but you will understand the process of estimation. If you are interested more in how much will your website cost and why you probably will be more interested in reading this article.
Clients can sometimes become confused about how a web design company estimates its final bill and the time it takes them to complete the project. Because most web designers charge by the hour then generally speaking the final cost of the project will reflect how long the project takes as a whole to complete.
Clients may get upset, and rightly so, when initial estimates start as low as $4,000 and end up costing $100,000. Such huge differences in pricing occur about when little or no planning goes into the project management stage of the design and build process.
A small web design project can turn into an expensive and time-consuming task if no thought and care is put into project management. In this article, we’re going to help you to avoid the risk of losing clients and solve the website cost riddle once and for all. Using a few useful techniques and tips listed here, you will be able to increase the accuracy of your estimates and ensure that projects are carried out professionally.
Learn the Details
“The first step in exceeding your customer’s expectations is to know those expectations.” – Roy Hollister Williams, best-selling author and marketing consultant best known for his Wizard of Ads trilogy.
The very first thing you need to do is to understand your client’s expectations and requirements from the web design project to ensure you’re on the same page.
Meet with your client face-to-face or set up a meeting via Skype to understand exactly the needs of your client and what they are looking for. This also needs to be done so that if a client’s needs change later in the project, you can request an increase in budget and timeframe.
You can’t expect a client to tell you everything you need to know in one sitting. A client may not understand what information needs to be provided for more accurate project estimates, so you should ask a client yourself.
A good web design agency needs some essential information in order to get a precise cost estimate for website design and deliver a successful product.
1. The client’s business goals: any agency worth its salt needs to know that the site they are building will achieve the business goals established by the client. For example, a client may need to increase leads or engagement of viewers, or redesign the old website depending on existing trends.
2. The type of website: it may be a simple landing page for a new product, a complicated corporate website design or an e-commerce store. Different types of websites will require different timeframes and incur different costs. A one-page landing could be completed relatively quickly, whereas a huge corporate portal may need a couple of months from start to completion.
3. Design and technology requirements: an agency should know what functional specifications need to be implemented on a website. This information is fundamental when estimating time and cost of the entire project.
4. Website prototype is a sample wireframe or a sketch of the final web design. These prototypes can be made with easy-to-use online tools such as Axure or just drawn on a piece of paper. A five-minute sketch could save hours of trial and errors in the late stages.
5. Website content: the images, copy, and other content which will be used on a website. The content may be provided by the client, or the design studio may create it by themselves. Of course, when a client provides the content, the cost will be lower. In order for a project to be delivered on time, the content should be provided by the client well in advance.
6. List of websites a client likes. A client should provide a list of websites that they like to give the agency an idea of what they want and their taste. Awwwards is a great site to find some stellar examples.
Awwwards is a website where web professionals from all over the world can find each other, share knowledge, experience and find inspiration. There are a lot of websites which follow the latest web design trends, thus it’s the best choice to find super-awesome designs.
Of course, you may have your own list of questions to ask your client before estimating a project. Don’t hesitate to ask a client as many questions as you need in order to make your estimates more effective and realistic.
There are a lot of check-lists out there concerning what a client should provide website designers with, for example here is a whole showcase of questionnaires from Smashing Magazine.
Using Different Estimating Techniques
Once you have a good idea of what a client needs, you’re ready to create a project estimate. There are three main approaches you can use to create your own estimates on time and cost:
- task-based approach;
- benchmark approach;
- tools-based approach.
Let’s take a closer look at each of them.
The task-based approach is the most popular and common methods for both web design firms and freelance designers. To create an estimate using the task-based approach, you need to follow the next steps:
- Break the project into smaller tasks.
- Decide how long it will take for your team to perform these tasks.
- Determine a rate based on your hours rate to each sub-task.
- Combine all the prices for the project sub-tasks and add some contingency amount.
- Present the estimated costs and time to a client.
This method may be time-consuming but the results are more accurate.
The benchmark approach for estimating is a good method for a website designer who does similar work over and over again. It’s a reference based approach based on your previous work for similar projects. Different time-tracking may help you to create a benchmark.
When it comes to the tools-based approach, it’s quite simple. You need to use project estimation tools that are designed to do just that.
For example, Astuteo is a web development calculator which can also be used by a graphic designer. The website calculates the costs of project based on the hours and number of tasks involved.
Konigi is another great tool for calculating estimates. It’s a free task-based estimating template. The difference between Konigi and the previous tool is that you need to fill in the lowest and the highest estimate for each task.
As you can see, almost all the approaches used to calculate estimates these days use tasks. So you need to break your project down into smaller manageable tasks to establish proper estimates.
As you can see, almost all the approaches used to calculate estimates these days use tasks. So you need to break your project down into smaller manageable tasks to establish proper estimates.
Project Tasks and Phases
Every designer and design agency will have their own project phases depending on client’s needs and requirements. If you want to create more accurate estimates on a long-term basis, you need to break down project phases in a consistent manner. Generally, web projects may be broken into the following phases:
- Research and planning;
- Solution design;
- Web design;
- Front-end development;
- Back-end development;
- Content writing;
- Testing;
- Launching a website.
Each of these phases are broken down into smaller phases, for example, research and planning require gathering information and project planning; solution design means creating wireframes, sitemaps and user workflow.
The design stage will include designing a homepage (which can take up to 2 to 3 times more time than other pages) and additional pages. It also means adding content provided by the client.
After the design is finished a complex technical task of building the design is put in the hands of the developers.
The front-end development stage consists of cross-browsing fixes and building templates. A mobile design must also be built out by the developers in accordance with the existing design.
The back-end development stage includes CMS setup and configuration, creating contact forms and various other functionalities. Then the content has to be uploaded and the functionality needs to be tested. After all these steps are complete, a website can then be shown to a client.
Using Time Tracking Tools
Focus on being productive instead of busy.
― Timothy Ferriss, the author of best-selling book ‘The 4-Hour Workweek: Escape 9-5, Live Anywhere, and Join the New Rich’
Time tracking is useful for both the web design agency and the client. It may help to bill a client more accurately as it reduces the second-guessing on how long some project phases may take. It will help in estimating average billable hours per week. Tracking individual tasks will provide a record that can be referred to when establishing estimates for future projects.
There are a lot of time-tracking tools around the internet, here are some of our favorites:
Freeagent is an accounting app with a built in time-shifting function. It helps to track time, expenses, create proper estimates and even invoices based on the work done.
Harvest allows tracking time for the whole team. You can compare estimates vs actuals. It has a mobile app, so you can track your working hours on the go.
Eon allows you to break it down into even smaller chunks and establish how much time you spend on each task. You can add as many projects as you need.
Using time-tracking tools can improve your workflow and avoid procrastination.
Add a Margin of Error / Milestones in Estimating a Project
You always need to add a margin of an error. Part and parcel of being human is making mistakes and the only way you can manage to get around the mistakes is acknowledging them and planning how to get around them.
There could be unexpected situations in every project, for example, - new technology requires more time to implement, the client delayed a meeting, additional changes needed to be made, some team members were on a sick leave. In order to protect yourself from these sort of scenarios, it’s better to over-estimate a client when it comes to time and allow for a margin of error. For instance, in Vintage we tell clients that it should take 1.5 times longer than what is usually needed. If we finish the job faster, then we’ll exceed client’s expectations once again. If difficulties do crop up, we would get the project done on time anyway”,
says Olga Shevchenko, Awwwards judge and Art director @ Vintage.
Also, it should be taken into account that a client may not understand how the technology works and may think that the project can be completed in a matter of days when in fact it could take weeks or months.
Summary
The key to successful project management is to gather as much information as you can at the early stages. And only after that information has been processed and understood, an agency should commit to a price.
At Vintage, we take the project budgeting seriously. We know that the budget is something that you want to rely upon. So we employ all of our expertise to explore all possible pitfalls in the project estimation before actually starting the development.