Cypress UX UI Guide

UI/UX Quality Checks in WastePLUS

What are UI/UX Quality Checks?

UI/UX Quality Checks are automated tests that verify whether the application’s interface follows the design system, design tokens, and UX rules defined by the UX team.

These checks run every time the application is tested and help ensure:

• Visual consistency
• Correct use of typography
• Proper spacing and alignment
• Correct colours and contrast
• Adherence to design tokens
• A predictable, accessible user experience

Think of them as a robotic designer reviewing every screen, every time.

---

Why We Built This System

Design consistency is essential for:

• User trust
• Accessibility
• Brand alignment
• Predictable interactions
• Reduced cognitive load

But manual visual review is:

• Time‑consuming
• Easy to miss details
• Hard to repeat consistently

Automated UI/UX checks solve this by:

• Running on every pull request
• Catching issues early
• Providing structured feedback
• Helping designers and developers speak the same language

---

How the Checks Work (Conceptually)

Each UI element is inspected for:

• Typography

  • Font size
  • Font weight
  • Line height

• Colour

  • Text colour
  • Background colour

• Spacing

  • Padding
  • Margin

• Borders

  • Border colour
  • Border radius

Each property is compared against the design token it is supposed to use.

If the actual value does not match the expected token value, a UX violation is recorded.

---

Taxonomy (How We Categorize Issues)

Every issue is classified into a category:

Category	Meaning
Typography	Incorrect font size, weight, or line height
Color	Wrong text or background colour
Spacing	Incorrect padding or margin
Border	Incorrect border colour or radius
Token Missing	A design token was expected but not found
Style Mismatch	A general mismatch that doesn’t fit another category

This helps designers quickly understand what kind of issue occurred.

---

Severity Levels (How Serious Is the Issue?)

Each issue is also assigned a severity:

Severity	Meaning
Critical	Breaks accessibility or major design rules (e.g., wrong colour)
Major	Significant deviation from design tokens (e.g., wrong typography)
Minor	Small inconsistencies (e.g., spacing slightly off)
Info	A check was performed (not an issue)

Severity helps teams prioritize fixes.

---

What the Report Looks Like

At the end of a test run, a UI/UX report is generated.
It includes:

Summary

• Total checks performed
• Total violations
• Violations by severity
• Violations by category

Detailed Findings

For each issue:

• Scenario name
• Element selector
• Property checked
• Expected value
• Actual value
• Taxonomy
• Severity

This gives designers a clear, actionable list of what needs attention.

---

Why This Matters to Designers

This system:

• Protects design quality
• Ensures consistency across the product
• Reduces manual review effort
• Helps catch regressions early
• Gives designers visibility into UI issues
• Strengthens collaboration with developers

It’s not replacing designers — it’s supporting them by automating the repetitive parts.