Remove reCaptcha image and use link instead

[machikoyasuda]

This ticket will need design, copy and product input, but I wanted to make the ticket here so we can start planning it out.

Acceptance Criteria

• Research: Can we remove the reCaptcha image? What is the exact requirement?
• If the research says yes, we can remove the image, then onto design: Decide where to place ReCaptcha text.

Additional context

Refer to how Login.gov does it with text here.

[machikoyasuda]

@indexing @thekaveman @angela-tran Put this ticket here as a stub. This was something we discussed when we first implemented reCaptcha. I then noticed a few days ago that Login.gov has a simple text sentence instead of the obnoxious image on the bottom right-hand side, so I wanted to make this ticket to remind us to look into whether we can make a similar change and make that change.

[thekaveman]

Design work for Sprint 11

[thekaveman]

Here's the Google reCAPTCHA FAQ on this topic: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

[srhhnry]

Current design direction:

This includes resizing the desktop and mobile CTA button to balance the page. The headline for the desktop screen was also justified to the left to help balance the page.

@thekaveman The product/design team discussed extending the approach of this form beyond the AC flow, so that all of the flows have the same template: large, centered CTA button that spans 4-6 bootstrap columns depending on breakpoint, left-justified header, no icons. For the dev team is it better to update one flow or all the flows at the same time?

[thekaveman]

@srhhnry

This includes resizing the desktop and mobile CTA button to balance the page. The headline for the desktop screen was also justified to the left to help balance the page.

The product/design team discussed extending the approach of this form beyond the AC flow, so that all of the flows have the same template: large, centered CTA button that spans 4-6 bootstrap columns depending on breakpoint, left-justified header, no icons. For the dev team is it better to update one flow or all the flows at the same time?

All of these changes totally make sense, and yes I think we'd want to apply across every screen/flow. We'll just want to talk about how to split the changes out in terms of dev work and sequencing. If I understand, these are the list of changes you are proposing:

1. Left-justify headlines on desktop
2. Resize and center desktop and mobile CTA
3. Remove icons? Need to know/see more about this

Where 1 and 2 would be required before we can make this reCAPTCHA update -- is that correct?

[srhhnry]

Awesome! Regarding point number 3, here's a screenshot of a screen with the icons removed and the text readjusted so that everything on the page is within 3-4 columns depending on breakpoint

And no, we could certainly add in the Recaptcha language to the screens with forms without making these changes, but it just looks a bit sloppy:

Since the page is fairly bare, there's not many places to place this text, which is why we have the flag in the first place (the text conflicts with the helper text already on the form). So updating the page to accommodate the Recaptcha text is a nice change, but also helps us with making the app look more streamlined and consistent between breakpoints.

[srhhnry]

Screens have been updated to show the full update, you can see that icons have been removed from the main flow (only on error pages now), all text is justified left, CTA buttons span either 6 or 4 columns depending on breakpoints. There's still a little bit of work to do on finishing the spacing between elements, but this can be considered a completed first draft of the design direction.

https://www.figma.com/design/SeSd3LaLd6WkbEYhmtKpO3/branch/WXLFN7q6RaD4TTZmDhERQ7/Benefits-(Full-Application)?m=auto&node-id=5766-22626&t=nU2oQjhIPqlqDfZf-1