Design Systems & Process

Quality Assurance Framework

A shared language for visual quality that let design, development, and QA evaluate the same screen the same way.

Client: TD Bank
Role: Senior Product Designer
Duration: 3 months
Reading time: 8 min

Product Design/Design Strategy/Process Design/Cross-Collaboration/Quality Assurance/Design Systems/Product Design/Design Strategy/Process Design/Cross-Collaboration/Quality Assurance/Design Systems/Product Design/Design Strategy/Process Design/Cross-Collaboration/Quality Assurance/Design Systems/Product Design/Design Strategy/Process Design/Cross-Collaboration/Quality Assurance/Design Systems/

Systemic impact

57+: Defects identified and resolved
24%: Defect resolution rate per release
1 yr: Worth of backlog catalogued
4: Squads running the framework

Introduction

Visual defects slipped through every sprint

Off-brand buttons, misaligned fields, and inconsistent spacing reappeared release after release, even with bi-weekly reviews on the calendar.

By the time we consolidated everything into one place, we had catalogued a year's worth of backlogged defects. Clearing them would have consumed most of a development quarter.

We weren't just missing pixels. We were missing a strategic process.

Framing

Three teams, three definitions of quality

Designers relied on visual observation. Developers thought in systems and code. QA operated through scripts and test cases. Each group was evaluating the same screen against a different standard.

To close that gap we needed a shared methodology that could run in real time and slot into existing workflows without slowing delivery.

The question

How might we create a shared framework that aligns design, development, and QA around a common way of seeing quality — before issues reach production?

Defect severity matrix rendered as a grid of coloured cells — Every catalogued defect, plotted by severity and surface area.

The taxonomy

Malfunctioning component: Interactive elements that fail to respond or behave unexpectedly, breaking a core flow.
Missing component: Elements specified in the design that never made it into the build.
Content misalignment: Copy, hierarchy, or labelling that contradicts the approved spec.
Style drift: Spacing, colour, or type that falls outside system tokens — the most common and most ignored.

Annotated interface panels — Severity labelling applied directly in review.

Measurement overlay on a dark surface — The redline overlay used during triage sessions.

Outcome

Taste, made operational

The framework turned a subjective eye into a rubric anyone could apply. QA started filing defects in design language; developers started catching drift before handoff.

It has since been picked up by adjacent squads and is applied continually rather than as a one-time cleanup.

Next project

Unified Onboarding

Product Design