[Design] Mock-ups for the Test Form button

[emilylordahl]

During concept testing, it was observed that the "Test Form" button to see the form from the end-user perspective was not noticed or engaged with and did not meet the form author's need to see the form from the applicant's POV.

Change the visual design or placement of the “Test Form” button so it is more obvious to form builders. Things to explore include:

• Changing the color of the button to the USWDS secondary styling (current design exploration)
• Changing the location of the button
• Adding "Test" form to the step indicator component so that authors are directed to that as a next step after completing the draft. (recommended) During testing, participants described testing the form as their next step after editing.

Overview

As a _, I would like _, so that I can _.

Context

Optional: Any reference material or thoughts we may need for later reference, or assumptions of prior or future work that's out of scope for this story.

• [ ]

Acceptance Criteria

Required outcomes of the story

• [ ]

Research Questions

• Optional: Any initial questions for research

Tasks

Research, design, and engineering work needed to complete the story.

• [ ]

Definition of done

The "definition of done" ensures our quality standards are met with each bit of user-facing behavior we add. Everything that can be done incrementally should be done incrementally, while the context and details are fresh. If it’s inefficient or “hard” to do so, the team should figure out why and add OPEX/DEVEX backlog items to make it easier and more efficient.

• Behavior
  • Acceptance criteria met
  • Implementation matches design decisions
• Documentation
  • ADRs (/documents/adr folder)
  • Relevant README.md(s)
• Code quality
  • Code refactored for clarity and no design/technical debt
  • Adhere to separation of concerns; code is not tightly coupled, especially to 3rd party dependencies; dependency rule followed
  • Code is reviewed by team member
  • Code quality checks passed
• Security and privacy
  • Automated security and privacy gates passed
• Testing tasks completed
  • Automated tests pass
  • Unit test coverage of our code >= 90%
• Build and deploy
  • Build process updated
  • API(s) are versioned
  • Feature toggles created and/or deleted. Document the feature toggle
  • Source code is merged to the main branch

Decisions

• Optional: Any decisions we've made while working on this story

[emilylordahl]

@jimmoffet This issue was added as a result of the UX Concept testing in #116 . It needs further refinement and prioritization.
UX considers this a major feature/issue due to it coming up with a majority of participants. Review details from the research in the research report.

[JennyRichards-Flexion]

Previews of what happens when the Test Form button is pressed are already in current mock-ups.