Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

889 Tool | NASA Recognition #123

Closed
4 tasks
rebekahperillo opened this issue Jul 14, 2023 · 26 comments
Closed
4 tasks

889 Tool | NASA Recognition #123

rebekahperillo opened this issue Jul 14, 2023 · 26 comments
Assignees
@mark-meyer @felder101 @johnbeallgsa @rebekahperillo
Labels
Sprint 19 These stories will be included in Sprint 19. Sprint 20

Comments

@rebekahperillo
Copy link
Contributor

rebekahperillo commented Jul 14, 2023 •
edited by CodyHinze
Loading

NASA, as the original creator of the 889 tool, needs to be given more credit on the 889 tool.

https://889.smartpay.gsa.gov/#/

Acceptance Criteria:

  • Implement design changes in footers to match design.
      • 1st sentence in grey footer.
      • Adding attribution & NASA logo in black footer.
  • Add period to the end of the second line in the grey footer:
    "We encourage input! Please provide feedback and suggestions to gsa_smartpay@gsa.gov. "
@klohman
Copy link

klohman commented Jul 17, 2023 •
edited by JessicaMarine1
Loading

Design options

Option 1: Logo in header - left

image

Option 2: Logo in footer

image

Option 3: Logo in header - right aligned

image

@rebekahperillo
Copy link
Contributor Author

rebekahperillo commented Jul 17, 2023 via email

@JessicaMarine1 JessicaMarine1 changed the title NASA Recognition on 889 Tool (HOLD) NASA Recognition on 889 Tool Jul 28, 2023
@JessicaMarine1
Copy link

Feedback from Jeff White (OSC branding):

Version 1 - not feeling the reverse Star Mark next to the full color NASA logo (and the distance between the two needs to be increased so that there is one full Star Mark between them). The blue of the NASA logo is also getting lost in the background. Since NASA doesn't have a reverse version of their logo we should use our full color version of the Star Mark and make the header of the page white (following our normal guidelines for white bar size found in our branding guidelines).

Version 2 - need to increase the space between the Star Mark and text to allow for one full Star Mark between them

Version 3 - same feedback for text as in v.2 and the mix of one color and full color doesn't work. Change headers background color to white and go full color for both logos.

@JessicaMarine1
Copy link

@klohman please see the comments from Jeff White above. Could you please modify the mockups to match his suggested edits so that I can pass them through Sarah Bryant (OSC) for final comment. ty

@klohman
Copy link

klohman commented Jul 28, 2023

Updated

Option 1

image

Option 2

image

Option 3

image

@JessicaMarine1
Copy link

The first part of NASA's Media Usage Guidelines:
The NASA Insignia (the blue "meatball" logo), the NASA Logotype (the "worm" logo) and the NASA Seal may not be used for any purpose without explicit permission. These images may not be used by persons who are not NASA employees or on products, publications or web pages that are not NASA-sponsored.

@JessicaMarine1
Copy link

Feedback from Sarah Bryant in OSC:

  1. Use the full USWDS identifier component, including the required links. And it must say "An official website of the U.S. General Services Administration".
  2. Consider the site name and description. The "889 compliance search" title implies a user can enter criteria and get a set of results. But it appears the functionality is actually to check if a specific vendor is 889 compliant.
  3. The "889 Compliance SAM Tool web application" is bureaucratese. A plain language version would be along the lines of "This tool was built by NASA using the sam.gov Entity Management API".
  4. If the site isn't being co-managed with NASA, but has been handed over to GSA to manage, it makes more sense for the partnership information to be in the footer, as presented in option 2.

TLDR:

  • Recommends Option 2 (attribution in footer)
  • Need to incorporate standard GSA footer
  • Reconsider wording of 1st sentence in gray footer
  • Reconsider name of tool

@klohman
Copy link

klohman commented Jul 31, 2023

Regarding the comment on the name of the tool, I noticed the live site has it called "889 Representations Search" (the old wireframes I pulled had the other name).

Here's an updated mockup that more closely matches the live site. This mock also includes:

  • the NASA logo
  • the updated footer
  • updated language : "This tool was built by NASA using the sam.gov Entity Management API"

