Web Design and Development Project Plan - Process Overview by Milestone

Web Design and Development Project Plan - Process Overview by Milestone

Milestone 1: Startup - Clarity, Focus and Execution

Remember this - Without Clarity, You cannot Focus, Without Focus, you cannot Execute without Execution, you cannot win!  Help provide clarity so we can focus on the right things and execute the changes to completion.  Remember many design elements are personal perception and you are not trying to sell to yourself.  

Milestone 1: Onboarding (Action)

First and foremost is the onboarding forms. While we have experience working in your industry, that's simply not enough to design and develop a unique website for your company.  The onboarding forms are the most important place to spend time upfront... with the goal being to pass all of the tribal knowledge you have about your business, your clients, community, products, services and team to our team.  What makes you different?  How can you stand out from your competition? What are your primary call to actions, promotions or conversion strategies?  Dig deep. Take your time. 

1.a Onboarding Process

  1. Complete Onboarding Forms within 3 days of signing agreement/payment
  2. Provide Tech and Social Media Access (login details) to our Onboarding Manager
  3. Get setup/basic training in Client Portal (where you make all your payments, download invoices and statements) Update your Billing information and Credit Card
  4. Get setup/basic training in our Communications and Project Management Porta - Called "Help Desk"

1.b Account Team Assignment

Every client is assigned a team based on the services you subscribed to:
  • Onboarding Manager
  • Account/Project Manager - Day Time
  • Night Time - Project Manager
  • Creative Director
  • Designer
  • Developer
  • Content Analyst & Content Transfer Manager
  • Copywriter, SEO Content Writer, Content Editor, Blogger
  • Auditor - Technical/Backend
  • Auditor - Design/Front End 
  • Server Manager
  • Security Manager
  • SEO Analyst
  • SEO Technical Manager
  • Local Listings Manager
  • Social Media Manager
  • Reporting/Analytics Manager
  • Marketing Strategist
  • Tech Support Manager
The team members you spend the most time with is the Account Manager/Project Manager.  We understand that there are many personality differences and sometimes people's personalities just don't click. Should you feel like you could be better paired with a different AM/PM, no worries or stress needed.  Just submit a request to be reassigned and we will do our best to accommodate you. You never have to get to the point of frustration, just submit the request (includes a brief personality profile) so we can do our best to choose a better fit.

Milestone 1.a Design Brief (Info)

Our Creative Director will complete the following:
  • Review your agreement for functionality and design requirements
  • Review your Account Executive/Sales Rep notes from your meetings
  • Review your digital evaluation and reporting
  • Review the forms you submitted during onboarding
  • Research your competitors and sites you like (as indicated in your onboarding forms)
  • Research your market place and communities
  • Review your social media, local directories and existing website
  • Create the design brief and submit to your project manager and designer
  • Designer will create your initial home page design in Photoshop

Milestone 2: Project Launch Meeting

2.a Project Launch Meeting - With Account/Project Manager (Action)

  • Gather any missing information from the Onboarding Forms and Checklist
  • Review Project Timeline and Expectations - As a reminder, your project timeline is based on the number of pages to transfer, number of pages to write.
  • Review your contracted service agreement
  • Make make additional recommendations for services not included by your Account Executive.  A second set of eyes will always see things differently. 
  • If your design is ready for review (not likely) they will do a cursory review with you and provide you with the Design Review and Change Request instructions below.

2.b Technology Configuration Set Up

  • Server Set Up - 3 Different Server Environments - Live Server, Dev/Staging Server and Backup Server
  • Dev Site Creation
  • Wordpress Installation
  • Theme Installation
  • Initiate Backup and Security Process for Development Server and Site
  • Setup Dev Site in ManageWP for Ongoing Maintenance
  • Setup, Design, Configure and Integrate CRM/Forms/Online Scheduling System *if subscribed to Dev Site

