A guide to web design & development QA

Is it supposed to look like that?

There’s a bit in the film ‘This is Spinal Tap’ when a stage prop replica of Stone Henge makes a less than spectacular appearance. As it descends on to the stage where the band are playing, it makes a BIG impression but for all the wrong reasons. That’s because it’s exact in every detail… except for the one that matters the most. 

The reason for this mishap was due to a misunderstanding during the briefing stage. If only they had quality checked it first!

What is Quality Assurance?

Quality Assurance (QA) is perhaps the most important part of not just a web or digital build but any project. All the time you’ve invested in planning, designing, and developing a website will start to fall apart if the site doesn’t deliver what it promised to. But it’s not only the final product that can suffer, it’s also the underlying client relationships that you’ve worked so hard to develop. 

At best, this puts at risk an agency’s hope for a case study! At worst, it makes a website unusable for end users puts at risk any chance of repeat business or retaining the client account.

In short, QA is essential from a business perspective. If what you are producing is not to the quality expected, then an agency has very little chance of success.

By way of example, does anyone remember Ratners, the jewellery chain? They used to be Britain’s biggest jewellery retailer with over 300 shops up and down the country. One day, their chairman Gerald Ratner described one of their products as being ‘total crap’ and boom! Almost overnight, this ‘off the cuff’ remark sparked a £500m plunge in value that nearly resulted in the firm’s collapse.

This just goes to highlight how important quality is. If only Gerald could turn back the clock… I’m pretty sure he wouldn’t have said what he did, and would instead be checking every piece and conducting the product QA himself.

QA is super important and so it needs to be woven into every step of a project and not just at the end. If left to the end and a big reveal, you increase the chances of a gap forming between what the client was expecting and the reality of what they will be receiving.

The solution is simple – communication – and this starts right at the beginning. By working in collaboration with the client, you can discuss and work together to build a clear and shared understanding of what ‘quality’ constitutes and ensure both sides are aligned.

It’s all about the planning

For example, mapping out a client’s key requirements at the beginning of a project using user stories will help you all agree what elements are super important from those that are ‘nice to haves’.

Of course, there will be a tendency to insist everything is super important which is where prioritisation will be needed. These will always be guided by what the key business objectives are.

If the client company has multiple stakeholders, each with their own ideas for what is important and what quality consists then no problem! User stories will help get a shared understanding and consensus of where the business priorities lie and where the focus of attention should be.

For example, a simple user story for an event’s company might be as follows:

As a <customer>, I want to <book a ticket> so I can <attend an event>

This outline description can then have an acceptance criteria added to it which will be used as a reference point throughout the project to confirm a base quality level.

For example: “Can a user book a ticket Yes / No” ?

This approach helps you and the client agree upfront on what quality looks like and how it’s success will be measured. 

But it doesn’t stop there. 

QA in website design & development stages

As you move through planning and on to the design and development of a project, quality assurance is a key feature of these stages too. We use extensive checklists within our project management software to make sure these requirements are met. Here are a few exampels:

• Do the wireframes deliver against the prioritised user stories? 
• Can they be tested with sample users and tweaks applied? 
• Do the designs meet the brand guidelines? 
• Do the designs deliver against the wireframes and have they been checked and approved by the WordPress development team?
• Has the client reviewed and has feedback been checked and actioned?
• Has the client approved the outputs?

All of the above are of course a given. But they are important QA touch points and ones which will help provide for a far better product which surprises for all the right reasons.

But it doesn’t stop there either!

This is a team effort and continuous communication is key to ensure that everyone working on the project is kept up to speed with how work is progressing. It also helps guard against nasty surprises by ensuring expectations are managed.

Time is, of course, money. So feedback loops need to be kept as efficient as possible to ensure the focus of attention is on the delivery. Daily standups are a great and an informal way to keep everyone up to speed with progress. They are also great at quickly teasing out any issues, blockers or areas that may require further clarification to ensure that the quality of output is the best that it can possibly be.

Quality is a team effort, so test, test, and test again. 

That’s the mantra we all chant as we run through the development stages too. 

The acceptance criteria and test scripts guide the way but the developers check the work on local environments before deploying to staging sites. Having multiple development environments is key to being able to conduct QA. Work is then cross checked by a developer ‘buddy’ before it is released to the project manager or QA consultant for internal quality assurance and testing, using the acceptance criteria and testing scripts as a guide. 

There is of course lots of testing that is done on different browsers, devices, network speeds and so on, to make sure designs works seamlessly in different environments. And for more complex projects, there are clever technologies we can use to deliver test automation, so that each time we deploy a project automatic testing scripts run to ensure all the important functionalities still work.

Trust, communication, and collaboration are key

Once the internal quality checks have been completed, the site is then handed over to the client for their User Acceptance Testing (UAT).

If the above steps are followed and the client has been actively engaged during the project, then a ‘Stone Henge’ moment is avoided. Instead, they will be the proud owners of a newly designed and developed site that meets the needs of their users and their business objectives.

Sometimes, it’s easy to lose sight of the things that matter when you are focusing on the detail and you have a deadline looming. That is why, quality is not just the responsibility of one person – it is a team effort.