Design review: Shared platform and filing platform (running checklist)

[natalia-fitzgerald]

Shared platform

✅ Shared platform home (unauthenticated)

• Pre-clearance -- Update body text under 1. Confirm that your financial institution has an LEI @meissadia
  • Preclearance unauthenticated home #676
• Pre-clearance -- Update sidebar heading to "Privacy Notice" @meissadia
  • Preclearance unauthenticated home #676
• Pre-clearance -- Update sidebar link to "View Privacy Notice" @meissadia
  • Preclearance unauthenticated home #676
• Pre-clearance --- On "Privacy Act" page change heading to "Privacy Notice" @meissadia
  • Preclearance unauthenticated home #676
• Pre-clearance change to hero text (see Figma mock-up/comment)
  • [Unauthenticated landing] Content #645 @meissadia
• Change email subject line to match the alert text: "[BETA] Home page: Questions or feedback"
  • [Unauthenticated landing] Content #645 @meissadia
• Update body text and URL under "1. Confirm that your financial institution has an LEI"
  • task: Update language for acquiring an LEI #602 @meissadia
• Update body text under "2. Create an account with Login.gov using your financial institution email address"
  • task: [Shared landing] remove duplicated language #606 @meissadia
• Update the text in the sidebar under "Privacy act"
  • fix: [FilingHome] Update sidebar content #614 @meissadia
• Update text for "Paperwork Reduction Act statement"
  • Paperwork and Privacy notice content #618 @meissadia
• Update text for "Privacy Act notice"
  • Paperwork and Privacy notice content #618 @meissadia

✅ Complete your user profile (associated financial institutions)

• Pre-clearance Add Privacy Notice language and link @meissadia
  • [Complete profile] Add privacy notice #687
• Pre-clearance Update small text in introduction @meissadia
  • Pre-clearance: [Complete profile] Update small header text #678
• Add breadcrumb to Platform home (missing on AWS) @meissadia
  • Complete user profile (w/ associated institutions) #643
  • Add breadcrumb to Platform home (missing on AWS) @meissadia
  • Complete user profile (w/ associated institutions) #643
• Change email subject line to: "[BETA] Complete your user profile: Form assistance" @meissadia
  • Complete user profile (w/ associated institutions) #643
• Update small text in introduction to include link to email support staff and new URL for GLEIF. It would be best to swap in the whole block.
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira

✅ Complete your user profile (no associated financial institutions)

• Pre-clearance Add Privacy Notice language and link @meissadia
  • [Complete profile] Add privacy notice #687
• Update small text in introduction
  • Pre-clearance: [Complete profile] Update small header text #678
• Update body text under "Provide your financial institution details" to reference emailing support staff instead of "Add an additional financial institution" button/link.
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
• Change name of link/button to "Add an additional financial institution"
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
• Comment out "Add an additional financial institution" button/link
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
• For error alert links, remove numbering from "financial institution name" and "LEI" because there will only be one for MVP. You can comment out the numbering in code so that we can bring it back when we reveal the button/link post-MVP.
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
• Update text on error alert for "Your email domain" is not authorized (pre-clearance change).
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
• Add a breadcrumb to the warning alert notification screen (Your request has been submitted) that takes a user back to "Platform home" (un-authenticated).
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira
    -- Reviewed on 6/3/2024 -- Clicking on the breadcrumb is going back to the blank Complete your user profile form -- @shindigira
• Add a breadcrumb to the error alert notification screen (Your email domain is not authorized) that takes a user back to "Platform home" (un-authenticated)
  -- Reviewed on 6/3/2024 --- Clicking on the breadcrumb does not go anywhere -- @shindigira
  • content(Complete User Profile): Updated the language, commented out button #598 @shindigira

Shared platform home (authenticated)

• Pipe character between Financial institution name and LEI should have two spaces before and after --- Moved to Consolidated list of user interface updates  #800
• Content change to form-level error alert when can't load associated institutions
  • fix(Filing home): Render error alert when cannot load associated institutions #649 @meissadia
• Form-level error alert when can't load associated institutions
  • fix(Filing home): Render error alert when cannot load associated institutions #649 @meissadia
• Pre-clearance body text under "File your small business lending data" (see Figma mock-up/comment)
  • fix(authenticated landing): content update #647 @meissadia
• Change link under "File your small business lending data" to a button "File your data"
  • fix: [Filing landing] "File your data" button #616 @meissadia
• Make button text: "File your data
  • fix: [Filing landing] "File your data" button #616 @meissadia
• Add underline to links for bank | LEI
  • styles: [Filing landing] Underline Institution links #604 @meissadia