2.c Content Transfer

  • Image/Media Transfer (from existing site)
  • Page Transfer (from existing site)
  • Blog Transfer (from existing site)

2.d Content Order and Production

Depending on your service agreement we will complete the order management, writing, transfer and optimization of new content.

2.e (If Subscribed) Search Engine Optimization - On Page Only

  • Set Up AWR (Advanced Web Rankings) 
  • Identify Keywords based on available content and volume of phrases in plan (high, medium or low competition)
  • Identify Target Location (City office is located and 2 priority cities)
  • Add phrases/geo targets to AWR and start tracking old website
  • Connect Social Sites *if on social media plan
  • Connect Local Listings sites *if on Local Listings Plan
  • Optimize Titles, URLs/Permalinks, Headings, Title, Meta Data, Content
  • Begin Interior Linking
  • Image Optimization (may be done post go live)

2.f (If Subscribed) Other Marketing Services

If you are subscribed to any of these services, they all start immediately and each has their own onboarding forms for you to complete - see service overview or sign up online.

Preparation for Review Meetings - Important!!

Communicating Changes to Designs and Development Sites is not easy, here's some best practices to follow to make the process a little easier: In advance of the meeting review the design or development site carefully.  

Rounds of Changes

You will be able to stay within your allowed 3 rounds of changes (save you money) and you will have less meetings and frustration (saves you time) if you follow these best practices. It's smarter to get an approved project extension and take your time during each round of changes than to go over your allotted round of changes - causing a $200 per round additional investment and excessive changes.
Remember, once you approve your design, that's what your website will look like unless the developer states something cannot be done without compromising the sites performance,  The developer has the right to overrule a change request that will cause custom coding or change in the core functionality of the theme that could compromise the websites load time, require custom coding, cause security issues, prevent future updates to theme/wordpress or plugins, violate mobile responsive or search engine requirements.

Services Agreement Review

Milestone 3: Design Review




3.a Types of Design Changes 

During your design review meeting you will be focused on the following:
  • Your Home Page Layout
  • What's going to be featured and the specific placement within each container - Header, Navigation, Body, Footer
  • Colors (use your color picker)
  • Picture/Image Selection OPTIONAL at this stage - Client can either find photos/images on IStockphoto and send the link to each image with placement requirement or send a file with your own images (each image should be named properly and we must be provided with specific instructions on page placement for each). Please do not have our team guess the placement of your images, as redoing the placement does count as another round of changes.
  • If you don't have a professional logo, now's the time to order one: Basic Logo Design or Custom Logo Design
  • If you don't have enough content to support the design elements and where you want call to actions to link to - now's the time to get a Website Copywriter. 
NOTE: We can change Images and Text in Development (focus on the layout, colors and general content concept for containers). We will not change Container Structure, Layout or Design in Development - only content, so make sure you like it before approving your design.

3.b - In Advance of Design Review Meeting

  • Bring in members from your team and external people (consumers vs. individuals from your industry) to get feedback. 
  • Consolidate all of your changes into one document to review during the meeting. 
  • Use Google Drive to keep your notes, so you can easily share it with your project manager before the call as a part of the meeting agenda. 
  • Avoid generic statements like: "I don't like it", "make it pop", "I want a different picture", unless it's accompanied by here's what I do like, here's a sample of what I would like it to look like, here's an image I found on IStock Photo I want to replace it with".  
  • When referencing color changes, use a color picker so you have the HTML Color Code.
  • Use the Nimbus Screen Recorder or Screenshot app to take pictures, markup or talk through your changes (be as specific as possible).

3.c - The Design Review Meeting

