Websites remain one of the best channels to attract people to your product or service and convert them into customers.

Building a fast and responsive site increases your company’s credibility and brand identity. It saves you time on customer service, improves your sales, and provides new prospects with information on your products and services.

Nevertheless, building a good website is no easy task. The website project management process can quickly become messy and feel like it’s never-ending.

It’s especially easy to lose sight of priorities and delay implementation when new bugs, improvements and pages are constantly lurking around the corner. Not having an effective web application project management flow will make the overall experience unproductive and demotivating.

With three migrations over 6 months and hundreds if not thousands of bugs, improvements, new pages and designs we have faced it all. We tested multiple project setups, timeframes and remote work tools.  

We’re now writing this all-in-one website project plan template to prevent you from going through the same issues. It might even help you with improving productivity in your organization.

The article starts with the foundations of website project management and continues with a website project plan template that replicates our internal workflow.

What is website project management?

Website project management is a collaborative process through the delegation of tasks and roles. Work managed ranges from technical SEO to page design and development. Each task is a building stone to the creation and maintenance of a fast, searchable and informative website.

The workflow starts with a website project manager who schedules and assigns tasks within due dates and milestones. Tasks are moved to different stages and passed between team members until improvements are pushed to the live web application.

There are different project management frameworks you can pick from to organize the process. Make sure to select the one that fits your team best, and remember to keep things easy and streamlined. You can also check out this resource on agile vs waterfall if you’re looking to learn more about project management.

A good website project plan ensures that tasks smoothly move across different project stages. Team members should be informed in time, documentation should be up to date and accessible, and priorities should be aligned across stakeholders.

If you’re building websites for external clients, then good project management also strengthens relationships. By keeping everything in check you can maximize for asynchronous work, meet client demands and keep them involved across project stages.

Getting set up

Think of building and maintaining a website as an ongoing responsibility with timed milestones that highlight the release of a new set of improvements. Internal website projects are almost never truly completed. There is always a bug to fix, SEO improvement to implement, or new pages to develop.

To set up and keep website projects moving you need to assign roles within your team. Note that one person can hold multiple or even all roles when developing a website.

Within our team there are generally 3 people working on different site related activities. Nevertheless, each person might manage multiple elements within that workflow or even share certain tasks.

We combine the following team roles to structure the website project management of Rock:

• Project manager
• UX designer
• SEO specialist
• Content writer
• Graphic designer
• Website developer

Project Manager

The project manager is at the heart of website project management. This person implements the communication plan, coordinates tasks and sets up milestones. They are in charge of creating a project plan, assigning tasks and setting timelines.

Website building is a collaborative process where the website project manager takes the lead in prioritizing activities and setting deadlines. They make sure that work is aligned with the organizational strategy and that output requirements are met.

Within our team one person takes full responsibility of the project manager role and holds accountability for the overall project moving forward. Here are a few of the many responsibilities our website project manager takes on:

• Decide on the frequency of implementation cycles: Implement changes from staging to live every week, two weeks, quarter, once a year?
• ‍Allocating tasks and prioritizing: Who is working on what task? What improvements, bug fixes and new pages should be prioritized?
• ‍Managing deadlines and making sure that milestones are reached: Are the cycles reasonable in workload? What task is close or far from the current deadline?
• ‍Keeping documentation of the website building process: What was implemented in each cycle? Where is information stored?
• ‍Working with team members individually to resolve issues: What happens if someone becomes less available or if a task takes much longer than expected?
• ‍Schedule and lead team retrospective meetings: A website project manager should encourage team members to share feedback on workfload and feasibility of each cycle.

UX Designer

A user experience (UX) designer focuses on the interaction between the user and the website. They focus on enhancing user experiences by making sites easy to use and accessible.

A UX designer looks into what the website architecture should look like. Think of how you move between pages, headers, footers and individual page layout. How will a typical visitor behave when visiting your website and how can you most effectively convert them into a customer or user of your product?

Typical activities include building a mind-map and wireframes of a website. UX designers also look into setting up a skeleton layout for each webpage. That is, the different sections, entry and exit points and user experience flows.

