Loading Image

Website Development Process: A Step-by-Step Guide

by Kyle Brigham 24 Mar, 2022

Website Process Banner

Website development projects come in all shapes and sizes, yet the process remains relatively the same.

Whether you are building a small, updated brochure website or a large brand refresh with thousands of products, following a proven, predictable process will ensure you are structuring a website that is both user and search friendly, but will also enable the team to stay ahead of the necessary deliverables and assets required to build your new website.

What is a Website Development Process?

A website development process is a documented, predictable set of steps to take to successfully complete a website development project or web application. This process helps to align development resources, stakeholders, and team members to ensure all aspects of the project are addressed and delivered on time.

Below is an outline of the necessary steps for a successful website development process:

  • Discovery
  • Information Architecture
  • Wireframes
  • Design
  • Content
  • Development
  • QA
  • Launch

While this process may differ slightly from developer to developer, the general concept for creating a website or web application will remain the same regardless of how big or small the project.

Step 1: Discovery

Discovery is the first phase of the web development life cycle and includes the initial research, information gathering, and collaboration to confirm scope, feature requirements, stakeholders, processes, and expectations. This planning will inform initial project details and first steps on development.

Throughout the sales and assessment process, we’ve likely identified the necessary features required to build a successful website solution. In Discovery, we dig into each of these features in more detail to confirm scope and determine if there are any additional requirements not discussed or listed in the initial proposal.

Confirmed features are then listed and placed into a backlog to be prioritized in future sprint planning meetings.

Discovery and planning meeting diagram showing flow from meeting to backlog

The Discovery meeting is usually one of the longer meetings in the entire project as it is our first major touchpoint to get everyone on the same page and kick-off the project.

Step 2: Information Architecture

Information Architecture is the structure and hierarchy of how the information on your website is organized. It is helpful to visualize this mapping to give you a sense of how and where content and information will live on your website or web app.

In order to determine what needs to be built, we need to understand the structure of the website. Oftentimes, a website’s structure has been built over time and has typically been frankensteined into its current state. This can lead to a disjointed user experience and decreases in engagement and conversions.

By evaluating and potentially restructuring the Information Architecture, we ensure a website that is structured for both users and search engines, and ultimately develop a roadmap for how to build and structure the site moving forward.

Here is an example of what an Information Architecture might look like:

Example of an Information Architecture diagram with key

Our team utilizes data and collaboration with your team to design and develop an approved Information Architecture for the new website.

Once complete, our team will be able to use this information to identify the necessary page templates needed for your website.

Components of an Information Architecture

An Information Architecture typically includes a hierarchy of content broken down into categories the way you might view it in a navigation. This helps to visualize your content in the context of your website or mobile app.

IA will typically include a key to help you better understand the structure and categorization of content, especially if color coding or formatting are used to better show the relationship between content.

It can also sometimes be helpful to show pages/links that will reside in an eyebrow navigation or footer navigation. This ensures all aspects of the site are being accounted for, even if certain areas of your site - such as a customer portal or cart - would not necessarily live in your primary navigational structure.

Here are a handful of tools used to create Information Architecture:

Tools like these will help guide you through the structure of an Information Architecture as you and your team understand the best way to structure for your website.

How Does Information Architecture Relate to UX?

Information architecture organizes the information of the website into logical sections. It helps define the main navigation and structure but, more importantly, helps inform what pages or templates need to be designed and what kind of information will need to be on those pages.

From a UX perspective, this is integral to determining how information will layout on a page and how users will best engage with the site.

Once the Information Architecture is solidified, the team can start thinking about the best user experience to display and digest the content.

Step 3: Wireframes

Once we’ve identified the page templates that need to be built, we move onto wireframes. Wireframes are “back of the napkin” sketches of how a page template will be constructed. It utilizes black and white page elements to give a sense of where page components will be placed on a page so users can react to the layout of these elements and adjust as necessary.

In this step, the information needed on each page and structural layout will be solidified. The functionality of specific page elements and responsiveness will begin in this stage as well.

Examples of wireframes for both a homepage and a service page

