Practice - Quality Assurance Checklist

Mini QA Scenario Check:
* Task: Imagine you are reviewing a prototype for a simple weather app. You notice the following:
1. On the "Today" screen, the temperature is displayed in a very light grey on a white background.
2. When you click the "Next 7 Days" button, nothing happens.
3. The weather icons (sun, clouds, rain) appear in slightly different sizes on different screens.
* Instructions:
* For each observation, identify which specific item(s) from the Quality Assurance Checklist are being violated.
* Briefly explain why each violation is a problem for the user experience.
* For each violation, suggest one concrete action to fix it.
* Solution:
1. Violation: Color contrast meets WCAG AA. Problem: Text is illegible for many users (accessibility failure). Fix: Change the light grey text to a darker color to meet the minimum 4.5:1 contrast ratio.
2. Violation: Prototype flows are linked correctly. Problem: The user cannot proceed or explore the intended feature (usability failure). Fix: Open the prototype panel and link the "Next 7 Days" button instance to the corresponding target screen.
3. Violation: All visual elements are consistent/use shared components. Problem: The interface looks inconsistent and unprofessional, undermining trust. Fix: Ensure all icons are instances of a single, defined Master Component set to the same size (e.g., 24x24 px) across all screens.

The Proactive QA Designer:
* Task: You are about to start building the high-fidelity prototype for a new "Study Planner" app, and you want to be proactive about quality.
* Instructions:
* Before even starting to design, describe two things related to "Quality Assurance" that you could do during the setup phase (referencing "4. Preparatory Steps") to make your QA checklist checks easier later.
* During the design process, how can building Components with defined variants help you meet multiple items on your QA checklist more efficiently than if you designed each element from scratch every time? (Mention at least two benefits for QA).
* Solution:
* Proactive Setup Actions: 1) Define a style guide/design system with named and shared color styles and text styles before using them in any frame. This ensures consistency from the start. 2) Set the 8 pt base grid (4-point if applicable) on all master frames immediately. This pre-aligns every page and ensures the "consistent grid settings" check is passed automatically.
* Component Variant Benefits for QA: 1) Consistency Check (Efficiency): By building a single button component, you only have to check its visual specifications and color contrast once on the master component, instantly passing the QA check for all hundreds of instances. 2) Interaction Check (Efficiency): By building the hover/disabled/loading variants into the master component, the QA check for "Components have defined variants for all states" is automatically passed for every single button used in the prototype, drastically reducing manual QA time.