Visual Testing: Enhancing UX For Healthcare Applications

The client is a large international healthcare organization based in the United Kingdom. They faced a problem with the user interface of their healthcare application. With over 38 million customers worldwide, they provide high-quality healthcare solutions, such as insurance coverage and health services. They have a strong presence in various markets and run clinics, dental centers, and hospitals to ensure that millions have access to quality healthcare.

The Challenge: UI Validation in CMS-Based Applications

Despite robust development practices, ensuring a consistent and error-free user interface across large-scale digital applications remained a challenge for the client - particularly in CMS-driven environments. Below are key issues that impacted the quality and reliability of the user experience:

• Delayed Discovery of UI Defects: Many UI-related issues were identified in the last leg of testing cycle, often during final validation or after deployment. As a consequence, the application developed critical visual inconsistencies including broken layouts or missing elements—reaching production. Not only did this increase remediation costs, but it also risked undermining user confidence.
• Limitations of Manual UI Validation: Since the user interface was complex, testers prioritized core user flows, inadvertently missing visual or layout issues in less prominent areas. These undetected defects often progressed to higher environments, impacting overall quality.
• Unintended Impact of CMS Updates: The global components - such as headers, footers, and navigation were being managed using Content Management System (CMS) that brought efficiency in managing global components. However, updates to these shared components frequently had unintended side effects on multiple pages. Without comprehensive visual regression testing, such changes introduced inconsistencies that were not immediately apparent during testing.

The Solution: Implementing Automated Visual Testing with Percy for UI Consistency

To address the UI quality challenges and reduce the risk of visual defects reaching production, the Datamatics Quality Engineering team designed and implemented a structured visual testing solution. Here’s how the approach unfolded:

• Proof of Concept with Percy: The Datamatics team created a Proof of Concept (POC) using Percy, a visual testing tool from BrowserStack, that fits into the client’s existing BrowserStack setup. This made it easy and cost-effective to evaluate without extra licensing fees.
• Establishing a Visual Baseline: During the POC, the team took screenshots of important web pages from a stable, higher environment. They used these images to create visual baselines. The baseline images served as a reference for spotting inconsistencies in future development and testing cycles.
• Comparing and Detecting UI Changes: Percy automatically compared the baseline images with those generated from lower or testing environments. Any visual discrepancies including layout shifts, colour mismatches, or missing elements were flagged, enabling the team to catch regressions early and ensure UI consistency.
• Enterprise-Wide Adoption: After reviewing the POC results and the client adopted Percy and scaled the implementation across all web and mobile applications. This resulted in standardized visual validation, minimized manual effort, and significantly reduced the risk of UI-related issues progressing to production.