The Importance of UX in Wireframing

Wireframes are the first visualization of how users will digest and interact with the information on your website. It is important to incorporate UX as an integral part of this process to ensure you are creating experiences that will delight and inspire users to engage and take action.

At the very least, you should be incorporating UX best practices into your layouts to ensure that you are not creating any roadblocks or issues for your users. A great looking website does not always mean a great working website. By incorporating UX into the wireframing process, you are considering the needs of your users rather than the needs of your internal stakeholders, and setting your website up for success after launch.

The best option would be to utilize a professional UX resource. This will ensure you are bringing the greatest minds and latest techniques to your page layouts. If you are not able to find a resource or the budget won’t allow it, do your own research. Incorporate best practices from sites like A List Apart or Behance and remember: always put the user first.

Tools for Wireframing

Wireframing can be accomplished in many ways and it certainly doesn’t have to be fancy. It can be as basic as drawing on a whiteboard or a piece of paper, to creating simple layouts in PowerPoint.

That being said, there are many tools out there that are simple to use and are great for collaborating and adjusting as needed. Below is a list of some of the most common, but ultimately using the tool that’s best for you and your team is the right tool.

Wireframe Tools:

Whether you use a tool or sketch your wireframes free-hand, take your time with the wireframing process. Think through the ideal experience for your users, utilize UX best practices, and engage with an expert as necessary. Wireframes are the first step in creating a truly engaging and memorable experience for your users. Don’t rush the process and remember: Always put the user first.

Step 4: Web Design

Design in the web development process is creating web-friendly designs for your website or app through the use of colors, fonts, styling, images, callouts, sizing, and layouts. Web design brings life to the new website, giving you a better sense of what the live site will look like. Designs are built on top of your wireframes to retain approved page layouts.

Web Design also takes into account mobile- and SEO-friendliness to ensure the new site is laid out appropriately for users on all devices and is structured appropriately for the search engines.

To start, a style guide is constructed to present users with a general look and feel of the style of the new site. This includes colors, fonts, and styling of page components. This guide will act as a northstar for design throughout the life of the project.

Once the Style Guide has been completed, web designs are created for each of the wireframes. Web designs are the first step in seeing what your new site will look like for specific page templates.

Example web style guide for website branding and designExample web designs for both a homepage and a service page

Through the design process, your team may be asked to provide feedback. This is to ensure the new designs are meeting the expectations of your team and closely following any brand or design standards outlined at the outset of the project.

Tools for Web Design

There are a number of different tools you can use to create web designs. Some designers choose to utilize multiple tools to showcase designs, but most typically use some combination of these tools:

Photoshop is a great way to overlay designs onto wireframes and gives users the ability to export files in a number of different ways.

InVision and Sketch are great tools for allowing users to view designs in a more interactive way. By linking designs together, users can view how certain pages will display - like a checkout process or account sign-up steps. These tools can be a great way to not only showcase designs, but also show how certain pages will interact or flow without having to rely on the user to piece the story together.

Additionally, both tools allow you to collaborate with internal and external teams in real-time for feedback and adjustments. This creates faster feedback loops to keep projects moving forward efficiently.

Design vs. Web Design

Is there a difference between design and web design? Absolutely. Design is simply (or not so simply depending on how you look at it) creating something aesthetically pleasing and artistic regardless of medium.

A designer for traditional media (such as magazines or billboards) will be thinking about the best way to layout the content for that specific medium. They are not concerned with users on multiple devices because there is only one medium for consumption.

Web Design is different in that the designer must think about how the page will layout on multiple devices. They need to think about UX best practices to account for how users will interact with the site and adjust accordingly for various scenarios. They need to address appropriate image sizes and resolutions to ensure creative assets are crisp and dynamic.

Additionally, Web Designers will typically provide the code - HTML, CSS, Javascript - for their designs to make sure the designs display appropriately once deployed. This is called front-end development.

While the difference between design and web design can be subtle, web designers are focused specifically on design for websites and apps and typically have expertise in providing experiences for users on multiple devices.

Step 5: Content