SEO Marketer

Building an informative, fast and branded website is extremely valuable. Nevertheless, with many sites publishing content that does not rank, you also need to make sure that people can find your website.

The goal of search engine optimization (SEO) is to increase a website’s position on a search result for search engines such as Google, Bing or Yahoo. By ranking your website high, you target a specific audience and generate more leads to your website.

You want your website to appear more easily for users looking for terms that have to do with your offering.

A complex algorithm has made SEO harder, on top of the already immense content competition on the internet. There are two sets of activities that an SEO marketer might focus on in order to get their website to rank:

• On-page SEO
• Off-page SEO

On-page SEO activities

When designing your different pages, you have to think about what keywords you want to rank for. This can be one or multiple at the same time depending on the length of your page and competitive nature of the keyword.

The on-page SEO marketer will define what keywords need to be present on a webpage and how often they should appear. They might also continuously modify meta titles and meta tags to optimize click through rates from Google.

SEO keyword traffic can also change throughout time as user preferences and interests change. This can lead to changes in the copy of a page or other adjustments to make sure the page receives enough traffic.

On-page SEO also includes focusing on activities such as page speed. SEO marketers typically also implement best practices across the site such as breadcrumbs, in-bound linking and setting up short and descriptive URLs.

Off-page SEO activities

Off-page SEO is to a certain extend a black box in terms of the overall impact of certain activities. These activities focus on making sure that other sites link to your page. Think of backlinks or guest posts as possible activities you can prioritize for off-page SEO.

All in all, the off-page SEO activities focus on making sure that other users can find your page on other relevant sites. This signals search engines that your website offers good quality and relevant content, possibly causing multiple pages to rank higher in response.

Content writer

The content writer will make sure your page has clear, concise and enticing copy that brings prospects in. They should also make sure to naturally incorporate SEO requirements on the different pages that are published.

There are multiple streams of content that you might want to publish on your website. For us, copy and content writing is typically divided into 3 different buckets.

• Webpage: The different webpages give short and concise explanations about the product, why it’s relevant to different audiences and how it typically compares to competitors.
• ‍Blog: The blog is a collection of stories, advice, product releases, announcements and use cases that are shared with users of a product and potential prospects. The copy is typically longer and more story-based than webpages.
• ‍Help center: The help center provides documentation and how-to guides on different functionality that users might encounter within the product.

Graphic Designer

A poor visual design will lead users to bounce right off a website. Whether the website is not intuitive or a chosen color palette is off-putting, that first impression matters.

In this day and age, graphics that spark a user’s attention are crucial in making sure they become a customer.

A good graphic designer will understand the product vision and accurately portray the brand visually. They will produce illustrations, videos, logos, and a color palette that aligns with the brand.

Quality graphic design allows customers to immediately recognize a product and associate certain colors, images or icons with your offering. The right visual cues such as colors, fonts and styles will get the job done.

Website Developer

The website developer takes the page mocks and converts them into webpages. Depending on the content management system (CMS) you’re using, the developer might manually code HTML or use no-code/low-code tools for web building with platforms such as Webflow or Wordpress.

There are typically two sets of activities when it comes to web development: front-end and back-end

• Front-End Development: The front-end developer takes care of what the user sees and how the website works. They take a website design and, depending on the CMS, will proceed to build out the pages with plugins, no-code tools or old-school coding with HTML, CSS, and JavaScript.
• ‍Back-End Development: Back-end developers deal with the server side. They create code that impacts the website’s server and databases. Back-end developers can also implement changes and improvements to optimize the website speed.

Website developers will also focus on site speed, bug fixing, security, maintenance and other elements that keep the website up and running.

5 types of tools we use for the website development process

Throughout the website building process we use a variety of tools. Some directly integrate with Rock, while others are less directly connected to the website project management flow.

Website project management, collaboration & messaging: Rock

If you’re not yet familiar with Rock, we’re an all-in-one messaging platform. Rock combines chat with task management, note taking, file storage and meetings. This allows us to keep our complete website project management workflow in one place:

