How Not to Lose $32 Million on a Website

How to Avoid the Nightmare Website Project

Besides doing your homework on the Agency you hire for your new website (at the very least, ask for live samples and references for projects similar to yours), there are concrete steps you can take to make sure you and your Agency avoid miscommunication and get on the same web development page.

1. Contract and Scope of Work – Having a contract with terms and conditions that get approved by your legal department is not enough. A website contract must include a clear and comprehensive Scope of Work (SOW). A well-written SOW can avoid delays, misunderstandings and other issues during development. The SOW should cover an overview of the project including intended audiences, purpose of the site and approximate number of web pages; an outline of the required functionality and workflow; clear and measurable (SMART) goals for the website; an approximate timeline (more on that later) and a budget clearly stating what is included and what would require additional budget. Bonus points if the SOW includes the approach to managing the project (agile or waterfall?) and methodology to building the site (traditional or growth-driven design?) When reviewing this document, you should feel confident that the Agency has a clear vision of your project and business needs, based on the needs assessment they completed (wait, they did a discovery, right?)

If you are creating anything larger than a few simple pages on WordPress, you will also need an FRD – Functional Requirements Document. This is especially true if your website connects to a 3rd party platform such as a booking engine or eCommerce platform. An FRD is a more extensive and technical document that outlines all of the technology that will be used in the site, including the programming languages, the CMS (down to the version number), any 3rd party integrations and the APIs or means to connect them, etc.) Normally, an FRD is a living document that gets updated with detail throughout the process, for example, adding in the actual version number of the booking engine - however, this should not mean adding new functions or technologies outside of the approved scope. Additionally, if the Agency will be using a 3rd party for any of the technical integrations, make sure you are aware of who is responsible for what. No surprises, remember?

2. Action Plan and Timeline – Congrats, you selected an agency, approved a contract and are ready to get started. Well, when it comes to building websites, no one likes surprises. A solid development plan keeps everyone on the same page. A good plan will outline the phases of the development process and provide a milestone timeline. This should include expected delivery dates for the specific deliverables as well as dates for you, the Client, to provide back feedback and approvals in order to stay on schedule. Also, if any 3d party vendors are involved, their portion needs to be included in the timeline. This is important because timelines are subject to change if specific integrations are not carried out as planned or are delayed.

By now, you should have been introduced to your Project Manager and gone through an Onboarding process. When presented with an Action Plan, go back to your SOW and make sure the deliverables, approach and details match the SOW. This is not the time to get careless - trust, but verify!

3. Information Architecture: Use Cases, Sitemap, and Wireframes – I will argue with anyone that this is the most important phase of website development. It’s also the most boring and misunderstood for many Clients. Look, I get it, you want to see your vision come to life - the images, the “wow” factor! But a site that is just pretty is all sizzle and no steak, and will not help grow your business. IA is also the phase that will most clearly demonstrate that the Agency is actually following the scope you agreed to.

Let’s start with Use Cases (or Jobs to Be Done for those of us who are fans of Growth-driven Design) – this is where you can see if you are truly building a site for your prospects and customers, or if your site is simply a homage to internal, subjective opinions. At its basic core, a Use Case is simply a written description or diagram of how a visitor will use your site. Often, people consider only the goals (or conversions) you want a visitor to accomplish, but a good Use Case takes into consideration the user’s needs and wants, which are determined by what stage of the Customer Value Journey they are on when they come to your site. Every site should have at minimum 3 Use Cases: one for a prospect who is coming to the site for research or information (Informational Visitor); one for a prospect who is ready to buy (Transactional Visitor) and one for a returning customer. An exceptional agency will not guess at this - they will install visitor recording tech on your old site and conduct customer surveys, then, based on this data, they will be able to create a great user experience for your web visitors.

Next up, is the humble Sitemap. Basically, a site map is a visual aid that shows the organization and connections between the website’s pages. Not to be confused with HTML or XML sitemaps for users and search engines, an IA Sitemap is a two-dimensional diagram for planning the website structure and flow. In these maps, the web pages are usually shown as blocks linked together with lines like a hierarchical organizational chart. Often the blocks or cells are color-coded to show different types of pages or functions. Visual sitemaps can be created with a computer program or manually by drawing it out on paper. We love to use computer-generated sitemaps because they are easy to edit and update, and we can create dynamic sitemaps for complicated sites that actually link to the sections of the map.

Last, but certainly not least, comes the Wireframes. These are so important, we have an entire article on why you need wireframes for your next web build. Wireframing shows what elements and functions will be used on each page, their approximate size and placement on the page and how the site navigation will work. Wireframes are important because they ensure that each page has a specific purpose and goal. They help ensure that all necessary functions, such as forms and booking widgets are properly accommodated. Drawn in simple black and white blocks and usually with indicative filler content, wireframes allow you to work on the structural foundation of your website, before you add the aesthetic appeal. Think about it, making changes to a wireframe is much faster than making structural changes to a fully designed page concept.

For the purposes of avoiding a nightmarish web project, the first thing you need to know at this stage is that the Agency should be providing wireframes for desktop, tablet and mobile. If you do not get all three, it’s a good indication that responsiveness will become an after-thought and you may be surprised by what is omitted for smaller devices.