image

@JessicaMarine1
Copy link

JessicaMarine1 commented Jul 31, 2023 •
edited
Loading

@klohman could you update the light gray footer to:

This tool was built by NASA using the SAM.gov Entity Management API.
We encourage input! Please provide feedback and suggestions to gsa_smartpay@gsa.gov

Limitation on Permissible Use of Dun & Bradstreet, Inc. (D&B) Data

Just trying to get it closer to what's on prod and only changing 1st sentence: https://889.smartpay.gsa.gov/#/

@klohman
Copy link

klohman commented Jul 31, 2023

@JessicaMarine1 Updated.

image

@JessicaMarine1
Copy link

Update 8/2/2023:

  • Rebekah provided mockup to Erin to review with her contact at NASA.
  • Reminded Erin about NASA's Media Usage Guidelines
  • Recommended holding the implementation of any changes until the new sites go live.

@JessicaMarine1
Copy link

JessicaMarine1 commented Aug 21, 2023 •
edited
Loading

We need to put the GSA footer on the 889 tool regardless of the NASA co-branding decisions, so I'm going to make that another story (#299).

@rebekahperillo
Copy link
Contributor Author

@JessicaMarine1 @mark-meyer Design approved by NASA! Also are we able to update the light gray portion to have a period after gsa_smartpay@gsa.gov? Thank you!

@rebekahperillo rebekahperillo changed the title (HOLD) NASA Recognition on 889 Tool (Approved) NASA Recognition on 889 Tool Oct 5, 2023
@JessicaMarine1
Copy link

Please save this work for KL&A :)

@rebekahperillo rebekahperillo transferred this issue from GSA/smartpay-website Oct 17, 2023
@JessicaMarine1
Copy link

@rebekahperillo I believe the scope of this story has changed over time. As a result, I would recommend updating the AC to:

  • Implement design changes in footers to match design
    • 1st sentence in grey footer
    • Adding attribution & NASA logo in black footer.
  • Add period to the end of the second line in the grey footer: We encourage input! Please provide feedback and suggestions to gsa_smartpay@gsa.gov.

@rebekahperillo rebekahperillo changed the title (Approved) NASA Recognition on 889 Tool NASA Recognition on 889 Tool Oct 20, 2023
@rebekahperillo rebekahperillo changed the title NASA Recognition on 889 Tool 889 Tool | NASA Recognition Oct 20, 2023
@rebekahperillo rebekahperillo added the Sprint 19 These stories will be included in Sprint 19. label Oct 20, 2023
@rebekahperillo rebekahperillo added Sprint 19 These stories will be included in Sprint 19. and removed Sprint 19 These stories will be included in Sprint 19. labels Oct 20, 2023
@rebekahperillo rebekahperillo changed the title 889 Tool | NASA Recognition 889 Tool | NASA Recognition (Sprint 19) Oct 20, 2023
@rebekahperillo rebekahperillo added the Bug Something isn't working label Oct 20, 2023
@rebekahperillo rebekahperillo removed the Bug Something isn't working label Oct 20, 2023
@rebekahperillo rebekahperillo changed the title 889 Tool | NASA Recognition (Sprint 19) 889 Tool | NASA Recognition Oct 20, 2023
@CodyHinze
Copy link
Contributor

AC has been updated based on @JessicaMarine1's comment above.

Need to get a final version the NASA logo.

@CodyHinze
Copy link
Contributor

NOTE: Because this has an image, we will also need to include an Alt tag on the image that describes the NASA logo.

@rebekahperillo
Copy link
Contributor Author

@CodyHinze Found the NASA logo! :) If you need anything else, please let me know. Thank you!

Image

@CodyHinze
Copy link
Contributor

The logo above includes the checkerboard background in the image file. Visually, this is identical to the publicly available version on Wikipedia, but we wanted to ensure we are using the correct version. and the version used in the nasa.gov website footer.

SVG - https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg

Official SVG - https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg

I would recommend we use the version that is currently used on the official nasa.gov site.

@rebekahperillo
Copy link
Contributor Author

@klohman Hello again! Do you happen to remember which logo file you used when you created the mockup above? Thank you for your help!

