Menu
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.
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.
While these can differ slightly based on the project, the website development process typically includes the following 8 steps:
Step 1: Discovery
Step 2: Information Architecture
Step 3: Wireframes
Step 4: Design
Step 5: Content
Step 6: Development
Step 7: QA
Step 8: Launch
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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:
Impro Expert is a web development agency offering customized solutions for a strong online presence. We tailor projects to meet unique needs, ensuring impactful digital results.