[Design] As a test user, I want to see dev-ready mockups to upload each section of a TANF report

[shubhi-raft]

Problem Statement:

For OFA MVP, test users acting as STTs need to upload each section of TANF report . This issue delivers dev ready mockups for choosing TANF report year between 2020 and 2021 and uploading files for each section of a TANF report for a quarter.

Questions:

• Do we need button to resubmit a TANF report? If so, update [Frontend] Add initial reports page with button to begin report #119.
  • Yes, to replace uploaded files
• Do we need progress bar to show percentage of upload for OFA MVP?
  Answer: No
• How far back can a STT go to resubmit their report? This would helpful in determining whether we use a combobox or select (dropdown) component in design.
  Answer: Year is needed. Ask OFA data team about how far back can resubmit the TANF data report. Ask Robert Jolly whether combobox is needed if more than 15 options to display a list of years.
• What does uploading look like for an OFA admin? Can you select which grantee? What is needed for OFA MVP?
  • Mockup for OFA admin uploading TANF report for grantees may look different. New issue [Design] As an OFA admin, I want to see dev-ready mockups to upload each section of a TANF report #446 has been created and will be revisited post OFA MVP.

AC:

• The problem we are trying to solve is clearly stated, as are questions we still have
• The design is consistent with the team’s past decisions, or a change is clearly documented
• The design is usable, meaning...
  • It uses USWDS components and follows it’s UX guidance, or a deviation is clearly documented
  • Language is intentional and plain; placeholders are clearly documented
  • It follows accessibility guidelines (e.g. clear information hierarchy, color is not the only way meaning is communicated, etc.)
  • If feedback identifies bigger questions or unknowns, create additional issues to investigate
• User flow is updated

Tasks

• Refine conceptual mockups As a data prepper, I want to evaluate conceptual mockups (v.1) simulating TANF report metadata input #115 and As a data prepper, I want to evaluate conceptual mockups (v.1) simulating the uploading of flat files associated with TANF reports #275 to make them dev ready mock-ups for As an OFA admin, I can securely upload each section of a new TANF report #398. (Stepper is not going to be implemented in OFA MVP)
• Update 'Validate File Details' to something to do with uploading files.
• Ask OFA data team about how far back can resubmit the TANF data report for drop down selection to select an year
• Ask Robert Jolly whether combobox is needed if more than 15 options (accessibility check) to display a list of years.
• Update [Frontend] Add initial reports page with button to begin report #119 if we need resubmission button
• Check for accessibility

DD

• Documentation: Design has been shared with the PO and team for feedback
• @lfrohlich has reviewed and signed off

Notes:

• User research findings:
  • There were unfamiliar fields and layouts in the XLS template
  • Consider what header fields we actually need from the data submitter and which can be filled in by a default value or by OFA. For essential values, consider plain language labels to explain new concepts that are visible to data submitters.

Supporting documentation:

• As a data prepper, I want to evaluate conceptual mockups (v.1) simulating TANF report metadata input #115 and As a data prepper, I want to evaluate conceptual mockups (v.1) simulating the uploading of flat files associated with TANF reports #275
• Figma Mockups
• User Flows

Deliverable(s):

• Link to Figma

[lfrohlich]

Added comments in Figma re: removing Test Quarter placeholder language (which @reitermb already changed :) ) . For now, we only need 2019 and 2020. To discuss; what is uploading for an OFA admin? Can you select which grantee? What is needed for OFA MVP?

[lfrohlich]

Thanks for adding the notation to the arrows! This looks good and is ready to demo.