@klohman
Copy link

klohman commented Nov 8, 2023

@klohman Hello again! Do you happen to remember which logo file you used when you created the mockup above? Thank you for your help!

@rebekahperillo Looks like I saved the original file to my old Macbook. I agree with @CodyHinze though that we should use the version from the official NASA site if that's available for you to pull.

@rebekahperillo
Copy link
Contributor Author

@klohman Perfect, thank you!

@CodyHinze Please see Kristen's advice. If you have any questions, please let me know.

@felder101 felder101 self-assigned this Nov 9, 2023
@JennaySDavis
Copy link

JennaySDavis commented Nov 20, 2023 •
edited
Loading

#123 Acceptance Criteria

Pass/Fail Description
Implement design changes in footers to match design
Pass 1st sentence in grey footer
Pass Adding attribution & NASA logo in black footer
Pass Add period to the end of the second line in the grey footer: "We encourage input! Please provide feedback and suggestions to gsa_smartpay@gsa.gov. "

Comments/Additional Notes
Performance score - This relates to the entire screen performance. I also ran Lighthouse in production, and it was 69. I do know in the QASP that it was noted that the 889 tool may need to meet the 90% standard. A ticket should be created to improve the performance of the 889 tool, and I can attach the report to the ticket that will assist the developers when the ticket is pulled into a sprint.

Criteria Score
Performance 78
Accessibility 100
Best Practices 98

@johnbeallgsa
Copy link

@JennaySDavis Let's chat about this Monday. I have a few questions on the Performance. Would you happen to know what the score was before? How can the score be improved now, or does that require a new story? Can the improvement be done before releasing it into production?

The NASA logo and everything else look great, though!

@CodyHinze
Copy link
Contributor

CodyHinze commented Nov 27, 2023 •
edited
Loading

The current production version of the 889 tools home page (https://889.smartpay.gsa.gov/#/) receives the following in Lighthouse.

Criteria Score
Performance 97
Accessibility 100
Best Practices 91

The performance number on the staging environment should only be used as a guide, it may return a false indicator of server performance and load times that are not reflected on production. When I re-ran the same scan on Production 3 times, I received between a 94 and a 98 for performance based on three scans performed a few minutes apart.

Since the changes made in this ticket only include minor changes in the HTML structure in the footer and the addition of a single optimized SVG image, the performance numbers on staging are not a concern.

Please note that there are usability concerns on the Search results screens, including the following:

  • Responsive layout: The content may overflow the horizontal container in the list.
  • Download PDF buttons are not uniquely labeled. All are just labeled as "Download PDF". The aria-labelled-by tag is used incorrectly, that tag accepts an "ID" and not a string. This is invalid: aria-labelledby="Download PDF for EXAMPLE BUSINESS NAME LLC". Switching to: aria-label="Download PDF for EXAMPLE BUSINESS NAME LLC" would fix this issue.
    • Additionally using spaces in IDs in HTML is not allowed. That is the origin of this issue. The SVG element in the DOM includes a TITLE element with an ID of "Download PDF for EXAMPLE BUSINESS NAME LLC" that is not allowed since it has spaces and then prevents screen readers from getting the unique content beyond. "Download PDF"
  • Unavailable PDF's include disabled buttons that are typically skipped by screen readers
  • Pagination at the bottom of the page is incorrectly configured and includes labels that contain code such as aria-label="Page {{page}}"
  • The icons such as the "Green-Check" and "Warning-Icon" include IDs that are not unique.

@JennaySDavis JennaySDavis mentioned this issue Nov 28, 2023
Open
@johnbeallgsa
Copy link

Moving to Done with new enhancement ticket made #146 for a future sprint.
Excellent work, team, and thank you for all the explanations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mark-meyer mark-meyer

@felder101 felder101

@johnbeallgsa johnbeallgsa

@rebekahperillo rebekahperillo

Labels
Sprint 19 These stories will be included in Sprint 19. Sprint 20
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@CodyHinze @mark-meyer @klohman @felder101 @JessicaMarine1 @johnbeallgsa @rebekahperillo @JennaySDavis