A Marketer's Spot The Difference. Can You Find All 10 QA Issues?

Awesome customer journeys don’t happen by mistake. It takes rigorous strategy, creating, recreating, and coding with consistent quality assurance to produce that shiny final solution. As UX specialists and manic perfectionists, we strive to produce leading websites that align with our designs. Quality Assurance (QA) is arguably one of the most crucial steps in your digital project and requires a keen eye for detail. 

Put your attention skills to the test. Can you spot all 10 QA issues we’ve created in our before & after recreation?

How does it work?

• ‘Craft Homewares’ is our fictional eCommerce store. 

• The left-hand design showcases the online store prior to QA.

• The right-hand design illustrates the finalised version after QA. 

• Click on the issues via the left-hand design and spot the 10 differences. 

• Our answers provide a description of what is wrong and how it can be improved.

Let's do this! QA Spot the Difference.

Didn't get them all? Find your cheat sheet by tabbing through each identification and explanation. 

Why? The importance of QA.

Minor inconsistencies over time contribute to a broader problem - a disjointed and fragmented user experience. We’re human. Mistakes are inevitable in the pursuit of digital perfection. Yet combatting these issues incrementally throughout your digital project reduces digital debt. Digital projects are front-end heavy. The hard lifting (discovery and strategy) is managed upfront. This thinking is then fed directly into the design. Bypassing regular QA risks a site launch that compromises your critical thinking during these initial project phases. It’s not worth the risk. 

QA versus User Acceptance Testing (UAT)

Same same but different. Both fall under the umbrella of optimising the digital project and user journey.QA is performed periodically to test a broader spectrum of project goals from project requirements, design output and coding standards. It is completed prior to launch during the design and development phases of the project. The end user of the digital platform should perform UAT. It is observation and analysis of interaction with the site. Is it easy to use? Does the output align with user expectations? What is unclear or doesn’t align with the assumed user experience? 

When? ABQA - Always Be QAing. 

Kind of a lame abbreviation but true. We advocate for our team to actively search for improvements during touch points on each project in addition to definitive QA tasks. It’s often the case that the person closest to the project isn’t the best to perform QA. Instead, we ensure constant collaboration between our designer, developers, more developers, account managers and sales team. 

How? Tools to streamline QA

Controlling the scope of QA across multiple departments can become overwhelming. It’s a daunting process, particularly if completed manually. We use the following tools to streamline the QA process: 

Design 

• Our primary design platform is Figma which allows for direct commentary. Provide and respond to feedback and iterate faster all from the original design file. The best part—you can play Big Brother and watch your designer at work in real-time.

• Invision similarly allows for seamless communication and feedback through commentary tools.

Both platforms create tickets directly for your designer which allows for further discussion or task detail.

Development 

• The Bugherd app sits atop your staging site and lets you create tickets instantaneously and pinpoint specific areas of improvement. The best part is that Bugherd records a screenshot and your browser and device to streamline development testing and replication.

• BrowserStack allows for testing on 2000+ real devices and browsers through one platform. We use it to test across bespoke browsers and mobile devices that aren’t maintained in-house to ensure the integrity of our sites across multiple platforms. 

Co-designing is a collaborative process which ensures that all relevant parties are involved in the project progression and combats QA issues consistently to produce that shiny end result.