View your user profile

• Pipe character between Financial institution name and LEI should have two spaces before and after --- Moved to Consolidated list of user interface updates  #800
• Update body text block in introduction @billhimmelsbach
  • fix(update-user-profile): design and content review #634
• Add underline to links for bank | LEI
  • styles: [Filing landing] Underline Institution links #604 @meissadia

✅ View your financial institution profile

• Pre-clearance -- Update GLEIF URL under "Financial institution details"
  • [Pre-clearance] Update institution profile #683 @meissadia
• Pre-clearance -- Line break difference between Figma and AWS in body text in "Parent entity information" section @meissadia
  • Noted in design file - I have added what I believe is a missing "to" in "If you wish update the following"
• Pre-clearance -- Update body text under "Financial institution details"
  • Pre-clearance: View institution profile #681 @meissadia
• Pre-clearance -- Update body text under "Financial institution identifying information"
  • Pre-clearance: View institution profile #681 @meissadia
• Pre-clearance -- Separate "Type of financial institution" into it's own well and update body text above.
  • Pre-clearance: View institution profile #681 @meissadia
• Pre-clearance -- Update body text under "Parent entity information (if applicable)"
  • Pre-clearance: View institution profile #681 @meissadia
• Add "(if applicable)" to the "Parent entity information" heading
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira
• Update heading: "Parent entity information"
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira
• Update body text under "Parent entity information"
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira

✅ Update your financial institution profile

• Pre-clearance -- Update GLEIF URL under "Financial institution details"
  • [Pre-clearance] Update institution profile #683 @meissadia
• Pre-clearance -- Update body text under "Parent entity information (if applicable)"
  • [Pre-clearance] Update institution profile #683 @meissadia
• Pre-clearance -- Update body text under "Financial institution details"
  • [Pre-clearance] Update institution profile #683 @meissadia
• Pre-clearance -- Add helper text under "Type of financial institution"
  • [Pre-clearance] Update institution profile #683 @meissadia
• Update small intro text to indicate that a user is not required to fill in any fields. #636 @meissadia
  • View/Update financial profile #637
• Add "(if applicable)" to the "Parent entity information" heading
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira
• Update heading: "Parent entity information"
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira
• Update body text under "Parent entity information"
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira
• On AWS the filing navigation buttons are showing up at the bottom of the page. Instead this page should use the "Submit" button and "Reset form" link.
  • fix: [Update financial profile] Update buttons #608 @meissadia
• Remove the "Provide additional details" section
  • Removed 'Additional Details' from Complete your User Profile & Update your Financial Institution Profile #592 @shindigira
• Content update to form-level alert (warning) body text
  • refactor(formErrorHeader), [Point of Contact] Field-level Errors Update, [All Forms] Field-Level Errors and Header Errors content pass #566 @shindigira

Filing home

• Pipe character between Financial institution name and Year should have two spaces before and after --- Moved to Consolidated list of user interface updates  #800
• Confirm that card border is using #B4B5B6 (Gray 40). If it is not update to this color.--- Moved to Consolidated list of user interface updates  #800
• Pre-clearance --- Update body text in "Upload your lending data" card
  • fix(filing-home): update content for clearance #660
• Pre-clearance --- Update body text in "Resolve errors in your lending data" card
  • fix(filing-home): update content for clearance #660
• Pre-clearance --- Update body text in "Provide point of contact" card
  • fix(filing-home): update content for clearance #660
• There's a tiny spacing thing that is off by 4 px. It looks like it's 4px coming from the top of the cards.
• Change space above breadcrumb to 30px (currently 45px on AWS)
  • fix: [CrumbTrail] Standard 30px top/bottom margin #600 @meissadia
• Update body text in intro.
  • task: [Filing overview] Add link to FIG #610 @meissadia
• In intro body text, add comma after "specifications" and change the link to lowercase ("filing instructions guide for small business lending data").
  • Content updates #621 @meissadia

✅ Provide type of financial institution

• Pre-clearance -- Update intro body text link and double check rest of body content in the intro
  • fix(type-of-fi): update content for clearance #664 AND fix(ufp-link): change button to link #663 AND fix(reg-links): move from eCFR to iRegs #674
• Pre-clearance -- Add helper text to "Type of financial institution" field set
  • fix(type-of-fi): update content for clearance #664
• Change heading to "Provide type of financial institution" instead of "Provide your type of financial institution"
• Include breadcrumb to "Filing home"
• Change space above breadcrumb to 30px (currently 45px on AWS)
  • fix: [CrumbTrail] Standard 30px top/bottom margin #600 @meissadia

