When I was a kid, my mom worked with many local community theaters. I grew up watching her be a Stage Manager – basically a Project Manager for shows. Her job was to keep all the processes moving along, make sure everyone had what they need, and communicate between departments to solve problems.
In watching her – and dozens of other theater professionals – I learned the value of a highly organized and segmented process.
A theatrical production (in most cases) has a very specific sequence of steps.
- The show is chosen and decided upon well ahead of time. Usually a whole years (or seasons) worth of shows are picked at once. The script is acquired and rights to use it are purchased.
- Hiring is done, compiling directors and costumers and musicians and painters and whatever other roles are needed. Those people start having meetings about their creative visions.
- Auditions are held to cast the roles.
- Rehearsals start – usually there is first a table read (we all sit down and read the script together for the first time)
- …Then regular rehearsals (we work on memorizing lines and learning blocking)
- …Then dress rehearsals (we have our lines memorized and rehearse with full costumes and sets)
- …And then tech week (we rehearse in order to make sure all the lights and sound work perfectly)
- The show is ready to go up!
Deviating from this process is pretty unusual. Not having one step complete before moving on to the next can be stressful at best and detrimental at worst. If actors don’t know their lines by the tech week phase, the show could be in trouble.
When I started working as a website designer and developer, I treated sites like shows. They need to be planned. They need to move from one step to another. Launching a site is like raising the curtain on opening night.
Challenges
When you work on a website, there are a lot of things to plan and account for. Especially if you’re working with a team of people on the project. If you’ve found yourself acting as the Project Manager for a website launch, here are some of the challenges you may face:
- Getting the client to tell you exactly what they want from the site.
- Getting copy and other content for the site pages from the client.
- Sourcing the right tools, software, and assets to make the design work.
- Achieving a balance of client interaction – not too many reviews, not too few.
- Dealing with issues as they arise in order to keep the project on schedule.
- Bridging the gap between differing viewpoints – like getting the designer and the developer to understand each other.
- Keeping the design and function of the site within scope and accurate to what the client wanted.
Solutions
Over the years, I’ve spent a significant amount of time perfecting my own process for leading a website design project. Primarily, I’d use it alone when I’m the one doing all the work. But these processes are easily adaptable to include any other jobs or teams required.
Note: I work exclusively with WordPress. If you work with another CMS, you’ll definitely have some different steps. But the overall process shouldn’t be too far off.
Asana
I like using Asana, an online project management tool, to track my internal tasks. I can break the project into phases, then tasks, then sub-tasks. When I bring others in, I can assign things to them. And then I can save the entire thing as a template and use it again for a new project.
My phases and their included tasks are:
Meetings & Misc.
This is where I store information about the client’s contract, any assets they’ve sent along, and – most important – meeting notes. That way I have a reference section I can go back to at any time.
Planning
During this phase I work on collecting things from the client. I’ll have tasks for discussing, researching, and collecting fonts, colors, mood boards, target audience breakdowns, ideal customer paths, user personas, competitor research, etc. If the client sends a brand or style guide, I upload this here.
Also during this phase I’ll build a sitemap of all necessary pages. And I’ll lay out details about what special or custom functionalities need to be built. I can either outline the extensions or plugins i’ll use, or create tasks for researching new tools.
This post has been kindly sponsored by Web Pro Geeks.
Kick-Off
Depending on how you feel, you may include this step before planning. I have 3 steps:
- Collect Main Content: This includes copy but also images, SEO meta information, which pages and posts are canonical or non-indexed.
- Collect Brand Content: This includes logo files, custom graphics, font files, etc.
- Collect Misc. This includes things like legal statements (Privacy Policy, Terms and Conditions, etc.), details about footer and menu content and layout, and access to things like the client’s host.
Once all of these things are collected, there are subtasks included about how and where to store these things and who to share them with.
Environment Prep
This might be my favorite phase. I’ll have two major tasks in this phase – general environment prep and security/performance prep.
General Environment Prep includes things like:
- Creating the WordPress environment
- Pointing the domain if necessary
- Setting default WordPress settings like permalinks
- Installing necessary plugins
- Installing a theme and child theme
- Creating a staging site, if needed
- Setting up automatic backups
You get the picture!
Performance and Security Prep includes things like:
- Installing an SSL certificate
- Configuring plugin settings, like caching or malware scanning
- Giving your team specific user access to the site
- Adding site access credentials to a password manager
- Removing default themes
- Adding a Coming Soon page, if needed
Design and Build
Now the fun part – production! Depending on the project you may want to build this section in different ways. If you create wireframes, mockups, then page builds, create a task for each. If there has to be custom development done, there should be tasks outlining that process. Either way, you should break down your tasks per-page of the site. And then give yourself a checklist of what each page should need.
For example, by the end of this phase, each page should have it’s design and copy, it’s meta information, any special integrations, an and calls to action. You should take this time to make sure the page is accessible and works well on mobile.
I’ll also have a task here to create templates or global items, like headers, menus, footers, a custom 404 page, etc.
At the end of this phase, I usually have a whole task for feedback. So when the client reviews the pages, I have a place to track and complete revisions.
Launch Sequence
Finally, we’re ready to get ready for launching the website. I have four main tasks in this portion: testing, quick launch tasks, deep pre-launch tasks, and post-launch tasks.
During testing, there should be sub-tasks for testing things like:
- mobile responsiveness and speed
- web accessibility
- any forms
- any ecommerce functions
- all buttons, links, and redirects
- mixed content
- social media previews
I sort the pre-launch tasks into two separate sections – quick and deep – because usually I can assign the quick tasks to someone else – content manager, VA, etc. – then have the deep tasks reserved for a developer.
Quick tasks can include things like adding a custom login screen, updating plugins and themes, and taking a backup of the site. During this part of the process I may assign any simple things that might have gotten overlooked prior, like configuring a plugin or uploading featured images.
Deeper tasks include submitting the sitemap to Google, setting up any redirects that were caught as wrong during the testing phase, deleting any pages, posts, themes, or plugins that are no longer needed, and adding integrations like the Google Analytics tracking code.
Launch itself can change drastically depending on the project. If this is a brand new site, it might be as simple as removing the coming soon page. You may need to perform a DNS redirect or migrate the site content somewhere else. All of those steps are up to you.
Finally, I go over post-launch tasks. This includes things like enabling search engines to index the site and submitting the sitemap to Google. If launch involved actually moving files or directing a domain, you may need to wait until now to connect things like tracking codes. And I think you should re-do the testing phase to make sure nothing broke during the transfer.
Trello
So, in Asana is where we monitor all the internal tasks. But we need a place to interact with clients, too. Especially during the content collection phase and during revisions. I like using Trello for that process instead. Why?
- Trello is a more commonly used tool
- Trello is less complex than Asana and therefore easier to use
- Trello is much more visual which can make the experience fun for a client
- It’s way more organized and visual that email
For each client, I use a custom background to make their board unique to them. For example, if it’s a design for nutritionist I’ll use an image of some gorgeously styled healthy food.
I’ll invite the client to the Trello board at the beginning of the process and use it for all of our back and forth.
The first column will be for general information and reference
I want the client to know that anything they need regarding their project is right here. So I’ll upload copies of their proposal, contract, SOW, invoice, etc. This eliminates the need to email back and forth when someone needs to check something and it provides a healthy layer of transparency.
Any meeting notes or recordings will also go in this section
The second column will be all about content
I have a whole system about collecting content. (Let me know if I should write an article about that!) But in this column, there should be individual cards where the client can upload their brand and style guide, their logo, or link to different types of copy, images, and video. I say different types of copy because page copy should be separated from blog posts and that should be separated from content about their shop.
The next columns are for reviews
This depends on how many review phases you want to have. For each, there should be a card, or maybe even a whole column, for that milestone. You can use Trello to upload screenshots of wireframes or links to password-protected designs. The client can then add revisions directly into the card. And as they’re being worked on, they can see them being checked off in real time.
The last column is for post-launch
Make this part fun! Maybe change the background of board to something celebratory once the site is launched. And in the final card, upload any off-boarding information you want. This could be anything from training videos or resources… to the receipt from their final invoice… to a coupon for a discount off one of your other services.
*
And that’s it! How does your process differ from mine? Are there any steps or organizational tips you may adopt moving forward? I’d love to hear your feedback.
