02. Planning/Wireframe
Much like "Information Gathering", this is also a critical phase of launching a new website. This phase has 3 basic tasks:
- Consult with the client on search terms for their business/industry
- Research and review keyword volumes
- Create a spreadsheet of keywords/keyphrases
- Audit existing content for SEO focus
- Make a list of SEO content needs to fill gaps
- Map keywords/keyphrases to existing or needed content
A sitemap is essentially an outline of the structure of the pages that will comprise the website. Planning the sitemap prior to working on any website design has several benefits since you can build your design around the most important pages, plan the website navigation more efficiently, and get an overall idea of the content that still needs to be written. Then, we do wireframes. We separate this task from design because, well, wireframes are just the blueprint of your website. No need to have design elements in this phase.
At this phase, an in-depth review of the website content is performed. You, as a client, are responsible to make a plan for producing content. It may be helpful to hire a freelance writer to finish up its needs.
03. Design
The third step of the web design process is to design how the website will look. This is the process of laying out the user interface in a way that is visually appealing, accessible to all users, and cross-functional on mobile and desktop devices. The visual design can be limited by the technical capabilities of the underlying system, and likewise the visual design can inform the design of the technical solution.
A well-structured process will bring together the technical and design team at various touchpoints to ensure everyone is on the same page throughout the project.
A use case is how your website visitors will perform set tasks on your website from start to finish. User stories are descriptions of website features from a visitor's point of view, showcasing how it will meet its objective. Detailed use cases and user stories help to refine the understanding of what is required and what will be delivered. They focus on how each type of end-user will interact with the website.
This level of detail gives your developer information to more accurately estimate the effort and delivery schedule of your project. It also provides framework for User Acceptance Testing in Phase 5. This does overlap somewhat with certain website design activities, but is also immensely useful for technical design.
Websites are information systems that have some kind of database to store information in, and some kind of data processing to manipulate and present that information to end-users. Information architecture is a process that a developer does to design the "database stuff" in a way that most closely represents the information needed to meet your requirements.
Developers have a range of tools to visually map information and the relationships between pieces of information. These include entity-relationship diagrams, information architecture diagrams, and content hierarchy documents. These can help you understand the purpose behind each feature or element, and how this point can be reached.
Due to your broader business processes, it's quite likely that some of your data will not be managed directly in the website itself. It may reside elsewhere, such as in your Customer Relationship Management (CRM) system - Salesforce, Hubspot, or similar. If this is the case, your web developer is likely able to map out the integration of these third parties with your new website.
Well-designed integrations ultimately save you time and money as it means you and your staff don't have to manually double-handle information between your different information systems and your website.
Armed with comprehensive designs and blueprints from this phase, your developer will have a much clearer concept of the effort involved in developing each component of your website. Now is a great time to ask for an updated estimate and schedule. For more complex projects, you should also get a revised set of risks, assumptions, inclusions, and exclusionsrem
04. Development
This is the phase where the programmers write the code, the database engineers build the data models, and so on.
By this stage, if the above phases have been followed closely, the website developers should have all of the information they need to build, test, and deliver each feature.
Frontend developers are responsible for building the interactive parts of your site. In other words, they take the visual design and makes it a fully functioning reality. They produce what the website will look like to normal visitors arriving on your site. This is a specialised discipline, which requires in-depth knowledge and understanding of Web Accessibility standards such as WCAG, ARIA, CSS and HTML, CSS and HTML, device and browser capabilities, and website profiling and performance tools. Websites that don't have complex integrations or requirements may only need the services of a frontend developer.
Backend developers specialise in building custom data models, process automation, perform integrations with other information systems, and any other business logic that supports the operations of the website and the services it offers. Typically, a backend developer is well versed in:
- Scripting languages including PHP
- Remote systems integrations protocols such as REST, SOAP
- Database query languages like MySQL, PostgreSQL
- Content Management Systems (CMS's) such as WordPress or Drupal.
The list of acronyms could be as long as this article. Suffice it to say that to build a modern website that makes the final product look easy and seamless often takes a ton of work behind the scenes.
If you have an existing website or web services, then you're probably going to need all of the existing information transferred to the new and improved website. Data migration can sometimes be as easy as copying and pasting content, images, and resources from the old site to the new site.
If you have far too much information for this to be feasible, perhaps an eCommerce site with thousands of products, then you can use automated migration to streamline this migration. This process can take anywhere from a few hours to several weeks, depending on how similar the new website's data models are to your original website, how much information has to be migrated, and whether it's done by your staff or the web development agency.
DevOps, short for "development operations", refers to a wide range of process automation, systems administration tasks, and other activities that overall serve to make the development process run more smoothly. For example, a DevOps engineer may put in place systems that more effectively manage how developers access and update your website's source code, or configure automatic deployment of new website features to your testing, staging, and production servers. A dedicated DevOps track may not be required on small and simple projects. On larger projects with multiple developers, however, the benefits quickly stack up.
05. Testing & Delivery
Before a developer passes a new feature over to you for testing, they will often have another member of their team perform a dry run of the user acceptance tests. This process is called quality assurance, or QA, testing. For the frontend of your website, this can include everything you would see, such as making sure links and buttons click through to the right area; that all page elements look great across all devices and browsers; and that all forms and eCommerce functionality work as expected.
In the backend, this could mean a code review to catch any mistakes and potential issues before they end up being published on your live site. On smaller projects with smaller budgets, you might combine QA testing with user acceptance testing (see below), and take on the testing responsibility yourself.
You and your team play the pivotal role in this step of the process, as you are essentially signing off on the successful delivery of the features you have paid for. During the requirements gathering phase, when a project is broken down into use-cases, each of the desired features will include "acceptance criteria". Acceptance criteria is just a fancy name for a checklist of steps or conditions a feature must pass in order to be considered complete. Once everything is checked off the list successfully, the feature is ready to go.
If any of the UAT tests fail, your feedback is essential so that the developers can rectify the issues and resubmit for testing. Note that larger projects typically have a budget for remediation.
Before your new website goes live, you should ensure there is allocation in the project to stress test it. This step should push a website to its limits, allowing you to determine if it's able to meet the expected demands of your customer base. This is mainly relevant to websites that expect large volumes of traffic. It will make sure that your prospective customers can still access it and complete their required actions no matter how many other people are on the site.
Performance improvements can be time-consuming and expensive if the end goal is unclear, so rather than just saying "make it faster", be precise and data-driven in your requirements from the start. For example, "It must serve an average of 100 users per minute but accommodate a spike of 10,000 users an hour once per month. Average response time on a typical landing page should be 500ms even under maximum load." If you're unsure about these figures, talk to your website development agency.
Software like Google Analytics, which shows minimum and maximum website traffic numbers over time, can help provide insights into what your performance levels should be. The clearer your expectations around performance, the easier it is for web developers to engineer an overall solution that will hit your targets.
Your features have been built, tested, and accepted.This is the phase we release your websites out in the Internet world. However, before it actually goes on live, our developer will provide a launch plan.
A launch plan includes steps that mitigate the risk of data loss, reduce the overall time your website needs to be offline, and an exit strategy that lets you get your original website back in place (if there is one). It should also test key conversion points such as forms and eCommerce abilities, as well as SEO performance to prevent any loss to existing online performance.
Unfortunately, one of the main reasons we receive requests for help at Living Online is when a company has just had their new website launched by another agency, and all of a sudden, their SEO has tanked and they have dropped off the face of Google. This is incredibly costly, and is easily prevented by with a pre- and post-launch SEO audit to checks redirect, canonicals, meta directives, and other technical elements that come naturally for an agency with SEO on the mind.