You’ve got an interested client and you’re ready to hit the ground running. Before you start pounding out code, there’s something you need to do first: lay out a plan. Sure you’re eager to start turning out pages, but a website project management plan is crucial to maximizing success and minimizing the chance of failure.
But exactly where do you start in making this plan? If you’re not well-versed in the ins and outs of the web development project management process, you are not alone! But no worries, we’re here to help set you on the right track.
9-step website project management checklist
Every web development shop is unique and no two designers follow exactly the same process. However, identifying a standard procedure that you can step through over and over again has lots of benefits. The following checklist is a solid starting point.
- Outline the project and define objectives.
- Sign the contract and collect a deposit.
- Begin design.
- Start development.
- Beta test.
- Sign off on deliverables.
- Invoice final payment.
- Hand over the keys.
- Follow up.
This checklist is designed to help you (and those who work with you) stay on track and ensure you don’t miss any important steps. You’ll always know where you are in the process and what lies ahead. Expand and refine as you see fit.
1. Outline the project and define objectives
Speak to the client to get a general idea of what they want. Turn this into an initial list of objectives that can be discussed/confirmed with the client. This doesn’t have to be a 30-page proposal with professional graphics. A simple list will do at this stage. Here’s a partial example:
Two types of users:
- Visitor (a person not logged in)
- Registered User (a person who is logged in to the system)
Visitor privileges:
- Can view all product pages
- Can complete guest checkout
Registered User Privileges:
- Can store credit card for future use
- Can manage personal profile
This helps you set a price for the project and clarify the scope.
If your client balks at the price, you haven’t wasted a lot of time writing a fancy proposal only to have it rejected.
If the client signs on, you can have further discussions and add greater detail to the outline.
Your final proposal can still be in list format, but be sure it includes all deliverables and details all functionality. It should also specify what will be delivered when. This document is your protection from scope creep.
2. Sign the contract and collect a deposit
Don’t start work without money changing hands. Completing all work and invoicing at the end is a recipe for stress and unhappiness.
Instead, collect a deposit up front.
Then set specific milestones for additional payments. If the project is small, the second milestone might be completion. If it’s large, you may have multiple milestones.
3. Begin design
Now that you and the client have agreed on the specs, it’s time to lay out what the website will actually look like.
This is where prototypes come in.
With a small project, prototyping is completely unnecessary, but on larger deals, you may need to create one.
A prototype is basically a nonfunctional version that allows the client to see what the finished product will look like before you’ve invested in developing the behind the scenes functionality to actually make it work.
Often you can get away with wireframes. A wireframe is a layout of a web page that shows what will exist where on key pages. This can also help ensure the navigation layout hits on all the user expectations. Wireframes focus on the site’s structure and don’t have to include design elements or fonts.
In either case, prototype or no, show the client your design and tweak as necessary.
4. Start development
This is where you (or your team members) put your fingers to the keyboard and really start cranking. This is the time to:
- Set up your development environment, including SSL if you’re going to use it.
- Determine your URL strategy, including setting up www to non-www redirection, or vice versa.
- Install necessary software.
- Obtain graphics and other collateral.
- Create an error-handling strategy.
- Create an accessibility strategy.
- Build out the site and navigation.
- Add social media links.
- Set up and test contact forms.
- Set up analytics.
- Optimize for SEO.
- Optimize page load speed.
Even though you may be elbows deep in HTML, CSS and JavaScript, it’s important to pick your head up from time to time and communicate with your client. Otherwise, to them, it’s like you’ve just taken their money and disappeared. Instead, make them feel taken care of even while you’re head down working. A few timely emails will do the trick.
5. Beta test
This is where you ensure that your work is up to snuff and squash any pesky bugs.
Things to check include code quality, page content, and user experience. Verify that the site works properly on a variety of devices (you made this responsive and mobile friendly, right?).
You can use tools to help with this proofing, such as:
Verify that you have the necessary SEO tweaks in place, such as unique page titles, appropriate keyword placement, and relevant alt tags.
Don’t leave any lorem ipsum text behind and make sure images are appropriately optimized.
6. Sign off on deliverables
Release the site to the client. Make tweaks if necessary. Bask in the glow of your amazed client’s appreciation. Most importantly, obtain agreement that you’ve delivered as promised.
7. Invoice final payment
You’ve met the objectives, the site is up and running, but you still hold the keys — i.e. the hosting information and relevant logins. You don’t need to point this out to the client, but you’ll know that you still control the site until final payment is received.
8. Hand over the keys
Payment in hand, pass the site over to the client.
This might mean simply handing over the relevant credentials, or it could involve transferring the site from your development server to a live server. If the latter, be sure to run those quality checks again — make sure forms are sending to the right place, links are working, etc.
9. Follow up
A successful launch should not be followed by radio silence.
Instead, keep in touch with your client and make sure they know you’re available for future needs.
This is the time to send a follow-up survey asking about their satisfaction with the process and the final site. It’s also a great moment to grab a testimonial.
Website project management software
The above checklist gives a big-picture view of the web development project management process. Within each step are multiple tasks that someone needs to complete. Keeping track of what’s done and what’s on tap is important, especially when working in a team.
That’s where project management tools come in.
They help you set out clear tasks, define specific goals, and keep track of who is working on what.
The following website project management tools are favourites for keeping track of the nitty-gritty details and communicating with team members. This list includes a mix of the top paid and free website project management software tools, in alphabetical order. Most are available on multiple platforms.
Editor’s note: All costs listed below were current at the time of writing but are subject to change.
Airtable
In Airtable, project management is accomplished via a powerful mix of task lists, spreadsheets and databases that let you create dynamic views to sort and view data in a way that meets your needs.
It supports Agile development, budgeting, in-app chat, client management and a host of other functions. It integrates with external apps like Google Drive, Dropbox, MailChimp, Slack and social media platforms.
A key feature is that you can create custom dashboards to display the data that’s most important to you.
It also provides grid, calendar, Kanban and gallery views. Basically, you can set up any view your heart desires.
Because it is so powerful, it also has a bit of a steep learning curve and might be overkill for small teams or individual developers.
PROS: Generous free plan, powerful visualization tools
PRICING: Free plan includes unlimited boards, 1,200 records per database, 2 GB attachment space per base, revision and snapshot history up to two weeks. It doesn’t include access to Blocks (graphs, maps, data views). After that pricing starts at $10/user/month for the Plus plan, and $20/user/month for the Pro plan, which gets you Blocks. An enterprise plan is available also.
Trello
Trello is a task management powerhouse that is built in Kanban style. Kanban is a system that uses cards for tasks and organizes those cards into stages of work, on boards.
Typically each task gets a single card. The card can be assigned to one or more people. Cards can be moved between boards as tasks progress toward completion. You can attach files, add checklists, and post comments associated with the tasks.
Trello supports task assignment and tracking, prioritizing and real-time notifications and updates, among other features. It also integrates with other apps, including the vast Zapier library.
PROS: Easy to get rolling. Generous free plan
PRICING: Free plan gives you unlimited boards, lists, members, attachments, checklists and one Power-Up per board. File attachments are limited to 10 MB. The next tier is $9.99/user/month and gets you app integrations, team overviews and more security. An enterprise plan is also available.
Asana
Asana is a cloud-based tool that delivers a ton of features.
It’s suitable for projects of all sizes and is used by large enterprises such as Pinterest as well as smaller organizations.
Smaller development shops might find the array of features more than they need, and the learning curve can be a bit steep, but it’s really a matter of personal preference. There’s also an associated mobile app so you can access your dashboard from your mobile device.
One of the favourite features of Asana is that team members can have shared conversations regarding individual tasks, along with attachments, subtasks and more.
It also provides a wide range of integrations to apps such as Google Drive, Slack, Zapier and Github, among others.
When you set up an Asana account, you’ll indicate what type of projects you work on, such as design or general project management. You can also create custom templates. Once setup is complete, you can create your first project and start adding tasks. Different views allow you to see tasks assigned to specific individuals or an overall project view.
PROS: Substantial features in free plan. Great for team collaboration and communication.
PRICING: A limited basic account is free. It allows up to 15 team members, unlimited tasks and projects, and basic dashboards. The next tier is $9.99/user/month and offers additional team members, admin controls, data exports, and more reporting and support.
Basecamp
A go-to for many project teams, Basecamp offers a centralized platform for assigning and tracking tasks and sharing discussions with multiple team members. Basecamp can serve as team headquarters for projects of any size, though it shines at the small- to medium-size team level.
Each BaseCamp project includes six core tools: a to-do list for tracking tasks, a message board for announcements, a chat feature, a scheduling tool for tracking deadlines, a document and files repository, and a unique check-ins feature that automatically asks team members for updates on a preset frequency.
PROS: In-app chat tool, automated status check-ins feature. Flat-rate pricing.
PRICING: After a 30-day free trial, Basecamp costs $99/month for unlimited users and projects. It’s free for teachers and students, and nonprofits can get a discount.
BeeWits
This web-based tool was built specifically for web development project management. It includes many pre-built templates, and you can pick and choose tasks to add to your project rather than creating a list from scratch. Then team members will always know what to do next and it’s easy to track the current status of the project.
When you sign up for BeeWits, a hand-holding tutorial walks you through setting up your first project.
You can indicate the type of site you’re developing, such as WordPress, Joomla! or Drupal, which will affect the pre-built list of tasks you can add to your project.
Adding tasks is as simple as dragging them from the template list to your project list.
You can also add team members and clients. Once you’ve set up a project, you can keep track of your progress through the dashboard. This product is most suitable for small businesses and freelancers.
PROS: Built specifically for web design/development.
PRICING: Beewits offers a free trial, then starts at $19.99/month for 10 active projects with unlimited users.
ClickUp
This is all-purpose, potentially free project management software that can be used to track and manage projects in any industry. It’s marketed as a less expensive (or free) alternative to Asana.
When you sign up for ClickUp, you’ll step through an initial setup for your account. You’ll indicate things like whether you’re a solo practitioner or need team features, and whether you want to integrate with other software such as Slack, GitHub, Bitbucket, GitLab and Zapier.
You can import tasks from other apps, including Asana, Trello, Jira Software, Todoist and a CSV file.
When you set up a new project, you can opt to use a template, such as the one for software development (there’s no preset web design template).
Once you set up a new project, you can view it multiple ways —by project board (see illustration below), by task list, or by time (if you’ve set task deadlines).
ClickUp can be used by single designers or teams.
When working with the app, you can opt for a personal view, which will show only your responsibilities. The team view shows the overall status and tasks.
PROS: Free plan is generous.
PRICING: Unlimited users and most features free forever. For $5/user/month, add storage, reporting, and unlimited use of custom fields.
Freedcamp
Used by large businesses such as Airbnb, Google and PayPal, Freedcamp is a cloud-based organizing tool that is crammed full of features.
Tools include a master task list, subtasks and private and public tasks. There’s also a Kanban board, where you can manage tasks by dragging them into different columns.
Freedcamp isn’t just about tasks. There are additional tools for scheduling, discussions, issue tracking and time tracking. You can even create a Wiki for group documentation. It also offers third-party integration with Google Calendar, Google Drive, Dropbox and more. Some of these features do require a paid subscription.
PROS: Loaded with features. Core tools are free.
PRICING: Free for all core features. Upgrade to get additional features, such as start dates for tasks (end dates are included with free version), a team Wiki, issue tracker, project templates and Gantt charts. Pricing starts at $1.49/user/month and goes up to $16.99/user/month for the enterprise level.
Wrike
A major player in the project management arena, Wrike serves primarily mid-size and enterprise customers. It allows you to create custom workflows, run multiple projects, and maximize teamwork. You can make plenty of task lists, chart progress, and generate reports to your heart’s content.
When you set up a Wrike account, you can specify the type of work you do and get templates tailored to your style.
Options include project with dependencies, project with phases, professional services, Kanban project, and creative asset & content development, among others.
There’s plenty of guidance provided, with how-to videos to get you started and interactive tips as you go along. Email communication is supported, and an @mention feature associates emails with a particular discussion or thread.
PROS: Helpful guidance. Extensive email communication integration.
PRICING: A basic account is available for free, but it offers only a shared task list for teams with up to five members. To get project planning and collaboration, the cost starts at $9.80/month per user and goes up from there.
The bottom line
A key decision when choosing project management software is whether you want a particular tool, such as one focused on task management or specifically on web development, or an entire toolbox that handles a greater range of project management functions.
The former will be quicker to learn; the latter offers greater power to those who need it.
BaseCamp, BeeWits or Trello are among the simpler to learn options, while Airtable, Asana, ClickUp, Freedcamp and Wrike are on the more complex and robust end.
Whichever you choose, remember you can always save time with free tools and resources for web designers and developers by joining GoDaddy Pro for free!