Content Plan

As wireframes and designs are being created, content for the new site needs to be organized and ready to be loaded. This can be a very time consuming process depending on if pages are being consolidated, created, edited or removed. It is important to note that any changes to the current content on your site should be coordinated with an SEO resource to ensure you are not accidentally creating issues with rankings or traffic after site launch.

Content also includes any new images, graphics, or design elements you want included in the new site. This may require image sourcing or working with a graphic designer to generate new elements for your site.

In order to better organize your content, a content plan is created that includes each page on the site that needs to be loaded, links to appropriate content and creative deliverables, and status columns to keep track of content management and loading.

Properly planning your content strategy will ensure your content is ready to be added to the site when the Development stage is reached, reducing or eliminating delays and keeping the project progressing on time.

Example of a content plan and content strategy for a new website

Content Guide

In order to best structure content for the new site, a content guide is typically created to help visualize how and where content will be placed on the new site.

There are many versions of a content guide, but ultimately it will provide a mapping of how content will need to be formatted on the new site based on the updated layouts.

Example of a content guide to guide content structure on new page layouts

Step 6: Website Development

After design has been completed, web development begins. In this stage, the web design team will hand over all creative assets to the website development team to be turned into a full fidelity, interactive version of the site.

The development team will utilize various programming languages to translate the designs and functionality to something that can be displayed to users in a web browser. This includes:

  • HTML
  • CSS
  • Javascript
  • SAAS
  • C#

Most often, these designs will be translated by backend developers to a content management system (CMS) for website managers and editors to manage web content moving forward. Some examples of CMSs include:

  • Umbraco
  • Wordpress
  • Drupal
  • Sitecore
  • Joomla

Typically the site is built page by page and component by component in phases, or sprints, to ensure that all of the aspects needed to create a fully functional version of the site are completed.

Example visualization of a development sprint of two weeks

Web development continues until all of the items in the development backlog have been completed. As the project progresses, both teams may decide to prioritize certain elements of the site to achieve internal business goals or to address timing with other teams.

The website development process will also need to account for any integrations with outside data sources or tools.

For example, if you are integrating your website with a marketing automation tool, such as Marketo or Pardot, you may want to integrate your forms to ensure a seamless integration with your marketing tools.

Additionally, your new site may integrate with an internal data source for membership logins or an Intranet. The website development phase is also when backend developers will work with your internal IT team to connect any necessary data sources to the site for appropriate integration with website features.

As with the web design process, your team may be asked to provide feedback throughout the web development process to ensure your vision of the designs is being realized appropriately as the site is built.

The Importance of an SEO Migration

At this point, it’s important to note how essential an SEO migration process is to a new website launch. When you develop a new website, you are likely to change the way the website is structured, the content on the site, or some if not all of the page layouts.

When all of these factors change, it can change the way the search engines view and index your website. By completing a comprehensive SEO migration, you are showing Google a path to the new website, letting them know that you are the same organization with the same information, albeit on a new, exciting platform.

Sample SEO 301 redirect map for a new website

An SEO migration is typically done by an experienced SEO team to make certain that all pages are accounted for and redirected to an appropriate resource on the new site.

If this is not accounted for in the scope of your development project, you should secure an SEO resource to collaborate with your development team ahead of launch. This work typically happens 4 - 6 weeks out from launch depending on the size of the site.

Don’t Forget About Analytics

As you get closer to launch, you’ll need to make sure that your Google Analytics is migrated appropriately as well.

If you are already confident in your Google Analytics and Google Tag Manager setup, you’ll want to have a migration strategy in place to move the setup and structure over to your new website.

If you are not confident in your analytics, now is the time to implement an updated Google Analytics and Google Tag Manager setup for accurate website reporting moving forward.

Building a new site requires appropriate measurement to determine if the new site is meeting or exceeding your business goals and the customer’s needs.

A well thought out and executed Google Analytics strategy can provide your team with the information needed to:

  • Prove out the value of your new site
  • Adjust your marketing strategies
  • Improve the user experience
  • Better drive users to conversion

