Posted on 11/10/2015 in UX and Design

By Jeannine Szymczak

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 Blogs

The Basics of Information Architecture

The Basics of Information Architecture

Did you know that on average users spend 5.95 seconds looking at a website’s main image and 5.59 seconds looking at a website’s content? That means [...]

The Anatomy of a Successful Bank Website Design

The Anatomy of a Successful Bank Website Design

When you think about anatomy, you might picture parts of a body that are all interconnected to form a whole person. A website can also be broken down [...]

Spotlight on Banking Website Design

Spotlight on Banking Website Design

When was the last time you did some banking online? Or did you recently search for a new credit union? There are so many banks and credit unions to [...]