• Task management: Rock has built-in task management. Team members can see their tasks through list, board, and calendar views. Tasks are typically moved through lists like ‘To do’, ‘Doing’ and ‘Done’. Work can easily be filtered by assignee or labels such as “Development” and “SEO”.
• ‍Real-time messaging: Send unlimited messages, audio messages, polls and other information in a space. You can even move messages over to tasks, topics and notes.
• ‍Documentation: Write down important information on the Notes mini-app. Think of meeting agendas, documentation or updates. You can also document information through the Files mini-app.
• ‍Meetings: Rock makes setting up a meeting easy when you really need one. Team members can even send short loom videos right from within the app if it’s not urgent or important enough to start a meeting over.

All the previously mentioned functionality is completely free. Further down we will explain in detail how we use our own platform to manage web project management activities.

We also write down the steps you should follow if you want to optimize your own workflow or start a new website project. This can help with achieving company goals and objectives.

Design & UX: Figma

We mostly use Figma for creative work on the web design project management front. These are the main activities we use run on the platform:

• Mindmap: When we started out we created a mindmap on Figma to decide what different pages we want to work on, which ones to prioritize and how visitors move within the website.
• ‍Wireframing: We often create a skeleton of a page with the different sections and what point they should bring across. We then use frames within Figma so we can easily switch the sections around after they have been created.
• ‍Visuals: Because a lot of our images are product based, we take screens from the UI/UX workflows and convert them into custom marketing materials for the website.

Figma seamlessly connects with the web design project management workflow as we can attach designs to individual tasks. We sometimes also add early stage mocks to topics for discussion. Figma designs can also be added to meeting agendas in the Notes mini-app.

Note that you can also use Miro for creating mindmaps. It might even be a better fit for the activity. Rock provides a native integration for Miro to attach relevant files to tasks, notes or topics for free.

If you use Adobe Creative Cloud instead of Figma for website development, then you can also freely integrate those designs to the Files mini-app on Rock.

Content writing & SEO: Google Drive, Loom & Yoast

We mainly use 3 different platforms for managing the content writing and SEO process of the website.

• Google Drive: We write down our documentation, copy and guidelines on Google Drive. It’s easy to switch between documents or sheets when writing down information on the next webpage, SEO improvements or new blog posts.
• ‍Loom: We use Loom to to share asynchronous videos between team members. These might include walkthroughs on workflows, content or new webpages. We watch videos back and add comments if there is anything we did not understand.
• ‍Yoast: We manage most of the on-page SEO with a premium Yoast plugin. This allows us to track articles for general readability as well as calibrate keywords, synonyms and keyphrases.

Loom and Google Drive natively integrate with Rock. We use the in-app Loom integration to quickly record a video if something is too difficult to explain in words.

We also use the Google Drive integration in our website project management by adding relevant folders to the project spaces. This way we can attach Google Drive files to tasks, notes, and topics.

If you typically use a different cloud file provider, then you can basically do the same with Dropbox, OneDrive or Notion within Rock.

Development & implementation: Siteground, Webflow, Wordpress

We have mix several tools in the web development project management process. We wanted to combine the Webflow experience with the powerful plugins and SEO functionality of Wordpress. Thus we decided to use both in our website development.

• Siteground: Siteground is our current hosting provider. We find it to be a speedy, well integrated option with good support options.
• ‍Webflow: Most of the webpages are currently configured on Webflow. We like the app for the intuitive no-code environment that provides fast and customizable experiences.
• ‍Wordpress: We convert webflow pages into Wordpress. The main reason for this is the advanced SEO management that Wordpress provides plus the thousands of plugins available in the marketplace.

Moving between web development stages is done through a thorough check lists under the webpage task. We first develop the page on Figma, move it to Webflow and subsequently replicate the page on Wordpress.

We keep dedicated checklist items for each stage in the development process. This way everyone in the team knows how far along we are with website improvements.

Manage your website project management workflow by following these 6 steps

The following section summarizes the website project management template in 6 simple steps. This process is easily implemented by any team and completely free.

