GSA / smartpay-website

SmartPay website

https://federalist-ab31a10d-375d-4040-9324-1ae94e8a36b9.sites.pages.cloud.gov/site/gsa/smartpay-website/

3 stars 0 forks source link

Mobile Review #248

Closed JessicaMarine1 closed 1 year ago

JessicaMarine1 commented 1 year ago

As a user, I want to be able to easily navigate the program site on my mobile device.

Acceptance Criteria:

[x] Do UX review on mobile
[x] Log issues

klohman commented 1 year ago

Review comments

1. Logo

Logo is overlapping the page content and needs to be scaled down to fit in the menu bar on mobile

2. Button alignment

Text in button should be centered vertically. You notice it more on the "Benefits" button.

3. Menu

Strategic Payment Solutions is very cramped. Is it possible to adjust padding?

4. Smart Bulletins table

There is a weird double border on the Title column in this table.

@brentryanjohnson Do you have any other comments to add?

brentryanjohnson commented 1 year ago

5. Logo

The SmartPay logo doesn't sufficiently resize to its container on smaller viewports, causing it to collide with divs both above and below it.

Content page

Screenshot with GSA SmartPay logo leaking above and below div borders

Homepage

Screenshot of SmartPay homepage on mobile with logo escaping borders

6. Image resolution

Card images in particular are pixelated and blurry on mobile. I suspect this might be due to the retina display. We might want to consider bumping the resolution to 2x the rendered size to fix this problem on retina display.

Screenshot of smartpay website with pixelated image of red charge card

7. Table borders

I'm not sure what's causing this, but the table borders in certain instances have a double border under certain cells. For example, on Smart Bulletins, the table border is doubled only in the Title column.

Screenshot of SmartPay website showing space between paragraph lines