Design QA: How We Check Design Before Launch
Design QA (Quality Assurance) is the process of checking that what has been built matches the design specification — and that it meets quality, consistency, and accessibility standards. It sits at the intersection of design and development.
What Design QA Covers
- Visual accuracy: Does the built product match the approved designs? Check: spacing, typography, colours, border radii, icon sizes, image quality
- Responsive behaviour: Does the layout adapt correctly at all target breakpoints? Test on real devices and a range of viewport widths.
- Interaction states: Are all states designed and implemented? Hover, focus, active, disabled, loading, error, empty, success states for every interactive element.
- Content consistency: Are all labels, button text, headings, and error messages correct and consistent?
- Accessibility: Does every interactive element have a visible focus state? Is contrast sufficient? Do images have alt text?
- Cross-browser: Does the design render correctly in Chrome, Firefox, Safari, and Edge?
Our Process
- Designer creates a Design QA checklist for each feature before development begins
- Developer implements and self-reviews against the checklist
- Designer reviews the implementation in browser and notes discrepancies
- Discrepancies are logged as tasks and resolved before feature sign-off
Tools
Figma (design reference), browser dev tools, Percy or Chromatic for visual regression testing, axe for accessibility checking.