Build baseball card prototype

[msbtterswrth]

User Story

As an engineer on the AEDP team,
I want to build an interactive prototype of the Baseball Card pattern using mock data in Codespaces,
So that we can test the prototype with users and validate the technical feasibility of the design.

Background

To validate the Baseball Card pattern, the UX designs need to be brought to life as an interactive prototype. Using Codespaces and mock data allows us to simulate real-world functionality without relying on live back-end systems. This prototype will be used for usability testing and to confirm that the design can be implemented with existing front-end frameworks and VA systems.

Discovery Goals

• Validate that the design can be implemented using the VA Design System (VADS) components or by building new VADS components.
• Ensure the interactive prototype functions smoothly and reflects the UX variations.
• Test mock data display to simulate benefit details like health care, disability, and education statuses.

Questions to Answer

• Can the interactive prototype effectively display the baseball card layout using mock data?
• Are there any technical challenges with implementing the designs?
• How well do VADS components support the pattern?
• What, if any, new components will be needed?
• Does the prototype reflect accessibility requirements (e.g., keyboard navigation, screen reader support)?

Resources

Deliverables

• An interactive front-end prototype of the Baseball Card pattern in Codespaces.
• Mock data simulating:
  • Current benefits (e.g., health care enrollment, disability compensation, education eligibility).
  • Additional benefits recommendations.
• Implementation of:
  • Baseball card layout based on high-fidelity designs.
  • Interactions (e.g., links, hover states, expand/collapse elements).
  • Accessibility features (keyboard navigation, screen reader behavior).
• Notes documenting any technical challenges or recommendations for full implementation.

Acceptance Criteria

• An interactive prototype has been built in Codespaces using mock data.
• The Baseball Card layout and design align with UX specifications and VADS.
• Mock data accurately simulates key benefit details.
• The prototype includes functional interactions, such as actionable links and expand/collapse behavior.
• Accessibility features are implemented and validated (e.g., keyboard input, screen reader compatibility).
• Prototype has been shared with the UX and product team for review and testing.

Constraints & Considerations

• The prototype must use mock data to simulate benefit information without live back-end integration.
• Ensure alignment with VA.gov’s front-end frameworks and VADS standards.
• Accessibility testing (e.g., keyboard focus order) should be prioritized in the prototype.

Review needed by

• UX Research Team
• Product Manager
• VA Product Owner
• Engineering Team

Definition of Done

• Documentation has been updated, if applicable.
• Acceptance Criteria in related issue are met.
• Reviewers have approved.