Throughout the last few months we trialed different processes and communication strategies and we’ve found this to be the most impactful for a starting team. It is also a reliable way for making your deadlines, documenting information and keeping everyone involved.

1. Configure the required spaces and establish how to communicate across them

We manage the website website development plan with tasks across a few different spaces. Depending on the scope of your project, can create one dedicated space, organize tasks across spaces or even set up a whole workspace for the project.

You can create unlimited group spaces and add anyone in and outside of your organization to them.

If you’re working with clients you can create a separate space for them or even a workspace if you want to organize client communications across multiple spaces.

Spaces combine all task functionality you might need alongside full-fledged messaging, note taking, file storage and meetings. Spaces have different functions within our team. We organize the website project management communications across 3 spaces:

• Strategy space: This is the highest level and and where we discuss the overall project. It’s where we discuss objectives, results and the overall direction of the project throughout different milestones of the website development plan.
• ‍Creative space: This is where we create individual tasks and discuss individual issues, new pages, page improvements and other more granular activities.
• ‍Development space: We mainly manage bugs and website errors in a task that is part of the development space. It is organized this way because it involves team members that are usually not part of the creative process. To not overwhelm them with too many spaces we manage these tasks in the space where other development tasks are typically filed as well.

You can follow this set-up or take other routes. Rock is flexible and allows you to create as many spaces as you want and interlink tasks, notes and topics between them.

2. Integrate your website management toolstack

There are 3 types of tools you should consider integrating into your space when setting up the website project management workflow on Rock:

• Design tools: Figma or Adobe Creative Cloud
• ‍Cloud storage providers: Google Drive, Dropbox, OneDrive, Notion, Miro
• ‍Meetings & Video: Zoom, Google Meet and Loom

Design tools

Searching for the correct page, sharing links and juggling different platforms can quickly affect your productivity. We integrate our design folders to the Files mini-app of every space so work can be streamlined. It also allows anyone in the team can quickly find and access design files.

You can basically add your complete design folder and then attach individual pages or files to tasks, notes and topics. Adding files to spaces is also useful so you can start using features such as Set Aside to keep important files in a general panel you can access across spaces.

Integrating Figma or ACC only takes a few minutes. Select “Files” on the top of your space, select the platform you want to integrate, authenticate the account and subsequently select the relevant folders.

Once an account has been authenticated you can directly start adding folders in other spaces as well.

Cloud storage providers

SEO workflows, new content, strategies and team planning is oftentimes stored in a cloud storage provider. As your team grows and more projects are added, these platforms quickly become saturated.

We integrate our cloud storage providers to our spaces to reduce folder searching and link sharing across the team. By directly having all documentation in one space, everyone can access important information without getting distracted with non-relevant folders.

Just like Figma and Adobe, the integration of Google Drive, Dropbox, OneDrive, Miro and Notion only requires a few simple steps. Select the Files mini-app, pick your tool, authenticate and select the folders you want to add to the space in question.

You can now continue adding folders from the same tools in other spaces and different projects you’re working on.

Meetings & video

We often encourage our own team members to say no to meetings. Nevertheless, when really needed you should be able to jump on a quick call with anyone to align on a task, priority or discussion.

To do so you can integrate with Google Meet or Zoom. Just like the file integrations, the only thing you have to do is select the camera icon in the bottom of your screen, select your app and authenticate. Once that’s done you can start new meetings in any space.

You can also use Jitsi which does not require authentication and is an open-source free videoconferencing platform.

Now, we also mentioned that we used Loom to share asynchronous video with the team. In case something is not urgent enough for a meeting, you can still give the message a personal touch by using the Loom integration, which can be accessed from the same panel as the meetings.

3. Configure the task board

The Tasks mini-app is a powerful project management tool that allows you to coordinate your project with functionality across the board. We organize all of our tasks in a ‘backlog’, ‘doing’, ‘to be reviewed’ and ‘done’ setup.

There are a variety of different tasks that we organize in different ways, let’s do a deep dive into the most notable ones that you will most likely work with when setting up a website project of your own.

