Posted on 11/10/2015 in UX and Design

Over the last few months, I have been diving into the recommended processes and best practices for planning, building and delivering a successful website. My previous posts covered the Discovery and Boarding Phase and the Design Phase. In this post, I will be walking you through the Production and Quality Assurance (QA) Phase, which is when the site really starts to come together.

Converting your Designs into Code

Now that design and functionality have all been planned and approved, it’s time for the Developers to come in and start turning these plans into an actual working website. Regardless of what platform you are building the site in (ie: Kentico, WordPress, etc), the first step in the production phase is to convert the static designs from the layered Photoshop files into code (HTML, CSS and JavaScript).

This is sometimes referred to as “design breakouts” because the designs are broken out into all of the pieces that will be used by the Developer to create functional templates and pages. The Project Manager will guide the Developer(s) through this process to make sure they understand specific functional requirements for the design such as, which text needs to be editable, how elements move on a page, and how the design should scale responsively.

Depending on the size of the website, this process generally takes 1-2 weeks to complete.

What to Expect During Development

Once the designs have been converted to code, the Developer should have everything they need to program the website. This will be built on an internal development server that will not be accessible to search engines. Prior to starting development, the Project Manager and Developer(s) will sit down together to review the designs and approved functional specification document. They will then break up the work into multiple tasks based on the milestones outlined in the functional spec.

If there are multiple Developers on a project, it is determined how work is being split between them. The timeline is reviewed and due dates are given for each task to provide checkpoints for progress. The duration of the development phase can vary greatly based on the size and complexity of the website so always consult your project timeline.

As the site is being built, there is typically less need for client feedback so weekly status calls will likely be brief or unnecessary in the beginning of the build-out. Once development is a little further along, status calls can be used to show the progress of the completion of specific milestones and checkpoints. If content entry is part of the project, this would be the absolute latest point in the project where it should be received so that it can be entered prior to QA.

Internal Quality Assurance

After the Developer has completed all programming and the Project Manager has completed all page production work (if applicable), the next step is for the agency to perform a thorough round of quality assurance testing. This is typically a 2-3 week process based on the size of the website. The goals for this testing are to:

  • Ensure that design, functional specification, and page production has been implemented correctly.
  • Eliminate all visual flaws before the client is asked to review the work.
  • Ensure the site functions in all supported browsers.
  • Limit functional bugs found during client acceptance testing.
  • Anticipate and eliminate common-sense client revision requests.

The Project Manager takes the lead on testing but other members of the team are also involved to lend additional perspective. The Designer is brought back in to make sure that the designs have been implemented properly. The Developer runs a series of functional tests and may pull in another Developer for a code review. The Project Manager, along with other production resources will do an overall test to check design and functionality has been delivered per the approved spec in all requested devices and browsers.

Any bugs that are found as part of this round of quality assurance testing are logged in our ticketing system and assigned to the appropriate resource to correct. Once a bug has been fixed, it is sent back to the Project Manager to verify and close the bug ticket if it is confirmed as fixed. When all bug tickets have been resolved, it’s time to turn the site over to the client.

Client Acceptance Testing

At this stage in the project, the agency will provide the development site link to the client team along with a site login so that they can also perform a thorough review of the site and make sure that there are no bugs that were missed. The process of handing this site over happens via a knowledge transfer meeting. The goal of this meeting is to communicate with the client how the deliverables we’ve built are used and managed.

An agenda is created based on the functional spec and the Project Manager walks through these items and the site via screen share so that at the end of the call, the client has a solid understanding of what to expect when they are reviewing and testing the site themselves. This is typically about a 2-hour call.

In addition to reviewing the site, the Project Manager will also review the Client Acceptance Testing process. This is the process for getting final approval on the site to go live. The Project Manager and the client will come to an agreement on a time period for the client to review and provide a list of all bugs found on the site.

If some items arise during testing that was not part of the original scope, they are considered enhancements and can either be added to the project as part of a change order (this extends the timeline) or they can be handled as a separate phase 2 project post-launch.

Lastly, the Project Manager will review the use of the ticketing system with the client and the process for how to enter a bug ticket. As bug tickets are entered, the process for resolution is similar to the Internal QA process. Bug tickets are reviewed by the Project Manager and assigned to the appropriate resource to resolve.

Once fixed, the ticket is assigned back to the Project Manager to review and if it looks resolved, the Project Manager will then send the ticket back to the client for final approval. Once all bug tickets are approved and closed by the client, the Project Manager will send the final invoice and project signoff document to get the client’s approval to launch the site.

In the final installment of this series, I will discuss the process for deploying a site and what items to watch out for that could delay your site launch at the last minute.

Thinking about redesigning your website?

Contact us today to find out how we can help you!

Planning Your Next Redesign?

3 Things Redesign White Paper 2021Download Our Whitepaper

Related Articles

Elevating Your Brand: The Transformative Power of Website Design

Elevating Your Brand: The Transformative Power of Website Design

In the digital age, your website is often the first point of contact between your brand and potential customers. It's not just a platform to showcase [...]

Navigating the Digital Landscape: Website Design Trends of 2024

Navigating the Digital Landscape: Website Design Trends of 2024

In the ever-evolving realm of digital innovation, website design trends serve as the compass guiding businesses and creators toward impactful online [...]

A website upgrade can drive success in transportation

A website upgrade can drive success in transportation

When people think of long-haul trucking, heavy shipping, or other sectors of the transportation industry, “cutting-edge online experience” may not be [...]