The following will outline the basics of design and development review meetings. As a reminder you have a specific number of allowable rounds of changes within your agreement. Typically we start with 3 rounds of design changes and 3 rounds of development changes.  The more prepared and organized you are in advance, the less meetings, time and costs it will take to get your changes submitted.
  • Plan for a 1 Hour meeting unless otherwise discussed.
  • Give your project manager access to edit your Google Doc.  You and the project manager can make additional notes your Google Doc, add screenshots, links and examples.
  • For Text Changes - we need exact Text. For Image Changes, we need to know the exact image and your replacement requirements so we are not guessing and managing rework requests which are considered another round of changes.
  • All change/addition requests that complete clarity has been gained (specific instructions, text, images, etc) will be submitted during this round of changes.
  • All change/addition requests that we do not have clear instructions/specifications for will be postponed for the next round of changes.
  • Calls/meetings are recorded for quality assurance.
  • Clients are required to complete the design approval form to move to development.

Step 3d. - Additional Graphics Design

All additional designs will be created after the home page is approved and each will follow the same process for review and approval as above.
  • Slider Design
  • Promo Graphics Design
  • Logo Design
NOTE: Timelines for Changes Vary.  It goes into production and will be completed based on next available resource and complexity of changes.  Our project management team cannot commit to specific time to complete as they are unaware of the technical requirements to complete (they are not designers) and they have a high level view of all projects in production with that designer and their timelines.  The best way to see your changes completely timely is to stay on time with the original project plan (i.e. complete reviews within 3 business days of the request) as that is when the resource has planned time for you and cannot estimate changes in timelines in advance.


Milestone 4: Development Site


Remember by this time, you will already have an approved design (you approved what the sites going to look like) so you won't be making any design changes.  
If you absolutely need design changes and are comfortable with moving the project back to the design phase, extending the entire project timeline/resources to account for a new design ($400 + depending on complexity and rounds of changes), the site to be re-developed with the new design ($600 + depending on complexity and rounds of changes), we would be happy to revise your project timeline and place you back into production with the available team at the time of request.

