An Effective Website Planning, Design and Development Process
Building an effective new website, like many things, cannot be done in a bubble and takes time and collaboration to be successful. We recently completed a website project that went very smoothly because the process was so well planned and organized and because the client participated in the process enthusiastically.
Here is our Guide To An Effective Website Development Process:
Initial Onboarding (1-2 Weeks)
When a client hires us to help with their website, they sign a contract and pay a deposit. Following this, we send them some forms to help get started with strategy and development. These include:
Client Survey: Ask about business in general, goals for website, target audience, competition
Website Credentials Form: Acquire logins for relevant properties like Domain Registration, Website Hosting, CRM and Social Media URLs
SEO Questionnaire: Competitor websites, Google Analytics, ask about any SEO development history, keywords and competition in order to do some initial keyword research for the new website
Content Inventory: I use a Google Sheet and list all front-facing pages on the existing website (if there is an existing website to begin with), with a description of content and images on each page:
Complete Content Inventory: In addition to the “manual” inventory, I use a tool called Screaming Frog to pull a list of urls for the current site. This is used to anticipate the amount of content to be migrated to the new site and/or the number of redirects which may be needed upon site launch.
Since launching this site, I learned about DynoMapper, which looks like a great tool as it more visually maps a website. This tool is recommended by SEO Expert Rebecca Gill, which means it is worth checking out!
Timeline & Teamwork
Also in the Google Sheet, I make a tab with a preliminary/rough timeline.
Teamwork Project Management System
For complete/intensive website projects, I also onboard clients into the Teamwork Project Management system, where I add items as tasks and assign the tasks to stakeholders. Teamwork is also used for storing files and links, and for communication with the messaging tool.
Information Architecture & Initial Content Development (6 weeks)
Working with the client and, ideally, a content writer, the next step is to develop a well thought out Information Architecture (IA) for the website. For the Grace school website, a professional writer was a key to the smooth development of the website. The writer worked with the client to determine their needs, tone, and personality. She provided clear direction for navigation as well as messaging, tone and even made some creative suggestions for the website design. This is the format this writer used, which we found to be very helpful in its detail and presentation. It was an interactive PDF that allowed commenting between stakeholders.
Wireframe (3 weeks)
Once the IA document is approved, wireframing can begin. A wireframe is a visual representation of the IA, broken into pages. We use an app called wireframeapp.io, which helps make wireframe development easier with drag and drop elements, live sharing and easy editing. A wireframe is not a design, but aids in the design process by organizing and prioritizing content.
Design (3 weeks)
We use Sketch to create webpage design prototypes. The elements from the prototype can be exported for use on the web, and Sketch also connects/syncs to Invision, which is a prototyping tool that allows the presentation of the mock-up designs to more closely resemble an actual website and includes some interactivity (hover effects, links, etc.). Invision also has a live share and commenting feature which makes the presentation process more professional.
If the client has a logo, it is best to use or create an svg version of the logo. For the Grace School site, the client had a logo in jpg format, but we needed something crisper and scalable. I used a font finder to determine what font was used for the logo (they did not have a style guide), and recreated it in Adobe Illustrator and exported this as an svg. We use the SVG Support plugin for WordPress, which allows easy implementation of svg graphics using the media library.
In Sketch, I created some hover effects for demonstration, and also created a mobile view of at least one page. For design ideas, we look at competitor websites and other websites in the same or similar category, as well as some unrelated websites, for inspiration. I started with a muted color scheme for this website, but decided to go with brighter colors when I got more information from the writer on the tone the client was looking for. I selected some Google fonts that would go well with the logo and would be easy to read.
Once the design is tweaked and client feedback addressed, the design is approved. This signals the official start of development and coding on a staging server. Often, we will start development to some degree before this point, if there are elements in the design we want to check out before presenting to ensure we can deliver the functionality/effects. Design approval is a key milestone. The design is like the blueprints of a house. Once the foundation is laid and the walls are framed and painters have painted the walls, it is a significant request to ask walls to be moved, foundations to be expanded, and walls to be repainted. A significant request is a change order, which increases the cost of the project. If the design is based on a well thought out IA and wireframe, the chances of changes after design approval are small. If the IA and wireframe steps are skipped, it is more likely that the design will need changes because the content will change as the client “sees” the website unfold. This is why the content planning, architecture and wireframe steps are so important.
Final/Complete Content Development (6 weeks)
Every word of content does not have to be finalized when the design is approved, but it should be close. The first couple of weeks of development are typically spent building the “frame” of the website. The content of all the rooms - the text and images - will be needed once the frame is up. The more thorough and complete this content is, the faster and smoother the building process will be. Here again, working with a professional writer who knows how to format and provide clear, concise copy, makes the process go smoothly and the end result better. Minor edits will likely be made before launch, but loading in copy that is organized and approved is the ideal process.
In addition to the copy, images for each page of a website can be a huge undertaking, especially if there are a lot of pages and a lot of images to choose from. We create another sheet in our Content Inventory Document to list the content, including images, for a website. This helps identify content that is missing and prevent images from being duplicated. The images can be shared with the client in a Dropbox or Google Drive, and ideally should be named for where they will go to make the process less confusing.
Development (8 weeks)
We start with a comprehensive style guide to help code the child theme. For this website, we used the Beaver Builder Theme with a custom child theme. Having this guide made the theme development (style.css) smooth and consistent. In addition, since we use the custom “on page” css for some pages, it was helpful to have this reference for colors and fonts, especially.
Once the content is loaded into the site, each page gets attention for specific design/style and is also reviewed for mobile responsiveness. This process often begins around the same time that the staging site is presented to the client, so that they can see the direction of individual page styling and content and provide any feedback before it gets too far along.
Development moves forward to address any issues found by the client on the staging site, to add additional images and content and make other tweaks to design for various screen sizes and browsers.
Final Pre-Launch Tasks (1-2 weeks)
In the last days before launch, the client sends edits. Most clients want to send edits piecemeal. We request that clients send all edits (or as many as possible) in one document. Using Google Drive/Google Sheet for this is a great solution, because changes can be tracked and new change requests can be added.
Creating 301 Redirects is important to ensure that pages from the former site are not lost when the new website is launched. This can be done with a plugin, or with code to be placed in the .htaccess file. We create a .txt file that is added to the .htaccess file and redirects the old urls to urls on the new site.
We also check to ensure the best version of PhP is running on the site (currently 7.0).
Launch
On launch day, ideally, we work with a client’s IT company to change the DNS settings. If there is no IT provider, we will change the A Record for the domain. We avoid touching the main name servers and/or MX (mail) records if at all possible.
We also ensure the SSL certificate is installed on the live domain.
After the DNS has been changed, we monitor the propagation with a tool like https://www.whatsmydns.net/. We change the settings on the staging site and do a complete Search/Replace to change all the staging urls on the site to the live url. We check the robots.txt file and other settings in Google Search Console and ensure the site is working in Google Analytics. Rebecca Gill has a checklist of tasks for a website redesign specific to SEO, which includes the following on launch:
- Remove no follow, no index on live site
- Review Google Analytics goals to validate URL structure/flow
- Upload new XML sitemap to Google and Bing
- Check Google Search Console for any errors
- Use Dyno Mapper to crawl the new website and report errors
Post Launch
1-2 weeks after launch, we meet with the client to do a one hour tutorial. We create a PDF with some specific instructions for general as well as site-specific tasks. This gives us an opportunity to make any minor edits with the client and show them how to make changes, upload images, write blog posts, etc.
This is also the time when we move clients on to one of our maintenance plans. We have a variety of options so clients can select a plan that fits their needs.
I also do a debrief to compare our estimated to actual hours spent. This is helpful in creating future website proposals. I find things often take longer than I think they did, so it is a good idea (even if it is hard!) to track your time as accurately as possible using a tool like Toggl. (You can read a review of Toggl here.)
Celebrate! Share the good news on social media and document what worked and what you would change to improve the process next time.