Homepage | Recognizing Charge Cards

[A-L33]

Make Recognizing Charge Card content a homepage card for easy access.

[johnbeallgsa]

We will consider this once we stop recognizing the 25th anniversary, maybe in January 2024.

We replace this (below) and add it here.

[rebekahperillo]

FYI - This story is based on these usability findings: https://docs.google.com/presentation/d/1_teFJOGYaOJHL2oyQokujI0_iHPoPFv4WeoZAIMc1p0/edit#slide=id.g1e11397fe4b_0_0

From the deck showing the "Recommendation" and "Impact/Effort" :

Card Information	Make it easier for a novice user to locate card identifying information. Short-term: Add link to Recognizing Charge Cards from homepage. Long-term: Watch analytics and consider making “Card/Account Types” a main nav item.	Medium/Low

[rebekahperillo]

Provide proposed image for homepage to Cody/Jenn to compress before loading.

[LoraBradford]

@CodyHinze we like this image for the cards on the homepage! Can you please send us the resized version?

[CodyHinze]

Here are compressed versions of the other two callouts that we should consider swapping in for performance.

[CodyHinze]

Here is a sized version of the call for the cards for the home page

[CodyHinze]

Developers, here is a PNG version the reduces the file size nearly 100k that we can use instead of the above SVG.

[LoraBradford]

@CodyHinze thank you for the resized images. I wasn't aware that the other images needed to be switched out. @johnbeallgsa and I will talk these and let you know! Thank you!

[LoraBradford]

@john-labbate Please see below for the wording to go on the side of the card image

Learn how to identify the different types of GSA SmartPay cards/accounts.

https://smartpay.gsa.gov/smarttax/recognizing-your-account/

[JennaySDavis]

#291 Acceptance Criteria

Pass/Fail	Description
Pass	25 years has been removed
Pass	Recognizing Charge Card Image is displayed
Pass	Learn how to identify the different types of GSA SmartPay cards/accounts. content is displayed
Pass	Recognizing Your Account hyperlink is displayed and navigates as designed

Comments/Additional Notes N/A

ADA Compliance (Automated scan via Chrome Lighthouse)	Criteria	Score
Performance	94*
Accessibility	100
Best Practices	100

• Performance score will improve when https://github.com/orgs/GSA/projects/37/views/1?pane=issue&itemId=46091228 and https://github.com/orgs/GSA/projects/37/views/1?pane=issue&itemId=52445660is completed.

Passed 2/6/24- JSD

[johnbeallgsa]

*Performance score will improve when https://github.com/GSA/smartpay-website/issues/378 is completed. Looks great! Thank you. Moving to Done.