Upload file

• When a user clicks the "Save and continue" button before they have completed the requirements for the "Upload file" step they should only see an error alert positioned at the bottom of the page that says: "File upload and validation checks must be completed to save and continue." Reference 4 scenarios in design file (mock-up).--- Moved to Consolidated list of user interface updates  #800
• Enable "Save and continue" button and make "Save and continue" turn to primary when file has been successfully uploaded and validation checks have completed. Upload new file turns secondary when this happens.
  • Enable Save and continue on all pages (Phase 1) #552 @meissadia
• Pre-clearance change -- Update intro text
  • fix(upload): update content for clearance #666
• In intro body text, add comma after "specifications" and change the link to lowercase ("filing instructions guide for small business lending data").
  • Content updates #621 @meissadia
• Update FIG link in intro: https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/
• Swap in full intro body text (latest change 5/29 at 3:30 pm ET)

Resolve errors

• Change space under the following section heading + body text from 45px to 30px (space under "Single-field errors + body text," "Multi-field errors + body text," and "Register level errors + body text".--- Moved to Consolidated list of user interface updates  #800
• On AWS the "Upload new file" link (next to "Download report" button) styling is not correct. On AWS it is loading at 400 weight and it should be 500 weight.
  • Adjusted font-weight for Upload Link #764 @ojbravo
• Field-level warning alert for number of errors for validation code exceed display limit--- Moved to Consolidated list of user interface updates  #800
  • Add field-level warning alert
  • "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)--- Moved to Consolidated list of user interface updates  #800
• Enable "Save and continue" button and make "Save and continue" turn to primary when requirements to complete step are met
  • Enable Save and continue on all pages (Phase 1) #552 @meissadia
• Pagination bug flagged in Figma
• Change "Upload new file" button to a link
• For paginated tables follow the DS/DSR component: No border around table (See: https://cfpb.github.io/design-system-react/?path=/story/components-verified-tables--pagination)
  • [Resolve Errors] [Review Warnings] Tables - full borders will only show when overflowing (horizontal scrolling active) #583 @shindigira
  • Only add a border to the last page of results. Border should go around the whole table on the last page of results. @shindigira - I included an image in my Figma comment.
    • enhancement(tables): last paginated page has full borders #591 @shindigira
• Design enhancement: Remove border from horizontal scroll tables (multi-field tables) or make table border and scrolling functionality apply to tables in excess of 770px wide
  • [Resolve Errors] [Review Warnings] Tables - full borders will only show when overflowing (horizontal scrolling active) #583 @shindigira
• Make "Upload new file" a secondary button (now that Download report is a primary button) -- now shown in mock-up
  • [Warnings/Errors] Design and accessibility improvements #576 @meissadia
• Add "(CSV)" to button text in the intro so it reads "Download report (CSV)" (1 of 2 and 2 of 2)
  • [Warnings/Errors] Design and accessibility improvements #576 @meissadia
• For the "Download report" button remove "(CSV)" and add download icon (for Resolve errors 1 and 2).
• In small intro text, add (CSV) in parenthesis after "validation report" as shown in the mock-up (for Resolve errors 1 and 2).

Review warnings

• ~Change space under the following section headings from 45px to 30px (space under "Single-field warnings" and "Multi-field warnings"_--- Moved to Consolidated list of user interface updates  #800
• On AWS the "Upload new file" link (next to "Download report" button) styling is not correct. On AWS it is loading at 400 weight and it should be 500 weight.
  • Adjusted font-weight for Upload Link #764 @ojbravo
• Field-level warning alert for number of errors for validation code exceed display limit--- Moved to Consolidated list of user interface updates  #800
  • Add field-level warning alert
  • "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)--- Moved to Consolidated list of user interface updates  #800
• Enable "Save and continue" button and make "Save and continue" turn to primary when requirements to complete step are met...add error handling (content/approach in Figma) for when a user clicks Save and continue without completing the requirements for the step
  • Enable Save and continue on all pages (Phase 1) #552 @meissadia
• Add field-level alert for number of errors for validation code exceed display limit
• Change "Upload new file" button to a link
• For paginated tables follow the DS/DSR component: No border around table (See: https://cfpb.github.io/design-system-react/?path=/story/components-verified-tables--pagination)
  • [Resolve Errors] [Review Warnings] Tables - full borders will only show when overflowing (horizontal scrolling active) #583 @shindigira
  • Only add a border to the last page of results
    • enhancement(tables): last paginated page has full borders #591 @shindigira
• Design enhancement: Remove border from horizontal scroll tables (multi-field tables) or make table border and scrolling functionality apply to tables in excess of 770px wide
  • [Resolve Errors] [Review Warnings] Tables - full borders will only show when overflowing (horizontal scrolling active) #583 @shindigira
• For the "Download report" button remove "(CSV)" and add download icon.
• In small intro text, add (CSV) in parenthesis after "validation report" as shown in the mock-up.
• Make "Upload new file" a secondary button (now that Download report is a primary button)-- now shown in mock-up
  • [Warnings/Errors] Design and accessibility improvements #576 @meissadia
• Add "(CSV)" to button text in the intro so it reads "Download report (CSV)"
  • [Warnings/Errors] Design and accessibility improvements #576 @meissadia

Provide point of contact

• Pre-clearance Add Privacy Notice language and link to the "Provide contact information for your submission" section - @billhimmelsbach - The width of this text is 708px on AWS. Should be 670px wide.
  • [Point of contact] Add privacy notice #692 @meissadia
• Pre-clearance [Link is good. Need confirmation from FOIA] - Update small intro text and link
  • fix(point-of-contact): update content for clearance #668 AND fix(reg-links): move from eCFR to iRegs #674
• Pre-clearance -- Change "Phone number" to "Work phone number"
  • fix(point-of-contact): update content for clearance #668
• Fix error status styling for state selector: [Point of Contact] State Selector - Error/Hover/Focus styling updates #561 -- @shindigira --- @billhimmelsbach - Moving this to the front-end nice to have issue--- Moved to Consolidated list of user interface updates  #800
• When a mix of empty required fields and formatting errors are submitted use “There was a problem updating your point of contact information” for the heading

  • Design Review - Point of Contact #548 @shindigira
• 30px between fields
• Space between eyebrow and step indicator should be 45px
  • [Point of contact] 45px between eyebrow and step indicator #631 @meissadia
• Pipe character between Financial institution name and Year in step indicator should have two spaces before and after--- Moved to Consolidated list of user interface updates  #800

✅ Sign and submit

• Warnings count is showing up as "Not available"
• Update the paragraph text in the success alert box at the bottom of the page.
  • fix(reg-links): move from eCFR to iRegs #674 [x] Pre-clearance -- Update reg link to link to iRegs
  • fix(reg-links): move from eCFR to iRegs #674
• Update the paragraph text in the warning alert at the top of the page
• Pre-clearance -- Update "Confirm your financial institution details" body text
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- Update "Confirm your financial institution identifying information" body text
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- Update "Confirm your parent entity information (if applicable)" body text
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- Update "Confirm your filing point of contact" body text
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- Change "Phone number" to "Work phone number" in
  "Confirm your filing point of contact" section
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- Update "Confirm your register information" body text
  • fix(sign-and-submit): update content for clearance #671
• Pre-clearance -- "Sign and certify your filing" body text -- Update reg link to link to iRegs
  • fix(reg-links): move from eCFR to iRegs #674

Global

• Visual bug in "Save and continue" button - Pipe should match the button colors and should not be gray
• Styling adjustments to step indicator: Design review: Step indicator #612
  • Step Indicator styles #638 @meissadia
  • For filing flow pages, hide the green rule line in the header
  • [Warnings/Errors] Design and accessibility improvements #576 @meissadia
• Mis-alignment in header/grid styling: [Design] Platform grid/header space alignment #529
• Platform home button on 500 screen should take a user to unauthenticated home. Currently the button isn't taking a user anywhere if they aren't logged in.
• Visual bug: CFPB logo is warped in Safari
  • Removed width: 100% from CFPB logo design-system-react#369 @ojbravo
• Update nav bar items and styling and related breadcrumbs @ojbravo
  • Desktop nav items: Home, Filing, [User Name], and Log out
  • Mobile nav items: Home, Filing, Profile (still links to View your user profile), and Log out--- Moved to Consolidated list of user interface updates  #800
  • Change "Platform home" breadcrumb to "Home"
  • Update nav bar links to use standard link colors
  • Style nav bar items with CFPB type styles: Home, Filing, and User name: Avenir Next Medium (500), 16px / Log out: Avenir Next Demi Bold (600), 14px / 18px, All caps, 1px letter spacing for log out and log in.
  • Update the non-selected nav links to not show the dotted underline AND the selected nav bar item to be black (#101820) with a 2px solid underline.

Here's a mock-up:

Updated on 6/27/2024:

Loosely based on the consumerfinance.gov mobile megamenu. Let's pull the code that we can. https://www.consumerfinance.gov

[natalia-fitzgerald]

@billhimmelsbach
I have now moved any remaining open issues to: #800