• [Strategy space] Cycle/Sprint task
• ‍[Creative space] New webpage creation or improvement
• ‍[Creative space] SEO tasks
• ‍[Development space] Bug management

Strategy space task: Cycle/Sprint task

The highest level documentation in the website project management workflow is done with a cycle or sprint task. These tasks summarize all the sub activities within the implementation time interval. We typically use these to separate project vs task.

Depending on how large your project is, you can either create 1 task for this, or separate it between different workflows such as SEO, content implementation and back-end work.

Here’s how we typically use the different task fields in a cycle/sprint task:

• Assignees: This task is typically only assigned to the project manager or main project owners. You can always leverage the follower functionality If other team members are actively involved but not necessarily assignees. They will still receive notifications of all task activity without being seen as an assignee.
• ‍Start & due dates: Cycle tasks typically move between timelines. You might want to push changes to your live website every 2 weeks, once a month or every 3 months. Make sure to use start and due dates and sprints to organize these different timelines.
• ‍Labels: You can add a label such as “website” or “website project” to these tasks so you can easily filter the task board for different cycle tasks you currently have in the pipeline or have worked on in the past.
• ‍Checklist: A notable highlight of these tasks is that they leverage cross-space @mentions a lot. The different granular tasks are in different spaces, but thankfully that’s not an issue as you can just @space:task on Rock and directly link to tasks in different spaces.

Check out the image below for an example of a cycle or sprint task in our web application project management process.

Creative space task: webpage creation and improvement

The creation of a new webpage or it’s improvements can quickly become a multitude of tasks. We use a single task for web design project management. After testing some different configurations, we ended up organizing work in the following way:

• Assignees: Our team is quite small so there are only 2 people assigned to the task typically. You can always add people later on if their input becomes relevant. Work and responsibilities typically include all skill sets within your website team.
• ‍Start & due dates: We are not very strict with this and typically add the task to a sprint. Our cycles are typically 2 weeks as well so it becomes unproductive to keep track of things with granular level timelines.
• ‍Checklist: We make use of a well-documented checklist to highlight progress. The checklist includes: content framework, page outline, content writing, design complete, webflow complete, animations complete (if relevant), transferred to wordpress.
• ‍Attachments: We attach the page mock from Figma to the task so we can quickly get to work. These are usually separated across website categories: features, use cases, paid plans, homepage, etc.

We sometimes want to make changes to an already improved webpage with a new section, visual, or changes to the copy or visual elements. We typically just move the initial page task back from ‘done’ to ‘backlog’ so we can access all the past discussions.

It also provides direct access to the description and attach Figma files so we don’t have to redo these activities. This also makes it easier to retrieve past discussions, as we’re mindful of the number of tasks we create for the scope of work.

Creative space task: SEO related tasks

The team works on a wide variety of SEO tasks within each cycle. We typically edit the tasks to provide information on the following items.

• Assignees: SEO related tasks are typically assigned the content writer and SEO marketer. They sometimes also require input from the developer if there are any technical implementations.
• ‍Labels: We typically highlight whether a task is inbound or outbound SEO work.
• ‍Attachments: A lot of our SEO work is stored on Google sheets or docs. We typically attach these to the task so we can more easily access them.

There are typically tasks that repeat across cycles. We highlight the cycle in the task title (i.e. “September Sprint”) and duplicate the task when starting a new set of activities. Think of optimizing for orphaned content, in or outbound link communications, collaborating on guest posts, etc.

Development space task: Bug management

Bug fixes are part of the web development project management process. We typically file all bugs in one long checklist and use the @attachments function to add images of issues we are facing on the website.

There are a few information fields that we mainly use for these tasks:

• Assignees: The task is typically assigned to the developer although sometimes it requires input from design or UX as well.
• ‍Checklist: Different bugs are added when they’re flagged by a team member or user and manually ranked as high, medium or low. We use the use the @attachments function to refer to images of issues we are facing on the website.
• ‍Attachments: These are typically screenshots or videos that provide more context on the issue at hand. Text is often not enough to provide more information on something that is not working correctly on the site.

