Writing a Scope of Work (SOW) for a website
This document discusses the general items you need in a SOW for a website, but because projects can vary so much, you may need to include more items in your SOW.
Today, we’re going to look at how to produce a Scope of Work (SOW) document for your website or app project and get it approved by your client. This process has the following steps:
- Define the project
- Setup project tasks
- Prepare the information architecture
- Figure the times and costs per task
- Obtain team review & approvals
- Request client or stakeholder approval
- Get started on your project!
It’s important to understand that there is a big difference between project management and scope of work generation. When doing project management, especially on large-scale development projects, each feature is explained and many, if not most, individual tasks are written out. This is not the same as a scope of work. For example, in your scope of work, you may have a feature like a ‘Contact Page’. This page may have a form, links to social media, a Google map of the location, and some contact information. The page may receive estimates for design, coding, programming, and collaboration, but each individual task such as ‘design contact information area’ may not need to be listed here. It may be listed in a project management tool to be completed and marked off.
Defining the project: The Creative Brief
Whether you’re doing a marketing website or a medical practice management app, you still need a creative brief. However, while the creative brief is absolutely necessary for building a new project, it is often not needed for a change or work order.
The creative brief should:
- Connect objectives with creative strategies
- Build team consensus
- Align expectations
- Define clear, measurable goals
To learn more about building a Creative Brief, take a look at some of these articles:
Project Tasks
Once you have a creative brief, you can start building your scope of work. For a website, especially a smaller one, the following areas should be listed in the Scope of Work.
- Project setup – getting ready to build the system
- Information Architecture – what exactly are you building
- Launching the project – it always takes more time than you think it will
- Post-launch tasks – you’ve launched the site, now what
General Tasks vs. Individual Tasks:
For each of these areas, you’ll need to write out what general tasks need to be done and about how much time it will take for each of these items.
Project set up for web and app projects generally includes the following categories:
- Planning and Information Architecture Development
- Disseminate Project Information to Team
- Serving / Hosting / DNS Environment Setup
- Code Repository Setup
- Search Engine Optimization Planning
- Concept Design – if this is a part of setup, such as in a theme based website project
Information Architecture for web and web app projects this is a definition of all pages, section, subsections, and general (sometimes specific) functionality. This includes things like navigation, head/footer, and page by page goals & structure planning.
A few key tips about the information architecture:
- This document is extremely important as it helps define what exactly you or your team will be responsible for building and how much it costs. Much like a blueprint from an architect for a house, this planning document helps set expectations between you and your client or stakeholders while simultaneously telling the builders what to build.
- The more detail provided, the better.
- Without a set information architecture, you open yourself up to a stronger potential for scope creep as well as mismanaged expectations with your client.
Launching the Project is a task that is so often overlooked. As you probably know, it’s never as easy as just pushing a button. Setting up DNS, making sure email management is intact or planned properly, pushing files, informing users, training admins, final debugging, and time for launch support must be accounted for. Time for just in case things go wrong, (and they occasionally do) is so often overlooked. When doing your project planning, you must account for the all the time these things take.
Post-Launch Tasks are the key to happy clients and successful long term relationships. Every company is different, but a few things you may want to consider for this area are:
- Do you provide a Service Level Agreement (SLA), and how is that implemented?
- Is there a sign-off process after which you are no longer on the hook to fix issues with your client’s project? If so, how and when is that accounted for?
- Do you help clients do additional marketing on their projects? Do you do content marketing, SEO, email marketing, etc.? How do you go about doing these things?
How are you billing the project?
There are a few ways to bill for a project. These are:
- By the task – Coding costs X amount, content generation costs Y amount.
- By the person – Jill is billed at X amount no matter what she does, and Bob is billed at Y amount no matter what he does.
- Project rate – No matter what anyone does or who they are, everyone is billed at the same amount.
- Flat fee – The project costs X amount, no matter what we do or how long it takes us to get it done. If you do flat fee pricing, I still recommend that you add times and rates as costs so that you know how much you are actually making on the project.
Task Categories
Before getting started on your project, figure out how you are going to bill your project, and make sure that all your task types are in the system at the billing rate. Some of the tasks that I recommend are:
- Design – Composition design, generally in Photoshop
- Programming – PHP, ASP, Java, etc.
- Coding – Slicing images, HTML, CSS, Sometimes frontend Javascript or jQuery
- Content Formatting – After you get content from the client, putting it into the site and making it look good
- Content Generation – Writing content or editing content from the client
- Meetings and Collaboration
- Project Management – Managing the project
- Testing and Debugging
- Systems Setup – I use this one for all the setup and planning tasks so I can group it together
Setting Up Your Project
There are a few advantages to using BrainLeaf that we will be utilizing in our example today:
- Templates – After you do this once, you can reuse elements again and again.
- Estimation – Instead of having to rewrite spreadsheet formulas every time you do a new SOW, all the math is done for you.
- Standardized systems – You and your clients will always know what you’re looking at and how it works.
- Automated approval processes – One of my favorite things about this system is that it makes getting client approvals quick and easy, and enables you to get contract signatures for every single change order.
Start a new project
Since we’ve got an understanding of the general pieces in the system, it’s time to get to work on the SOW!
Project setup and launch tasks
From here, you can either use some of the pre-built templates or build your own item cards into the system. In this case, I am going to use some of the pre-built items. The items I am adding are general items that can apply to the entire site, either page by page or feature specific items. Add information to the information architecture portion of the SOW as well as header and footer.
Project Wide Tasks:
Planning and Information Architecture Development – This encompasses the time it takes to figure out what goes into this document and writing it. In some cases, this can be as simple as a quick conversation with the client. But it could also be a very extensive set of meetings, focus groups, and so much more. If you are using this SOW to pitch prior to doing other work, you may also want to plan on adding time to the Creative Brief development time.
Concept Design – In this case, I have the concept design as just choosing a theme, but you could also add in time or charge a flat fee for doing all the work it takes to design this portion of the project. If you are doing custom concept design, I highly recommend you add the number of revisions you are going to include for the cost you are charging for the project and note the expense of additional design revisions.
Serving Environment and DNS Setup – Everyone always forgets to take into account the time it takes to get these items set up. You will need to set up your live environment as well as your build environment.
Code Repository Setup – In the same way you have to account for your serving environment and DNS, you need to account for the code repository. I like to add this as a separate item in my SOW so that clients realize that this is being done. It could easily be put as a subsection of the previous item.
Mobile Responsiveness Improvements – It would be completely acceptable to account for adding mobile responsive tweaks on a page by page basis. But given that the project being planned is fairly simple, I prefer to add it as a global task. If your project were a large one, adding mobile responsive improvements to each page or feature would be advisable. This way, if a client asks you how much it would cost to make changes to sections or features, you can easily adjust pricing. In this example, I am going to leave the estimate blank for now and come back to it after we have the information architecture completed, then calculate the time for this.
Search Engine Optimization – I like to account for SEO globally, especially on smaller websites, but for large ones, it is not a bad idea to do this on a page or section by section basis as well.
CMS, Plugins, Widgets – Project wide tasks is a good place to put this information. Generally, I don’t list every single widget and plugin, but I recommend always stating which CMS you are going to use, account for the price, and list any plugins and widgets you know are going to cost or that you will need to spend time setting up. Some examples of that would be things like form building plugins (Gravity Forms), SEO plugins (Yoast), or email integrations tools (Mailchimp’s form integration plugin). Each of these items requires someone to set it up, so make sure to account for that time!
Training – If you have to train the client on how to use the system, build or supply training systems, or just meet with the client and answer questions, here is where you can account for that time. For a small site, I usually apply 2 hours of training time, then an additional 3 to 5 hours of answering calls and emails with other questions.
We also need to include project launch tasks. In this example, this is a simple list of items. But the larger the project, the more complex and time consuming this set of tasks can be. Don’t underestimate how much time it can take to launch a large-scale, mission-critical project! Items in this area for a small project include:
- Migrating DNS
- Managing MX records
- Pushing files to the live environment
- Running critical systems tests pre-launch (in addition to all that testing we’ll build into each feature below), just to make sure everything looks good
- Reviewing live site for bugs, large issues, etc.
- Informing the client that the site is launched
PRO TIP: Once again, the beautiful thing about this system is that now that you’ve done your planning for one project, you don’t have to do it again for the next. Just save this setup as a template and reuse it over and over. See a video on how to set up a template here.
Information Architecture
Now that we’ve got all of our setup and launch tasks ready to go, let’s take a look at the website structure. It may seem like a lot of work to list everything out, but this is one of the best uses of time prior to starting the project. Planning out as much as possible ensures that you and your client are on the same page about what is being built, how long it will take, and how much it will cost. In addition, you can also write out what you expect to have on these pages as well as some simple wireframes. This can make conveying your ideas to the client a lot easier.
PRO TIP: One of the biggest advantages to having EVERYTHING written out, all the way down to individual form elements, is that if your client has approved this scope and then asks for more you are now is a great place to request more money and time for these changes. Without a written scope, you can get into a battle of “he said, she said” and end up with an upset client. No one is upset when it is written down ahead of time. But when you start doing work for free and client feels like they still aren’t getting what they paid for, a good relationship can fall apart lightening fast.
For this simple project, we are going to just add a few pages and sections.
- Header/Footer
- Home page
- Promotional rotator
- Company TagLine / Description
- Service item promotional boxes
- Services – lists all services on the main page
- Service profile page – a page for each service with more information and a sales pitch
- Our work – a list of projects completed
- Project pages – A page per project with a case study and more information about the project
- Company – text and information about the company
- Page/Modal – a A page or modal box for each staff member
- Contact
- Contact info
- A contact form
- A Google map
- Social media icons and links to the social platforms
Figuring Times Per Item
As you went through writing your SOW, you may or may not have been putting in times as you went along. Whether you did or not, it is important to get the approval of those actually doing the work. The easiest way to hold someone accountable to hours is for them to set the hours for themselves.
We always ask all production team members to make sure that the times they have for each feature is correct before sending it to the client. Even then we often still pad the time a bit to make sure.
Now that your team members have reviewed and edited any times necessary, it’s time for you to review and send this out for client approval!
Getting Client Approval
This is probably the most important part of the process that SO MANY designers and developers don’t do or don’t do well. You need to get client approval either in a written format or digitally signed. Either way, it needs to be legally binding. This can mean that you:
Get a contract signed either digitally or on paper
If this is a work order and you already have a contract governing this work, you still need an approval noted somewhere; email, paper, a digital signature, just something to cover you if a client comes back and says they didn’t approve the work and doesn’t want to pay for it. The more thorough of an approval, the better. The best bet is to get a contract signed each time.
Using an electronic approvals system enables you to use your own contracts or approval documents to get a digitally signed signature for every single new thing you do. Take a look at the approval system article to learn how to use this system.
Get Started on Your Work!
Alright! Now that you’ve got your:
Creative brief
Scope of work (SOW)
Team approvals on time to do the work
Client approval and contract signature
It’s time to get to work! All you need to do now is send that first invoice and get started working!
Jason Long is the founder and CEO of BrainLeaf. A self-professed serial entrepreneur, he is always interested in new businesses, new ideas, and new ways to change the world. He has over 15 years of experience in design and development, he has served in a variety of different roles ranging from designer to CEO. He spends most of his time focusing on the build and development of new ventures while trying to travel the world.