In Google Analytics, you can track:

  • User actions such as goals and events
  • How your marketing channels interact with one another to produce conversions
  • The effectiveness of your checkout process or lead form(s)
  • Your top performing content and resources
  • More information about your users such as their device type or

You’ll want to engage with an analytics team ahead of launch to create a migration and implementation plan throughout the development process. This will help you to solidify your tracking on the new site and to coordinate with launch efforts.

Step 7: Testing & Quality Assurance

Throughout the web development process and shortly after development is complete, your development team will be focused on Quality Assurance. In this step, a comprehensive checklist of QA auditing is completed to ensure the site meets or exceeds the standards of an efficient, fully functioning website.

Quality Assurance is important because it solidifies the experience for users accessing your website in different ways and anticipates any challenges they might encounter, such as bugs or incorrect device layouts.

Some of these checklist items include:

  • Cross device testing
  • Cross browser testing
  • Bug/functionality testing
  • Process testing (form fills, checkout processes, if/then functionality, etc.)
  • Content formatting

The audit will help catch and flag any issues with things like incompatible browsers, broken widgets, faulty integrations, and formatting errors.

In a typical website development process, both teams will need to QA the site to ensure it is functioning properly ahead of launch. The development team will make sure the site works from a technical perspective, and your team (the client side) will make sure the content is accurate, on brand, and grammatically correct.

Any issues discovered should be addressed ahead of launch to avoid any problems with user experience, search engine optimization, or technical functionality.

Step 8: Website Launch

After what has likely felt like an eternity, you’re finally ready for launch. Once QA has been completed and both teams are comfortable with launching the site, the team will come up with a launch strategy.

A website launch strategy is the steps you will take to transition your current website to the new website. If you do not already have a website, the transition is relatively simple. The web development team will push the site live and point it to your new domain. If you do already have a site, the transition is a little more involved.

First, you’ll want to come up with a launch strategy that includes timing, relevant org charts, roles, and consideration factors. Typically, new sites are launched outside of business hours to minimize disruption to users. You will also want to determine how the new site will be hosted. Choosing the right provider and package specific to your site needs will help to manage the risks of unnecessary downtime or lag in performance.

Second, you’ll want to identify a launch date to be coordinated with your team, the development team, an internal IT team (if applicable), the SEO team, and the Analytics team. All teams will need to be ready and waiting for launch to make certain the transition goes smoothly and to troubleshoot if necessary. Therefore, choosing a date and time that works for all teams is imperative to a successful launch.

Finally, you’ll launch the site. This requires changing the DNS so your new site is now associated with your URL. It usually takes some time for the site to populate on your domain, the amount of which varies from launch to launch. Typically, within the hour, you’ll see your new site up and running.

There are a handful of tasks that will then need to be completed post-launch to validate that everything went smoothly.

  • Your development team will typically go through a technical checklist to make sure the site is technically sound
  • The SEO team will go through a checklist to make sure the migration strategy is working as it should, the site is being indexed appropriately, and there are no identified issues.
  • The Analytics team will validate the integrity of the data and tracking on your new site, ensuring all goals are firing appropriately and the necessary settings are in place.

The moment a site launches, all teams will need to keep an eye on the site for weeks, if not months, to come. It is important to make sure the new site is matching the expectations of your users, being found easily by Google, and being tracked and measured accurately for data-driven decision-making.

Conclusion

While the process may vary, the principles will remain the same. Sticking to a tried and true process for website development will give you a sense of what is needed in the short-term and long-term, and keep the project moving forward.

Knowing and understanding an ideal website development process will make certain your team is able to better execute a website development project from start to finish.

Using a skilled, proven website development agency like Marcel Digital will also ensure you are utilizing a team that has gone through this process many times before. With website development projects and migrations, utilizing a professional team can help relieve the burden of trying to manage this process on your own.

Category:
Web Development
Share:
Kyle Brigham Director Of Strategy
Author

Kyle Brigham

Kyle Brigham is the Director of Strategy at Marcel Digital. He specializes in client services and project management, but also original Nintendo games and ping pong.