Homepage

[JessicaMarine1]

Path: smartpay.gsa.gov/ File name: Design: Home Template: Homepage Template

---

• [ ] Develop global header
• [ ] Develop full site nav
• [ ] Develop global footer w/ external link icons
• [ ] Includes search bar function

[melchoyce]

Hero image:

[melchoyce]

[weiwang-gsa]

@brentryanjohnson when you get a chance, would mind provide alt description for three images Mel posted above ( 889 tool search, us map and forum), thank you so much!

[brentryanjohnson]

Here you go, @weiwang-gsa!

Three panels from a screen, the first panel has a magnifying glass and reads use the 889 search to find your vendor, the second panel has a green check mark and reads in compliance with Section 889, and third panel has a red exclamation mark and reads not in compliance with Section 889.

A map of the contiguous United States with Utah highlighted in a darker color than the rest of the states, with Alaska, Hawaii, and U.S territories also shown.

An illustration of a computer display showing a blue, red, and green charge card in a panel on one side and an illustration of a person wearing a headset and microphone in a panel on the other side

[weiwang-gsa]

@brentryanjohnson Thank you so much for all the help! @klohman this is ready for design review: https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/

[klohman]

@weiwang-gsa

Here's a few items I noticed when reviewing.

Images

• The logo is slightly larger than in mockup. Using the inspect tool, I decreased the height from 6rem to 5rem and that looks about right.

• Colors

  • Colors in the 889 tool and map images need to be updated since we changed the base colors. I exported them again as SVG files (attached).

Universal updates

• H2 heading size is slightly small.

  • Should be 28px/ 1.75rem

• Body text

  • also seems to be smaller than mockup, but looks like it’s 1rem
  • Need to increase line height to token 5 from USWDS https://designsystem.digital.gov/design-tokens/typesetting/line-height/)

Business Lines section

• “Business Line” heading should read “Business Lines”
• Background color should be theme-primary-dark (#1B3973)
• Card images are slightly small - should be 216 x 140

[brentryanjohnson]

Current nav item Policy&Audits should be Policies & Audits (with spaces around &).

[weiwang-gsa]

@klohman code updates are made, ready for design review: https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/

[weiwang-gsa]

@klohman per today's meeting decision, would you mind providing the navigation for the home page links?

1. main navigation menu items and its URL. e.g. what are the menu items for About, and these menu items's URL.
2. Other links on home page, I saw you just updated those. just double check 889 tool is not link to 889.smartpay.gsa.gov?

[JessicaMarine1]

@weiwang-gsa I think this doc should help: https://docs.google.com/spreadsheets/d/1-nIXpGYsCgKcrXA4LLTEECBILCZOVWmn4n4abvFJGZU/edit#gid=0. It includes all the URL paths

Also, fwiw, I would leave the 889 tool linking out to the tool (889.smartpay.gsa.gov) not taking it to the 889 landing page within the site. cc: @klohman

[klohman]

@klohman per today's meeting decision, would you mind providing the navigation for the home page links?

1. main navigation menu items and its URL. e.g. what are the menu items for About, and these menu items's URL.
2. Other links on home page, I saw you just updated those. just double check 889 tool is not link to 889.smartpay.gsa.gov?

1) Main nav links

About

• About GSA SmartPay = about/about-gsa-smartpay
• Benefits of the Program = about/benefits
• Business Lines = about/business-lines
• Master Contract = about/master-contract
• Logos and Designs = about/logos
• Refunds = about/refunds
• Strategic Payment Solutions = about/strategic-payment-solutions
• Statistics and Reports = about/statistics

How It Works

• How the Program Works = how-it-works/
• Eligibility = how-it-works/eligibility

Stakeholders

• Key Players = stakeholders/key-players
• Agency/Org Program Coordinators = stakeholders/program-coordinators
• Card/Account Holders = stakeholders/account-holders

Merchants = merchants/merchant-overview

State Tax Information

• State Tax Forms = smarttax/state-tax-forms
• Tax Resources = smarttax/resources
• Recognizing Charge Cards = smarttax/recognizing-your-account
• Legal History = smarttax/legal-history

Policies & Audits

• Policies = policies-and-audits/policies
• Audit Repository = policies-and-audits/audits
• Smart Bulletins = policies-and-audits/smart-bulletins

Resources

• 889 tool = resources/tools/section-889
• Publications and Videos = resources/publications/
• Events = events/gsa-smartpay-forum

2) 889 tool link

Link to the 889 tool at 889.smartpay.gsa.gov (see Jessica's comment)

[weiwang-gsa]

code update checked in, and PR created, once PR is approved, will merge it into main

[weiwang-gsa]

@klohman code update is in place, it is ready for design review : https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/

Please note, if the links leads to page that hasn't been built, it will render 404 errors. Thanks!

[klohman]

@weiwang-gsa

• There's a duplicate "State Tax Forms" menu item under State Tax Information

Other than that, all the links seem to be pointed at the right pages

[weiwang-gsa]

@klohman State Tax Forms duplication issue is addressed, you can review it here: https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/, if it looks good to you, please feel free to move it to Ready for QA, thank you

[JessicaMarine1]

@rebekahperillo this is ready for your review: https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/

[rebekahperillo]

Wow! This looks really great! Nice work everyone! Moving over to done! :)