Help Center
QA Testing

QA Testing

A design method for ensuring the quality of our products and services.

The nuts and bolts: QA testing is the process of validating and verifying the artifacts and behavior of the software. Software testing may also give a business an objective, unbiased picture of the software, allowing them to grasp and comprehend the risks associated with a software release.


Intro to QA Testing

Sure, Quality Assurance (QA) testing your code can be a chore. It’s tedious. You’d rather be surfing or checking your Facebook news feed. But you can’t put it off in this age of so many different phones, tablets, and other web-enabled devices. Millions of people use those devices on a daily basis to hop online. Designers can no longer afford to put off QA testing to play another game of Halo.

Let’s think about it this way — Internet Explorer 6 usage plummeted to less than 1% in the United States at the start of 2012. Companies from Microsoft to Google have dropped support for it entirely. OK, go ahead, take a moment, rejoice — you earned it.

A new and even-more-important segment of traffic has emerged, and it will only continue to grow — the mobile web. The number of people who access the Web on mobile devices will outstrip desktop users by 2013. Mobile users expected to grow to a whopping one billion.

So what does this mean for web designers and developers? For one thing, the old ways of web design no longer work. Websites and online products can no longer afford to be stuck in 960px Photoshop templates. As product designers, we can’t limit our products only to look good on Firefox, Chrome, Safari, and Internet Explorer. We have to consider all the smartphone and tablet operating systems, such as iOS, Android, and Windows.

Not designing for mobile or other web-enabled devices would cut our products off from a potential one-billion customers. What’s more — if you change your mind later, retrofitting your site to be mobile-friendly can be a nightmare. That’s why we need to design with mobile in mind from the get-go. Which is why QA testing for both browsers and mobile devices is crucial.

When it comes to who will be doing QA testing, it depends. Around the ZURB offices, the coder is responsible for testing the code. Occasionally, it’s the Design Leads who take charge. But really everyone on the team is responsible for QA.

In any case, don’t fret, QAing doesn’t have to be daunting. There are a few strategies we use that can help make the process go more smoothly for you … and keep you from tearing your hair out.

Know Your Audience, Know Yourself

You might’ve heard the old saying, “know your enemy and know yourself.” That comes from Sun Tzu’s “The Art of War.” Tzu was talking about knowing your enemies in battle. If Tzu lived today and was a Silicon Valley entrepreneur instead of a military strategist, he’d probably rewrite that to be “know your audience and know yourself.”

Say, for instance, you work on enterprise products for large businesses or a site aimed at people in China then IE6 might still be crucial for your users. On the other hand, mobile users would be your target audience if you create an informational site for people-on-the-go. Don’t go snagging worldwide demographics if your audience doesn’t reflect global averages.

You can’t simply go out there and build a product for several months in silence. It’s a blind bet with very tough odds. Take, for instance, Josh Levy and Ross Cohen, BeenVerified’s co-founders. They blew $550,000 in funding without getting a single customer because they developed a product in silence first and tried to find a market later. They didn’t know who their audience really was. They could’ve saved themselves a lot of time and money if they did a little user testing beforehand.

Knowing your audience before you start designing will help you focus your attention on the features and platforms that matter most.

Buggy Software Can Be Costly

Get this, buggy software cost the U.S. economy a whopping $60 billion in 2002, according to a 2005 Computerworld article. That’s not all though. Remember the 2004 U.S. Presidential Election? Yeah, buggy software played a role in the election SNAFU in Florida. Remember the Northeast blackout of August 2003? Yep, you guessed it … buggy software, says the article. So QA testing is pretty important to squash those bugs.

Get it Under (Version) Control

Hopefully, you’re already using a version-control system. If not, hop to it! At ZURB, we use Git repositories for all our apps, which are hosted by Github. With version control, you can roll back to a stable state in case you accidentally break (read: screw up) a feature. It’s absolutely critical for working in a team.

Track Those Bugs Down

Tracking Bugs

To ferret out those pesky bugs that have fallen through the cracks, you’ll want an issue tracking system, such as those integrated into Github or Lighthouse. Not only will these help in finding and squashing bugs, but also help keep track of what’s important for upcoming features, as well as who’s working on what.

“Future-Proof” Your Designs

By now, you’re probably asking yourself, what can you do to completely ensure and test whether your product is right for the countless devices available. That’s where a responsive framework comes in. Responsive grids adapt based on screen size, not device type. They’re much more adaptable to the constant stream of new devices hitting the market, meaning your code can be, to some extent, “future-proof.”

Which is why we built Foundation, a flexible framework for building prototypes. Rather than testing on every device out there (hundreds, if not more), a responsive framework helps you focus on devices representative of each OS and device. Check out the browsers we test for:


QA Testing Chart

Here’s the mobile operating systems we test for:

QA Testing Chart

Test, Test, and Test Again

Around the offices, we keep handing several tablets and smartphones, such as the iPad and the Windows phone, to test out our design. However, we do a lot of testing on the various operating systems because it’s impossible to test on every device (as we said, there’s hundreds of them!).

But remember, don’t try to shoehorn mobile into your site after the fact. The more attention you pay up-front, the much better product you’ll have in the future. However, it’s never too early to test to get the feedback you need while you build. Conduct user interviews before, during, and even after you build. In other words, test, test, and test again.

Get started testing with Helio. Use this easy-to-use test template:

Website Design Test

Capture a quick yet precise evaluation of your website’s performance by considering usability, net promoter score, and visual appeal.

Use this template for:

  • Concept Testing
  • Validate design choices you’ve made to ensure that user needs are met in a satisfying way
  • Maintaining an open line of communication with real users allows for the most critical feedback to make it back to your product team’s ears
Use Template