Skip to content
UX Atlas
Plate FLOW·003 · WorkflowGrid G2 · Rev. 2026-08-14

Design QA

Checking the built thing against the intent, before release rather than after.

WorkflowCraft conventionIntermediate

Definition

Design QA is a structured review of an implementation against the design intent, covering visual accuracy, interaction behaviour, states, responsiveness and accessibility.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2A review pass in order
  3. 3How to run the pass
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Before any release.
  • After significant refactoring.
  • When implementation quality is inconsistent between teams.
  • A release is close and nobody has seen the built version next to the intended one.

Common mistakes

  • QA after release rather than before.
  • Pixel-level reports with no priority.
  • Only the default state checked.
  • Accessibility left out of the pass.
  • Raising every pixel difference at the same severity, which trains the team to skim the list.

A review pass in order

  1. 1.Happy path at the default width, checking spacing, type and colour against tokens rather than by eye.
  2. 2.Every state: hover, focus, active, disabled, loading, error, empty.
  3. 3.Keyboard only, from start to finish, with no mouse.
  4. 4.Narrow width and 400 percent zoom.
  5. 5.Long content, empty content and error content.
  6. 6.Dark mode, if supported.
  7. 7.Reduced motion.
  8. 8.One screen reader pass on the primary flow.

How to run the pass

  1. 1

    Review the build, not the screenshot

    In a browser, on a device, with real data. Most of what QA catches does not exist in the design file.

  2. 2

    Go in one order every time

    Structure, then states, then spacing and type, then motion, then keyboard and screen reader. A fixed order is why the boring checks still get done.

  3. 3

    Separate defect from change request

    A defect is where the build differs from the agreed design. Anything else is new work and belongs in the backlog, not in this ticket.

  4. 4

    File one issue per problem

    With a screenshot, the expected behaviour, and where it was seen. A list of twelve things in one ticket gets half fixed.

  5. 5

    Retest, and close it yourself

    The person who raised it is the person who can tell whether it is fixed.

In practice

  1. i.

    Real data breaks it

    What to test with

    Names of forty characters, prices in a currency with no decimals, a description that is three words. Design files are populated with content that fits, which is exactly the content that proves nothing.

Local chart

FLOW·003 · Region IV · Grid G2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ChromaticTOOL·041 · OFTEN USED WITHPre-Launch ChecklistCHK·009 · CHECK YOUR WORKUX Audit ChecklistCHK·008 · CHECK YOUR WORKAcceptance CriteriaTERM·095 · SHORT DEFINITIONDefinition of DoneTERM·096 · SHORT DEFINITIONDesign QATERM·113 · SHORT DEFINITIONKeyboard NavigationA11Y·002 · RELATED CONCEPTReflow and ZoomA11Y·013 · RELATED CONCEPTSpecification to Working CodeAI·010 · RELATED CONCEPTDesign and Code ParitySYS·010 · RELATED CONCEPTVisual StatesFND·053 · RELATED CONCEPTAccessibility AuditFLOW·012 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.