Cross Platform Tester Design

cross-platform-tester-design

Agent: UX/UI Designer

L2 UX/UI designer (Nx) responsible for user flow design, wireframing, prototyping, and component mapping.

Department ethos: ideal-design.md

Skill Description

Tests designs across platforms, devices, and screen sizes to verify consistent experience quality, responsive behavior, and platform convention adherence.

When to Use

• When a design targets multiple platforms (web, iOS, Android) and needs verification that platform-specific conventions are respected.
• When responsive breakpoint behavior needs validation across mobile, tablet, and desktop viewports.
• When a new device category (foldable, large-screen tablet, wearable) is added to the support matrix.
• When QA or engineering reports visual inconsistencies between platforms and the design source needs verification.

Workflow

1. Define test matrix: Determine coverage tiers (Tier 1 must-test, Tier 2 should-test, Tier 3 edge case) using the platform test matrix. List target platforms, devices, screen sizes, orientations, input methods, and accessibility modes. Deliverable: platform test matrix for this release.
2. Prepare test artifacts: Ensure Figma frames exist for each breakpoint and platform variant. Verify that prototypes cover platform-specific interactions per the interaction parity table in the platform test matrix. Deliverable: test-ready design artifacts per platform.
3. Execute visual comparison: Review each screen at every breakpoint against the visual check dimensions in the platform test matrix. Check layout reflow, typography scaling, image cropping, touch target sizing, and spacing token application. Deliverable: visual comparison report with annotated screenshots.
4. Test interaction parity: Verify interaction flows against the platform-specific patterns in the platform test matrix. Confirm navigation, modals, bottom sheets, and back gestures follow platform conventions. Deliverable: interaction parity checklist.
5. Document deviations: Record every inconsistency using the deviation severity scale in the platform test matrix. Distinguish intentional platform adaptations from unintentional drift. Deliverable: deviation report with fix recommendations.

Anti-Patterns

• Desktop-first bias: Testing only desktop breakpoints and assuming mobile will "just reflow." Why: mobile layouts require deliberate content prioritization, touch target sizing, and gesture design that cannot be inferred from a desktop layout.
• Pixel-matching across platforms: Expecting identical appearance on iOS, Android, and web instead of respecting each platform's conventions (Material Design, Human Interface Guidelines). Why: forcing iOS patterns on Android (or vice versa) violates user expectations and increases interaction friction.
• Ignoring input method differences: Testing only mouse interactions and neglecting touch, keyboard, and voice input. Why: each input method has different target size requirements, hover state availability, and focus management needs.

Output

On success: Produces a cross-platform test report containing the test matrix, visual comparison with annotated screenshots, interaction parity checklist, and a deviation report with severity and fix recommendations. Delivered to the designer, engineering team, and QA.

On failure: Report which platforms or devices could not be tested (missing Figma frames, unavailable prototypes, inaccessible device lab), what partial coverage was achieved, and what is needed to complete testing.

Related Skills

• wireframe-builder -- Wireframes should define responsive behavior that cross-platform testing validates.
• design-implementer-review -- Implementation reviews on each platform verify that cross-platform design specs were built correctly.
• accessibility-checker-design -- Cross-platform testing must include accessibility verification per platform.