4. Design Comps – Finally, we come to the sizzle! A web design comp (short for comprehensive) is a mock-up of a website in progress used prior to coding the site so that there is a clear consensus of how the site should look. Your Agency may have presented a Mood Board prior to the comps, so that by this stage, you are both in alignment as to how the site should look. We will not cover all of the essentials and best practices for web design and usability here, as our focus is on avoiding common project fiascos. However, it’s important that the design, color palette and layout are attractive, follow your brand guidelines and are appropriate for your intended audience. For example, if your main persona is over 40, you may tell your designer to stay away from tiny fonts. In addition to making sure that the comps and images represent your brand well, you should watch out for these common issues.

First and foremost, make sure you are reviewing designs for desktop, tablet and mobile and that the designs follow along with the guidelines approved in the wireframe stage. Ask about the colors used and whether they provide enough contrast to comply with ADA guidelines. And, check the comps on different monitors as color hues can vary greatly between Macs and PCs and different types of screens.

5. Development/Programming – After design comps are approved, the actual coding of the website can begin. First, make sure your developer is coding on a “dev” or sandbox environment that is password-protected and with search robots blocked - after all, you do not want someone randomly stumbling into a partially-built page! The site should be developed according to the design comps - a proper development process will produce near “pixel perfect” code - meaning there should not be a noticeable variance in look and feel between the coded site and the approved comps. This goes for desktop, tablet and mobile. This is also the time when the functionality of the site comes to life. Typically, a web Agency will program in sections, providing previews of the different functions for you to review and test along the way. This is a great time to go back to your SOW and FRD to make sure that the correct functions and technology is being implemented. Don’t be afraid to ask for details - what is the platform or the programming language? What version are you using, etc. This should all be recorded in the FRD and provided to you. A good Agency will keep you updated of the progress on a regular basis.

6. Testing, Beta Link and Quality Assurance – During this final stage of website production, your Agency should perform “alpha” testing. This is an extensive check of the functionality, performance and security of the site. Make sure your Agency performs tests such as form validation, tests booking functions and any custom functions for usability, performance and data validation.

The site should also be reviewed across all browsers and devices. The FRD or SOW should have outlined the browsers and devices for which the site has been optimized. Cross-browser testing ensures that your website works across the accepted number of web browsers.

If your business requires extensive security testing such as penetration testing, this should be done now, as well as after the site is live. After their internal alpha tests, your agency should then send you a “beta” test link. It may seem obvious to some, but you cannot believe how many times I’ve heard horror stories about sites going live before the Client had a chance to fully review the development site.

Your involvement here is crucial to confirm that the site matches your requirements and the user experience you want. Ideally, at this point there should only be minor bug fixes rather than major surprises - like the site not working on mobile! Your agency should provide a method for bug reporting, such as a shared spreadsheet organized by page URL or an online ticketing system.

7. Post-Launch Approval – Once you have approved your site to go live, you can relax, right? Not quite! Now it’s time to do the post-launch testing. First, keep in mind it may take up to 72 hours to propagate the site to all users worldwide. Then, go ahead and click around! Seriously, check every page, click all buttons and make sure they all direct to the right place. Do all the forms work and connect to your email platform or other required tech? Are all your social channels connected? Look also to make sure the right images appear in the right places and that none of the links lead to a 404 error page.

Your marketing team should check to make sure that Google Analytics (and any other metrics software you use) has been properly implemented and is working. If SEO was part of the scope, go ahead and run an Audit on the site to make sure it scores well. Once you have checked off all of your requirements, you may be asked to sign a post-launch approval or delivery confirmation.

Are you happy with the website? A build, even a smooth one can be stressful - you’ve put in a lot of thinking and hard work into this project and that can make your own opinion murky. Try taking a break for a couple of days to help see the website again as a fully completed, final piece.

The Agency should provide you with a backup of your old website as well as a copy of your new website’s database and all of your website content. Ask for this if you don’t get it! These backup files should be stored offsite. Also make sure you are clear on where the site is being hosted and that you have Super Admin credentials to web hosting as well as the CMS so you or your team can make content changes to the site.

Next Steps After Your Website Goes Live

If you’ve followed these tips, your website project should have proceeded smoothly and without nasty surprises. Now, you can focus on making the most of your website and capitalizing on this important investment. First, do you have materials or a campaign ready to notify your existing customers about the new site? How about a promotional plan to attract new traffic? Have you created new graphics for your social channels to match the new site? You may know that we are big believers in using your site as a salesperson, rather than a static online brochure.

On a regular basis, you should check the quality of your content and its relevance to your target audience. Content is king for organic website growth, but also remember that it’s of most value to your web visitors. One of the most important things you can do to convert your new website into a revenue-generator is to build in online sales funnels - I'm not talking about the traditional funnel way of thinking, but rather, actionable pages that lead a prospect to a desired action or sale on your website.

If you don’t have the time or internal resources to keep your website maintained with fresh content that aligns to the Customer Value Journey, you may want to consider using an Agency that specializes in SEO-driven content and inbound marketing. Diaz & Cooper is proud to be recognized as a 2019 Top Digital Agency on Design Rush and we specialize in helping Clients align their strategic business goals to their website marketing.