[FE] Review homepage, login screens, questions flow, and other screens in staging

[Samara-Strauss]

Background

In our 8.27.20 planning meeting, Mike mentioned he had homepage and login screens to review with Melissa. This ticket is to track that convo and make sure it happens.

10/21/20 update: Allyce is going to conduct a review of all screens currently in staging and perform design QA.

Tasks

• Homepage
• Account sign up
• Account sign in
• Forgot username
• Forgot password
• Questions flow
• Style guide (WIP)

Things to review for:

Generally, we are reviewing for bugs or inconsistencies between the prototype and what was implemented in dev.

• Compare content in the prototype and staging and make sure it matches
  • In some places, mobile versus desktop content might be different, and we want to make sure it's the same. Double check this.
• Review typography, like decisions made for H1, H2, H3. Make sure H tags are implemented correctly across the app.
  • Note: the h tags are inconsistent in InVision, so Mike made some decisions. Don't compare what is in staging to what's in the prototype for this one.
• Are things "pixel perfect"? I.e., do we need to add more padding anywhere? Any line breaks? Any wonkiness going on design-wise?
• Check responsiveness from mobile to tablet to desktop

[Samara-Strauss]

Blocked — need the staging environment to be up before this can be done.

[allyceh]

@mikepif Looks like this is what we're going to do tomorrow, right? If so, I'll assign myself.

[allyceh]

@mikepif @leahbannon2 @bestes-usds Made some tweaks to this ticket to reflect what design QA will entail. Closed out 155 because it felt repetitive.

Per a convo with Leah and Brian today, I'll assess the LOE for the design QA once I take a look at the latest in staging, and will loop in Brian or Leah if I need support.

[allyceh]

@leahbannon2 or @bestes-usds , if you still have bandwidth to help out with this ticket, could you help with reviewing these two items from the list above?

• In some places, mobile versus desktop content might be different, and we want to make sure it's the same. Double check this.
• Check responsiveness from mobile to tablet to desktop
  • Note: I don't have an iPad. Will need to find team member with an iPad to QA this.

I will start by reviewing typography and H tags. I'll draft a bug ticket format and run it by @mikepif .

@mikepif , in your experience, what types of devices do you think we should use for QA? What browsers do the NJ folks have on their laptops/desktop computers and what are we supporting?
List of browser options:

• Chrome
• IE (old version and edge)
  List of devices:
  ? These should be devices that our applicants would have.

[mikepif]

I'd recommend at least testing with;

Chrome (Android), Chrome (v86+, desktop), Safari (iOS), Safari (Desktop), Firefox (v81+, desktop)

(*see market penetration below)

Probably worth support MS Edge too, but not worth supporting older IE not seen much in the wild anymore and a pain to support.

Probably not necessary, but device-wise;

iOS: iPhone X-12 (can use simulators), iPad (latest version is fine, tend to get most people on the latest version quickly)
Android: At least v10 but probably v9 if possible (see below for market penetration)

• https://gs.statcounter.com/android-version-market-share/mobile-tablet/worldwide
• https://gs.statcounter.com/browser-version-market-share

[allyceh]

@mikepif Do we need to test older iPhone OS or screen sizes for older devices? Or, will we see the same thing if we test on X-12 as any other OS? Given the population of folks who are using the application, I am making the assumption that they won't have the X-12.

[leahbannon2]

We'll need to support IE11, too. There's enough people still using it, and I believe IE is the browser they use at the county offices.

From analytics.usa.gov

[amalabukar31]

@melissajschaff @allyceh are we declaring this done? or should I move it back to in progress for melissa to review?