4.a Types of Changes during Dev Site Reviews

  • Navigation Changes
  • Final Text/Heading Changes (without negatively impacting SEO)
  • Final Image Changes - Client to either they find them on Istock Photo and send the link to each image with placement requirement or send a file with your own images (each image should be named properly and we must be provided with specific instructions on page placement for each. No guessing allowed, and changes to placement do count as another round of changes.
  • Testing and providing links to any clickable Call to Actions or Icons
  • Double check all contact information for accuracy
  • Ensure proper Spelling of Company Name

4.b Meeting Management:

  • Plan for a 1 Hour meeting. The more prepared and organized you are in advance, the less meetings and time it will take to get your changes submitted.
  • Give your project manager access to edit your Google Doc.  You and the project manager can make additional notes your Google Doc, add screenshots, links and examples.
  • For Text Changes - we need exact Text. For Image Changes, we need to know the exact image and your replacement requirements so we are not guessing and managing rework requests which are considered another round of changes.
  • All change/addition requests that we do not have clear instructions/specifications for will be postponed for the next round of changes.
  • Calls/meetings are recorded for quality assurance.
NOTE: Timelines for Changes Vary.  It goes into production and will be completed based on next available resource and complexity of changes.  Our project management team cannot commit to specific time to complete as they are unaware of the technical requirements to complete (they are not developers) and they have a high level view of all projects in production with that developer and their timelines.  The best way to see your changes completely timely is to stay on time with the original project plan (i.e. complete reviews within 3 business days of the request) as that is when the resource has planned time for you and cannot estimate changes in timelines in advance.

Milestone 5: Go Live Approval and QA

Congratulations!  You have now approved your website to go live, provided all of the technical access (logins to do so) and we can begin our final process.  This series of steps takes time, so please be patient as we work carefully and quickly though the final critically imoportant stages.

5.a Complete Coding

  1. Complete the Cross Browser Compatibility 
  2. Complete Mobile Responsive Coding
  3. Complete Security Sweep - Scan Site, Run Performance Test and Resolve issues in pre live environment

5.b Pre-Go Live Audit

  1. Setup your Server for your Live Website Environment and Install all Necessary Software
  2. Update Theme, Wordpress and All Plugins to current Version
  3. Complete Backend Audit
  4. Complete Front End Audit, Audit All Links
  5. Audit Schema and/or AMP Configuration (if purchased by client)
  6. Audit 301 Redirects (as provided by client and/or identified in initial Frog Report)

5.c Go Live Sequence

  1. Copy Dev Site and Install on Live Server Environment
  2. Change Out All the Links from your dev URL to your site URL (all images, links, pages, interior links, etc)
  3. Setup MX Records for Email Hosting Provider
  4. Set Up Content Delivery Network and Configure for Live Site
  5. Set Up Live Site in ManageWP for Ongoing Maintenance
  6. Rerun Sitemap Generator for all final Changes
  7. Log into Domain Registrar and Change DNS
  8. WAIT - Takes up to 72 Hours for Domain Propagation Across All ISP's (Internet Service Providers)

5.d Post Live Sequence

  1. Go Live Announcement to Client
  2. Change robots.txt file to Crawl and Reference Sitemap
  3. Complete Post Live Audits
  4. Install and Configure Security Certificate (if on CI Maintenance Plan 25K visits/month 50GB bandwidth)
  5. Begin Regular Maintenance
  6. Go Live on Content Delivery Network
  7. Install Google Analytics
  8. Client to TEST All Forms and Click to Call Numbers to make sure they receive their leads, requests and Calls - CLIENT
  9. Client to Complete Training with CRM/Forms/Online Scheduling System - CLIENT

5.e (If Subscribed) Search Engine Optimization

  • Install Google Webmaster
  • Run Full Performance Tests
  • Mark Reports with Starting point to measure performance for Pre Live to Post Live.
  • Ongoing Reporting, Analytics, Modifications to Metadata and SEO Work to improve page performance and rankings
  • Track and Report on Key Phrase Performance to Client
  • Quarterly Strategy Sessions

Milestone 6: Tech Maintenance & Security

  • Begin Monthly Maintenance 
  • Create Staging Site on Dev Server Environment - Clone of website.
  • Initiate Daily Backups of Website on Backup Server Environment
  • Plugin Updates
  • Wordpress Updates
  • Theme Updates
  • Security Scans
  • Server/Site Performance Reports
  • Help Desk Support for Break Fixes and Questions
  • Provide Client with a Link to Login (recommend placing at footer of website), logins and passwords to their CMS editor account.
  • Training Videos (your website CMS tutorials are located in the Knowledgebase).

A MUST WATCH FOR ALL COMPANIES


ADDITIONAL SERVICES OR HOURS


    • Related Articles

    • Website Administrator | Website Manager Plan

      Getting a new website designed a developed is a project, while managing and further enhancing a website over time after the site goes live is a process that requires resources.  You can absolutely manage this process in house through your content ...

    • "But Godaddy has $10 hosting plan"

      We have seen this and are very familiar with Godaddy's hosting plan and it does not include most everything you need. Hosting, Security, Maintenance & Updates are a very critical part of your websites performance and SEO plan. Godaddy treats websites ...

    • Website Design Strategy - HVAC Contractor

      Web Design for an HVAC Contractor Your home page is the first thing consumers see when they land on your website.  Depending on their entry point, the header and footer area of the website is the most likely to be seen by every visitor, regardless of ...

    • Tech Plan: Hosting, Maintenance and More

      Stage 4: Email, Calendar and Document Management The best solution for email hosting (that includes shared calendar, document management and much more is Google Business Apps).  Sign up for a free trial account here: ...

    • Website Projects - Timelines and Process

      PROJECT TIMELINE DEFINITIONS: START DATE IS EQUAL TO: The date this agreement is signed and executed and initial payment is received. PROJECT LAUNCH DATE IS EQUAL TO:  Date all Onboarding Forms are complete and sent to CI Web Group. ON BOARDING ...