We typically try to fix 10 bugs in every cycle and refresh the work every now and then by duplicating the task so the checklist does not become too long.

4. Set up your development cycle

Development cycles are recurring time intervals between which we implement new improvements to the website. A development cycle is typically organized in a cycle or sprint and includes page creation improvements, SEO, and bug fixing tasks.

Development cycles typically run for 2 weeks. After that we push the changes live and start with a new set of tasks. Here are a few things you should keep in mind when setting up your development cycle:

• Decide on a timeframe
• Prioritize tasks and add them to the checklist
• Stick to your deadlines

Decide on a timeframe

While we implement changes every 2 weeks you can pick a timeframe that fits your website project management style. Some teams run weekly, monthly, quarterly or bi-annual improvements. Note that the larger the timeframe, the more changes.

A bigger set of changes can often cause more bugs and problems to arise with the site. We keep our cycles short so that it’s easier to pinpoint issues as they come. We also believe in progressively adding small improvements rather than waiting too long for changes to be implemented.

It is completely up to your team, client communication (if external web project management), and priorities how often you set these. We do recommend to pick one interval and stick with it for consistency. That is, don’t change the length of the intervals too much between your cycles.

Prioritize tasks and add them to the checklist

We suggest creating new tasks as ideas occur and add them to the backlog. No need to add assignees to them yet.

Use the ‘priority’ field on the different tasks when doing this. Project managers can more easily pick the important activities out of the list by filtering between the different categories in board view.

You can currently select the following priority levels on Rock: urgent, high, medium, low, lowest. After each implementation you can always revisit the priority tag added to the tasks in the backlog.

Once you start planning a new cycle, you can check all the tasks in the backlog and pick the ones you think will the biggest impact or are quick add-ons. @mention them in the cycle task and keep everyone in the loop on what activities need to be completed in the next cycle.

Stick to your deadlines

This is arguably the hardest part of website project management. Tasks can often take longer delaying the release. We recommend sticking to the deadlines and keeping open communication channels on workload, time investment and priority.

Sometimes it’s better to remove a task from the list and push the changes live than to wait another week for your next release. After the cycle is completed you can reconvene with your team and have a discussion on where expectations deviated from actual output.

Open communication channels are key to preventing a toxic work culture. Keep your team in the loop by leveraging check in questions for meetings, positive affirmations for work and balancing types of communication styles within your team.

5. Achieve milestones and provide feedback

We set up a recurring retrospective meeting. There are a variety of topics that are discussed in these meetings, but we always follow our own virtual meetings best practices. We typically require a meeting agenda to be shared at least 24 to 48 hours in advance so everyone can prepare accordingly.

These meeting agendas include the following:

• Action items: What are the next steps? Do you need to brainstorm anything with the team?
• ‍Updates: This is usually a good opportunity to use check-in questions, share metrics and site performance numbers or share other general personal or organizational information.
• ‍Discussion topics: What are the key things you want to talk about? Do you need additional input or information about anything?
• ‍Relevant files: attach design or cloud storage files the team needs to review prior to meeting.

Check out other meeting agenda examples from our team if you’re looking to minimize meetings while keeping the team productive and connected.

6. Continue adding new cycles

Work is not done after a cycle is over. The website project management process is always ongoing for us. Some weeks might be busier than others depending on the bandwidth in the team.

Repeat step 3 to 5 and continue improving your website and optimizing the customer experience. Make sure to create new tasks for new pages, bugs or improvements and add them to a new cycle once they become a main priority.

This set-up allows you to celebrate your wins at the end of each cycle. While the website project is often an ever-going activity, you can use this website project plan template to give the team a sense of progress and accomplishment.

Website project management with Rock

Websites are a great foundation for product growth and prospect conversions. Make sure you get the most out of your hours invested by signing up to Rock and implementing the tips and process for website project management.

We are sure that you’ll be completely set up for the next website project in no time. Would you like to ask some questions to the team or learn more about our internal workflows? Join our open community and share your thoughts!